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.

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

Answer 2

Yeah Phill. That i know. The thing is that i want to call the function on resize of the DIV. Its working in IE7 and not in Mozilla (wonder of wonders) I want a resize event for DIV (A HTML element)

Answer 3

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 4

But cant do that here. Its a small div thats resized. its not changing the window size at all

Answer 5

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 6

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 7

hi Phill Sacre,

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.

Exactly what i needed to do. Doh, what was i thinking? Thanks a lot!

Answer 8

Phill Sacre, divs are resizeble http://jqueryui.com/demos/resizable/#snap-to-grid

Answer 9

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 10

I don't think this solves anything. The idea of good event driven programming is to have listeners.

Your div may get resized by the window, it's parent element, content being added/removed, font change, image change, CSS change...

The problem isn't usually hard to solve using some workarounds (checking window resize is one way).

I would like it to have a resize event, because I'm implementing custom scroll bars. It's hard to go through existing code, checking each possible place the content of all of my containers get changed and calling some code to change the scrollbars.

Answer 11

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.