jQuery how to get the value of each stop event in resizable

Question

I want to get the value for each stop event values in resizable method

function calc(){
  $(function() {
    $(".txt").resizable({
      stop: function(e, ui) {
        var w = ui.size.width;
        var h = ui.size.height;
        var Font_size=parseInt($(".txt").css("font-size"));
      }
    });
  });
}

console.log(Font_size); //when I try this - variable undefined

When ever I try to print the value of Font_size show undefined

How I can get this values any ideas?

Your log is called before the event even occurs. Also Font_size variable is only scoped inside the stop callback. — charlietfl
– charlietfl, Commented Mar 31, 2019 at 14:53
No ... because you haven't explained what the higher level problem you want to solve is. Read that XY problem link thoroughly — charlietfl
– charlietfl, Commented Mar 31, 2019 at 15:05

Mark Schultheiss · Accepted Answer · 2019-04-02 19:21:16Z

1

Resize is an event and the stop is an event handler for that stop event. You can access that stop event, including calling a function inside the event handler - which I infer from your question. You only put in place that event handler when that calc function is called with the document ready event handler(which event has already fired) I place the event handler outside that function call. Rather than setting some static global that is logged, here I show how to call a function when it is triggered and log it there.

EDIT: Added second example to show how to set global on startup with some helpers.

function calc(fontSize) {
  console.log("calc:",fontSize);
}
function calc2(event, ui) {
  let fontSize2 = parseInt($(this).css("font-size"), 10);
  console.log('calc2:', fontSize2);
  console.log('calc2 More:', ui.size.width, ui.size.height);
}

$(function() {
  $(".txt").resizable({
    stop: function(e, ui) {
      let w = ui.size.width;
      let h = ui.size.height;
      let Font_size = parseInt($(this).css("font-size"), 10);
      calc(Font_size);
    }
  });
  $(".txt").on("resizestop", calc2);
});

.txt {
  border: solid 2px lime;
  width: 50%;
  height: 2em;
}

.bigger-size {
  font-size: 1.5em;
}

.tiny-size {
  font-size: 0.75em;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="txt normal-size">happy slappy resizable text </div>
<div class="txt bigger-size">happy slappy resizable text </div>
<div class="txt tiny-size"><span>Howdy</span> happy slappy resizable text </div>

Further, to demonstrate how to actually get things working with your global variable (which is undefined because it was set after your console.log)

// borrow some code: https://stackoverflow.com/a/2523758/125981
$.widget("ui.resizable", $.ui.resizable, {
  resizeTo: function(newSize) {
    var start = new $.Event("mousedown", {
      pageX: 0,
      pageY: 0
    });
    this._mouseStart(start);
    this.axis = 'se';
    var end = new $.Event("mouseup", {
      pageX: newSize.width - this.originalSize.width,
      pageY: newSize.height - this.originalSize.height
    });
    this._mouseDrag(end);
    this._mouseStop(end);
  }
});

var calc = function calc(event, ui) {
  console.log('calc', "ui:", ui ? ui.size : undefined);
  let w = ui.size.width;
  let h = ui.size.height;
  console.log("calc Font_size:", window.Font_size);
}

function calc2(event, ui) {
  console.log('calc2', ui.size);
}

$(function() {
  // bind an event we can use to add resizable event
  $(".resizable-things")
    .find('.txt')
    .on('bind-resizable', function(event, options, others) {
      $(this).resizable(options);
    });

  // trigger to bind tiny-size
  $('.txt.tiny-size').trigger('bind-resizable', {
    grid: [20, 10],
    stop: calc2
  });

  // trigger to bind others
  $('.resizable-things')
    .find('.txt')
    .not('.txt.tiny-size')
    .not(".txt.bigger-size")
    .trigger('bind-resizable', {
      stop: calc
    });

  $('#testresize').one('click', function(event) {
    let b = $(".txt.bigger-size");
    b.trigger('bind-resizable', {
      stop: function(event, ui) {
        // just to show it binds
        console.log('stop w', ui.size.width);
        console.log($(this).css('font-size'));
        // create our bad idea global variable
         window.Font_size = parseInt($(this).css("font-size"), 10);
        calc.call(this, event, ui);
      },
      alsoResize: ".txt-mirror",
    });

    let m = $('.txt-mirror');
    b.css("font-size", "1.65em");
    b.resizable("resizeTo", {
      // 190% height of the mirror which changes the mirror height on trigger resizeTo
      height: (m.height() / 100) * 190,
      width: (m.width()/100) * 55//55 percent width
    });
    $(this).hide();//hide button
  });
});

.ui-resizable {
  border: solid 2px lime;
}

.bigger-size {
  font-size: 1.5em;
  border: 1px cyan dashed;
  margin: 1em;
}

.tiny-size {
  font-size: 0.75em;
}

.txt-mirror,
.txt-mirror .show {
  border: 1px solid blue;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="txt txt-mirror">I mirror resize text<span class="show">?</span> </div>
<div class="container resizable-things">
  <div class="txt normal-size">happy slappy resizable text I am other </div>
  <div class="txt bigger-size">happy slappy resizable text </div>
  <div class="txt tiny-size"><span>Howdy</span> happy slappy resizable text </div>
</div>
<button id="testresize" type='button'>test event</button>

edited Apr 2, 2019 at 19:21

answered Mar 31, 2019 at 15:18

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mark Schultheiss Over a year ago

I added a second function example to show how to add another handler/alternative way to add one.

prabhakaran7 Over a year ago

superb second one also working thank you how i can use in other funtions

Mark Schultheiss Over a year ago

"how i can use in other funtions" that depends on your needs, likely store that value somewhere however, it will change every time you resize so perhaps call those other functions when this event fires (or trigger a custom event with the value as a parameter)

Mark Schultheiss Over a year ago

Tried what exactly? This "stop" is an event, here is some information on events api.jquery.com/category/events and for those specific to the jQuery UI resizable the events are listed here: api.jqueryui.com/resizable

Mark Schultheiss Over a year ago

I added a second example to show how to trigger the resize on initial startup and set a global variable.

|

Shriekin Ninja · Accepted Answer · 2019-03-31 14:52:13Z

0

function calc(){
$(function() {
    $(".txt").resizable({
        stop: function(e, ui) {
            var w = ui.size.width;
            var h = ui.size.height;
            var Font_size=parseInt($(".txt").css("font-size"));
            console.log(Font_size);
        }});
});
}

OR

var Font_size = 0;
function calc(){
$(function() {
    $(".txt").resizable({
        stop: function(e, ui) {
            var w = ui.size.width;
            var h = ui.size.height;
            Font_size=parseInt($(".txt").css("font-size"));

        }});
});
}
console.log(Font_size);

answered Mar 31, 2019 at 14:52

Shriekin Ninja

966 bronze badges

3 Comments

prabhakaran7 Over a year ago

can i return the value to use out of method

charlietfl Over a year ago

Provide an explanation . Code only answers are not very valuable without explanation

prabhakaran7 Over a year ago

i tried second choice of code but it's shows only 0 not updating resizable stop event

Collectives™ on Stack Overflow

jQuery how to get the value of each stop event in resizable

2 Answers 2

6 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related