Cross-Browser Window Resize Event - JavaScript / jQuery

Question

What is the correct (modern) method for tapping into the window resize event that works in Firefox, WebKit, and IE?

and can you turn both scrollbars on/off?

Answer 1

Since you are open to jQuery, this plugin seems to do the trick.

Answer 2

$(window).bind('resize', function () {

alert('resize');

});

Answer 3

jQuery has a built-in method for this:

$(window).resize(function () { /* do something */ });

For the sake of UI responsiveness, you might consider using a setTimeout to call your code only after some number of milliseconds, as shown in the following example, inspired by this:

function doSomething() {
    alert("I'm done resizing for the moment");
};

var resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doSomething, 100);
});

Answer 4

You can use resizeMyBrowser. Hope this helps. http://resizeMyBrowser.com

Answer 5

Does anyone have a clue on how I could do this from within an iFrame? I tried for example setting:

$(window.top).bind('resize', function () { alert('hi'); });

I have also tried with top.document and other combinations, but none of them seems to work... The problem is that $(window) refers to the iframe and not the browser window.

Does anyone have a solution for this?