jQuery resize not working at FireFox, Chrome and Safari

Question

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

or

$(\"#dvMyDIV\").resize(function(){
    alert(\"Resized\         


        

Answer 1

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 2

There is a benalman plugin for that :)

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

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

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 5

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 :(

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.