How to run a function everytime a div changes its size?

How to run a function everytime a div changes its size?

Div's size normally changes when the window changes its size, but NOT only; The new width/height are not everytime set by css, but I need to get the real width/height of that height when everytime it changes.

I use开发者_如何学Go jQuery, so based on this would be good;

It must work in chrome, ff2, ff3, ie6(if can't work I might lag user's browser with a timer xD) ie7, safari, opera... in other words the most popular browsers

thanks ;)

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

1) There is already a solid method to check if a element has been changed in almost all browsers. Check for this my lib:

http://marcj.github.io/css-element-queries/

This library has a class ResizeSensor which can be used for resize detection. It uses a event-based approach, so it's damn fast and doesn't waste CPU time.

2) Please do not use the jQuery onresize plugin as it uses setTimeout() loop to check for changes. THIS IS INCREDIBLY SLOW AND NOT ACCURATE.

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

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

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

Here is a demo that uses polling to accomplish what you need...

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