How to run a function every time a div changes its size?

Question

How to run a function every time a div changes its size?

Div size usually changes when the window changes its size, but not only; The new width / height is not set by css every time, but I need to get the real width / height of this height when it changes every time.

I use jQuery, so based on this would be nice;

It should work in chrome, ff2, ff3, ie6 (if it does not work, I can lose the user browser using the xD timer) ie7, safari, opera ... in other words, the most popular browsers

thanks;)

Answer 1

Here is a plugin that extends the jQuery resize() event to work with any element, not just a window.

Answer 2

This question has been asked to '11, but since I came here via Google, I want to clarify some things.

1) There is already a reliable method for checking whether an element has been changed in almost all browsers. Check out this my lib:

http://marcj.imtqy.com/css-element-queries/

This library has a ResizeSensor class that you can use to determine size. It uses an event-based approach, so it quickly stands idle and does not waste CPU time.

2) Please do not use the onresize jQuery plugin as it uses the setTimeout() loop to check for changes. IT'S INCREDIBLY SLOW AND NOT PRECISE.

Answer 3

Try the onresize event (http://www.w3schools.com/jsref/event_onresize.asp):

 <div onresize="alert('You have changed the size of the window')"></div> 

Answer 4

Here is a demo using a survey to accomplish what you need ...

... but the resize() plugin mentioned above looks better if it works the way you need.