Detect window's size change

Question

I want to know when the window size change. I found this post JavaScript window resize event and it works when I resize the window, but not if I click on the fullscreen button, or if I use the shortcut "Window" + "Up" / "Window" + "Left" etc. In fact it doesn't detect if the window resize when the window pass from a size to an other size without transition

Is it possible to detect that ? Thanks

For the moment I've got :

var addEvent = function(object, type, callback) {
    if (object == null || typeof(object) == 'undefined') return;
    if (object.addEventListener) {
        object.addEventListener(type, callback, false);
    } else if (object.attachEvent) {
        object.attachEvent("on" + type, callback);
    } else {
        object["on"+type] = callback;
    }
};
let this2 = this;
addEvent(window, "resize", function(event) {
    this2.prepareAnimation();
});

Are you sure? [`resize`](https://developer.mozilla.org/en-US/docs/Web/Events/resize) should fire anytime the window dimensions change including maximizing. Please add your code to your question so that we can understand what might be going wrong. As it stands right now, your question is off topic because it is too broad and lacks enough details to make it answerable. — zero298, May 04 '18 at 15:21
Your code works Fine, i just replaced `this2.prepareAnimation();` with a `console.log()` now the problem would be that what you expecting to happen isn't happening doesn't mean the event isn't firing — Rainbow, May 04 '18 at 15:30
my guess is it has nothing to do with the resize code, but the context of `this` — epascarello, May 04 '18 at 15:30
FYI, that addEvent method is really not needed unless you are really targeting really old browsers. — epascarello, May 04 '18 at 15:35

score 1 · Answer 1 · answered May 04 '18 at 15:30

window.onresize = function () { 
    // Do stuff
}

This should trigger the function each time the browser window resizes. I have verified that this works for macOS and Windows version of Chrome, including windows maximize/minimize, "Windows Button" + "Up", etc.

score 0 · Answer 2 · answered May 04 '18 at 15:42

In real life project always use addEventListener over onEvenetName.

Basic example looks like this:

window.addEventListener("resize", function () {
console.log('Resize')
});

BUT! Resize event fires a lot, you don't want to run your event listener every the time because it is a big performance issue for the browser.

You can read more about Debouncing and Throttling here.

If you use lodash you already has these functions:

window.addEventListener("resize", _.debounce(function () {
console.log('Resize')
}), 200);

In this 2nd example the resize event only fires 200ms after the last resize event called.

score -1 · Answer 3 · answered May 04 '18 at 15:25

the only method I know for that is window.onresize, and about the keyboard shortcuts, for me it's working fine, with all the resize shortcuts that you specified, i'm just using this to see if it's working, and yes, it is, i don't know, maybe is your browser

 window.onresize=function(e){
     console.log(e);
 }

Detect window's size change

3 Answers3