Is it possible to use JavaScript (jQuery) to catch the moment of changing the size of any element?

Question

JavaScript

You need something like this:

$('body').heightChanged(function(){<br>
    alert('event');<br>
});<br>
<br>
$('body').append('Hello!'); // и тут показывается алерт

Is it possible to do this?

Answer 1

And why would the height of the element change? Track the cause, not the result.
As an option, of course, you can check every N milliseconds if the height has changed and, if so, then call the function, but such a frequent height calculation can have an extremely negative impact on performance (reflow / repaint).

Answer 2

www.w3schools.com/jsref/event_onresize.asp won't work?

Answer 3

jQuery has event resize
Example:

$(window).resize(function() {
  $('#log').append('<div>Handler for .resize() called.</div>');
});

Answer 4

jQuery: .resize( [ eventData ], handler(eventObject) )
There's a catch:

Code in a resize handler should never rely on the number of times the handler is called. Depending on implementation, resize events can be sent continuously as the resizing is in progress (the typical behavior in Internet Explorer and WebKit-based browsers such as Safari and Chrome), or only once at the end of the resize operation (the typical behavior in Firefox).

In Russian: the handler can be called either once, or continuously during the resizing of the element - it depends on the browser.

Answer 5

I don’t speak for libraries, but you can subscribe to the main changes , then only a timeout.