JQuery resizing does not work in FireFox, Chrome and Safari

Question

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

or

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

Questions

• Why does this not work in FireFox, Chrome and Safari?
• Could this be considered a jQuery bug since resizing is not handled for other browsers?
• Can a single workaround call the SetTimeout function that checks clientHeight and clientWidth?
• Any ways to work around using jQuery?

Answer 1

I believe that the JavaScript resize event applies only to frames or windows, and not to the DIV.

eg. see this page :

The onResize parity handler is used to execute the specified code whenever the user or script resizes the 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 determine when a window is resized, in jQuery you should probably use $(window).resize(function() { });

Edit: if you want to see the size of the DIV, it depends on your intention. If you resize using JavaScript, you can implement a method to perform resizing and have this handle that invokes any other resize code.

Otherwise, if you just watch the DIV resize when someone resizes the window, won't it just work to attach the resize listener to the window and then check if the DIV has been resized (e.g. keep the old value width / height and check them when resizing)?

Finally, you can use the watch’s width / height properties, although I don’t know if this is a full browser (I think it can only be Mozilla). I found this jQuery plugin that looks like it can do the same thing (albeit with some minor changes).

Answer 2

There is a benalman plugin for this :)

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 to resize a div that contains a flash object based on the height returned from the flash file, and it seems to be good for me.

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

jQuery equivalent should be:

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

Resizing is only like a Windows object.

Answer 4

This is not a question. WHY? This requirement, as in the case, we want to control the DIV when it changes.

For an obvious example, the jQuery UI is resizable. Yes, the user resized the div with the mouse, now what? Perhaps the content inside is changing, and we want to know about it. And should we have all the code in the giant melting pot in the source code for scrolling? I do not think so.

Another quick browser that does nothing sighs.

Answer 5

Why do you expect resizing #dvMyDIV? Perhaps the resizing of this element is the result of something else, perhaps resizing the window? If yes, try

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

Answer 6

I could suggest something like this:

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

2) when performing any operation, it directly or implicitly resizes this div (which, I believe, is a javascript-driven event), check the new width to the old one and update the global value with the new width.

Answer 7

Here is a much more sophisticated and lively example that does a lot of math resizing based on the window resize event. Works brilliantly in ff 3.6, safari 4.0.4 and chrome. It is a little short at 3.5. Thus, it should work in mozilla and webkit through boards. I avoid another BROWSER because I really don't like it and the code is so cleaner without having to look at it. I understand that I will have to overcome this, I swallowed it when I need it, and IE premium.

ANYWAY link:

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

Answer 8

Everything works fine with MSIE. With Firefox, I think you will have to resort to some oblique methods, such as preserving the original width / height of the element in user properties and using $(elem).bind('DOMAttrModified', func) . Then, in the func () callback, check if the new width / height differs from the values ​​you previously saved, resize accordingly and save them again for later callback. Please note that this approach only works for Firefox. I have not yet been able to find a suitable solution for Chrome, Safari and Opera. Maybe using window.setInterval () will do it, but ... it sounds too slopy ... an event that thinks about it makes me curious :(