jQuery resize not working at FireFox, Chrome and Safari

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.

eg 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() { });

if you want to watch the size of a DIV, it depends on what your intention is. 如果你想观看DIV的大小，这取决于你的意图。 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 (ie 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).

Answer 2

There is a benalman plugin for that :)

http://benalman.com/projects/jquery-resize-plugin/

Answer 3

Are you trying to set myDiv to a specific size?

Try the JavaScript code below. I used it for resizing a div which holds a flash object based upon a height being returned from the flash file and it seemed to work okay for me.

function setMovieHeight(value) {
    var height = Number(value) + 50;
document.getElementById("video").height = height;
}

the jQuery equivilent should be:

function setHeight(value) {
   var height =  number(value) + 50;
   $('#MyDiv').attr('height') = height;
}

resize does only seem to apply to the windows object.

Answer 4

It is not the question WHY? It is Demanded, as in, we WANT to monitor a DIV when it is resized.

For obvious example, jQuery UI, resizable. Yeah, user resized a div by mouse drag, now what? Maybe the content inside is resized and we want to know about it. And should we have all the code in a giant melting pot within the original reszing code? I don't think so.

Another speedy browser that does nothing, sigh.

Answer 5

Why do you expect #dvMyDIV to be resized? Is maybe resizing of that element a result of something else, maybe the window being resized? If so, try

$(window).resize(function(){alert("Resized");});

Answer 6

I might suggest something like this:

1) on page load, get width of your div and put it in a global variable

2) on execution of whatever operation directly or implicitly resizes that div (which I assume is a javascript-driven event) check the new width against the old width and update the global value with the new width.

Answer 7

Here is a much more refined and a live example that does a lot of resize math all based on the window resize event. Works brilliantly in ff 3.6, safari 4.0.4, and chrome. It is a little chunky in ff 3.5. So thus it should work in mozilla and webkit across the boards. I avoid the other BROWSER, because I really do not like it, and the code is so much cleaner without having to consider it. I realize that I will have to get over that, I swallow it when I have to with and IE surcharge.

ANYWAY the link:

http://fridaydev.com/bookmap/proport3.html

Answer 8

With MSIE everything works just fine. With Firefox, I guess you'll have to resort to some oblique techniques such as storing the element's original width/height in custom properties and using $(elem).bind('DOMAttrModified', func) . Then in the func() callback, check if the new width/height differ from the ones you stored previously, take the respective resize action and store them again for the next event callback. Note that this approach works for Firefox only. I haven't been able to find a decent workaround for Chrome, Safari and Opera yet. Maybe using window.setInterval() would do but... sounds too slopy... event the thought of it makes me kinda sick :(