DIV height change detection

Question

Using document.getElementByID('div1').clientHeight How to determine if div1 height is changing?

I need to perform an operation if the condition (Div1 height change) is satisfied.

eg.

 if(document.getElementByID('div1').clientHeight != //old div1 height) { // do my operation } 

Can anyone provide me with the syntax of such JavaScript.

Answer 1

Use a div style property. maybe your old div1 height is 20 pixels;

 if(document.getElementByID('div1').style.height != 20px;) { // do my operation } 

Answer 2

I would use jQuery so

 $(elm).resize(function(event) { alert('resized!'); /* ... other code ... */ }); 

See http://api.jquery.com/resize/ for details.

Regardless of any implementation, you should probably use a choke: “The code in the resize handler should never rely on the number of times the handler is called. Depending on the implementation, resize events can be sent continuously as the size changes (typical behavior in Internet browsers Explorer and WebKit such as Safari and Chrome) or only once at the end of a resize operation (typical behavior in some other browsers such as Opera).

Answer 3

 document.getElementById('div1').onresize = function() {...}; 

Put the desired code in the function.

I am not 100% sure it will work. You might be better off having setInterval , which checks to see if offsetHeight has changed and is acting accordingly.