Detect When a Window Is Resized Using JavaScript

JavaScript window resize event

Best practice is to add to the resize event, rather than replace it:

window.addEventListener('resize', function(event) {
    ...
}, true);

An alternative is to make a single handler for the DOM event (but can only have one), eg.

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

jQuery may do some work to ensure that the resize event gets fired consistently in all browsers, but I'm not sure if any of the browsers differ, but I'd encourage you to test in Firefox, Safari, and IE.

Detect when a window is resized using JavaScript ?

You can use .resize() to get every time the width/height actually changes, like this:

$(window).resize(function() {
  //resize just happened, pixels changed
});

You can view a working demo here, it takes the new height/width values and updates them in the page for you to see. Remember the event doesn't really start or end, it just "happens" when a resize occurs...there's nothing to say another one won't happen.

---

Edit: By comments it seems you want something like a "on-end" event, the solution you found does this, with a few exceptions (you can't distinguish between a mouse-up and a pause in a cross-browser way, the same for an end vs a pause). You can create that event though, to make it a bit cleaner, like this:

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

You could have this is a base file somewhere, whatever you want to do...then you can bind to that new resizeEnd event you're triggering, like this:

$(window).bind('resizeEnd', function() {
    //do something, window hasn't changed size in 500ms
});

You can see a working demo of this approach here
​

Detect when browser window has been resized from certain size to a larger size?

I'll assume for the sake of this question that you mean 641px as the width, but I left the innerHeight variable there, too, in case you need it:

// Closure last-height/width
var lastX = window.innerWidth
var lastY = window.innerHeight

function fooOnResize() {
   var x = window.innerWidth
   var y = window.innerHeight
   if (lastX <= 641 && 641 < x) {
      $(".foo").removeClass("bar")
   }
   lastX = x
   lastY = y
}

window.addEventListener("resize", fooOnResize)
// Also okay: window.onresize = fooOnResize

The trick is to basically hold the last size in some closure variables, then on resize, you can make your comparison. After you have done the comparison and the work, you store the current x/y as the last ones, for the next resize.

How to detect window width changes without resizing

You can detect both events and just execute code when it's a width change:

var width = $(window).width();
$(window).resize(function(){
   if($(this).width() != width){
      width = $(this).width();
       console.log(width);
   }
});

How to detect window resize and then change the javascript file being added to the header?

Here is what I use:

$(window).bind('resize', function(event) {      
//Whatever you want to run here     

});

Just set a variable for you window width and height and check what they are at inside of this function.

As for changing your javascript file when the screen is resized with out reloading the whole page... I don't think that is possible. A work around might be to import all the javascript files into one file and just run different functions that overwrite any changes that the last javascript function made.

This obviously uses jQuery though.

How to detect window resize event using ResizeObserver

You can observe document.body.

new ResizeObserver(() => {
  console.log('resized')
}).observe(document.body)

How to detect user window resize vs window.resizeTo

There is .resize(). But I don't see a change to get a native information from the browser if the window was resized by the user. But I could think of a solution where you set a flag when your function resizes the window* and then do nothing inside .resize(). But if .resize() is fired but your flag was not set, It was triggered by the user.

* = also remove the flag after your resize code ran.

---

Related Topics