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

Question

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 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 ;)

Answer 1

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.

Answer 2

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

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>