Question

$('#dvMyDIV').bind('resize', function(){     alert('Resized'); }); 

or

$('#dvMyDIV').resize(function(){     alert('Resized'); }); 

The questions

1. Why is this not working at FireFox, Chrome and Safari?
2. Can this be considered a jQuery bug since the resize is not handled for other browsers?
3. Could the only workaround be calling a SetTimeout function checking the clientHeight and clientWidth?
4. Any workarounds using jQuery?

Answer 1

I believe the JavaScript resize event only applies to frames or windows, not to DIVs.

e.g. see this page:

The onResize even handler is use to execute specified code whenever a user or script resizes a window or frame. This allows you to query the size and position of window elements, dynamically reset SRC properties etc.

So if you want to detect when the window is resized, in jQuery you should probably use $(window).resize(function() { });

Edit: if you want to watch the size of a DIV, it depends on what your intention is. If you’re resizing with JavaScript then you could implement a method to perform the resize and have that handle calling any other resize code.

Otherwise, if you’re just watching for the DIV to resize when someone resizes the window, wouldn’t it just work to attach the resize listener to the window and then check if the DIV had been resized (i.e. store the old values of width / height and check them on resize)?

Finally, you could consider using watch on the width / height properties, although I don’t know whether this is fully browser-compatible (think this might be Mozilla-only). I did find this jQuery plugin which looks like it might do the same thing though (with some slight modification).