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 Internet Explorer?

And can you turn both scrollbars on/off?

Solution 1

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);
});

Solution 2

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

    alert('resize');

});

Solution 3

Here is the non-jQuery way of tapping into the resize event:

window.addEventListener('resize', function(event){
  // do stuff here
});

It works on all modern browsers. It does not throttle anything for you. Here is an example of it in action.

Solution 4

Sorry to bring up an old thread, but if someone doesn't want to use jQuery you can use this:

function foo(){....};
window.onresize=foo;

Solution 5

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

View more solutions

Comments

[Byff]

I'm also looking into this. I'd like to try to apply the solutions offered here, but I'm afraid I don't understand the syntax: $(window). Is that something specific to jquery?

[Harshit Shah]

Byff, yes, $(window) is a jQuery construct. window.onresize is the equivalent in raw JavaScript.

[Subodh Ghulaxe]

This demo may help anybody to test on all browsers jsfiddle.net/subodhghulaxe/bHQV5/2

[Dylan Valade]

window.dispatchEvent(new Event('resize')); stackoverflow.com/questions/1818474/…

[psur]

On Opera on mobile it is triggered each time top bar (browser UI) is showing/hiding.

[Sly]

Why this event is not fired when window is expanded to full screen with button?

[Mike Kormendy]

I prefer the bind approach, since the resize() method is actually actually a shortcut for the full bind approach, and I often find that there is usually more than one event handler I should be applying to an element.

[Mark Vital]

@Sly For me it works,in Safari, Chrome and Mozilla on Mac. Which browser do you use?

[Zack Zatkin-Gold]

@Sly: $('.button').on({ click: function(){ /* your code */ $(window).trigger('resize') })

[Elijah Lynn]

Also of note is that if you call a named function just type the name, don't quote it or put parentheses if there are no arguments to pass to it.)

[Yoh Suzuki]

Elijah, this is JavaScript. What you wrote is not correct (except for one specific case when you are constructing with new).

[Dan]

Considering most need the optimized version for UI responsiveness, it would be nice if jQuery added a second parameter, being a delay (in millis) which would automatically add the 'responsiveness' logic as proposed above.

[Shane]

@Mike - Not only that, but I'm guessing the resize method has no "unbind" method in the event you want to remove the listener. "bind" is definitely the way to go!

[Tom Auger]

Just be aware that this will clobber any existing handlers that may be bound to window.onresize. If your script has to live an an ecosystem with other scripts, you shouldn't assume your script is the only one to want to do something on window resize. If you can't use a framework such as jQuery, you should at least consider grabbing the existing window.onresize, and adding your handler to the end of it, rather than completely clobbering it.

[Tomas]

@TomAuger "you should at least consider grabbing the existing window.onresize, and adding your handler to the end of it" - you probably meant the opposite, i.e. "to call existing handler at the end of your handler"? I would really like to see a javascript code that would add something to the end of already existing function :-)

[Tom Auger]

I see your point, in a sense - your new onResize handler needs to wrap the existing onResize. However, it doesn't have to call the function you wanted to add to onResize until after it has called the original onResize handler. So you can still make sure your new onResize function executes after the original onResize function, which is probably better than the reverse.

[Jondlm]

See my answer below if you don't want to use jQuery.

[WraithKenny]

There's two changes. Which one had the effect? (.resize() to .bind('resize') or adding the anonymous function? I'm thinking it's the second.)

[bassim]

@WraithKenny Good point. It very well may be that adding the anonymous function was what made it work. I don't recall if I tried it.

[Alexandru Trandafir Catalin]

I had a issue in Firefox saying that $ is not defined when the resize event was fired. I've put my resize function inside a setTimeout and it worked now!

[RTF]

It's worth mentioning that this jQuery function "adds" a function call to the current list of functions that should be called on a window resize. It does not overwrite existing events that are currently scheduled on a window resize.

[Sergey]

this solution wouldn't be working in IE. Fixed version with support of IE dom: stackoverflow.com/questions/6927637/…

[josinalvo]

> It does not throttle anything for you. Could you please elaborate? What should/would it throttle? Does it relate to the event firing many times in a row?

[Jondlm]

@josinalvo generally when you're listening to an event that fires a lot you'll want to debounce (e.g. lodash) it so you don't cause a bottleneck in your program.

[Henry Blyth]

In the first case, the adjustSize method loses its context of this, whereas the second call CmsContent.adjustSize() preserves this, i.e. this === CmsContent. If the CmsContent instance is required in the adjustSize method, then the first case will fail. Second case will work for every kind of function call, so it's recommended to always pass an anonymous function.

[bassim]

@HenryBlyth Thank you! +1