Detect when a window is resized using JavaScript

Question

Is there any way with jQuery or JavaScript to trigger a function when the user ends to resize the browser window   In other terms    Can I detect mouse up event when user is resizing the browser window  Otherwise  Can I detect when a window resize operation is finished    I m currently only able to trigger an event when the user start to resize the window with jQuery

User · Answer

Another way of doing this  using only JavaScript  would be this   window addEventListener  resize   functionName     This fires every time the size changes  like the other answer   functionName is the name of the function being executed when the window is resized  the brackets on the end aren t necessary

User · Answer

This can be achieved with the onresize property of the GlobalEventHandlers interface in JavaScript  by assigning a function to the onresize property  like so   window onresize   functionRef   The following code snippet demonstrates this  by console logging the innerWidth and innerHeight of the window whenever it s resized   The resize event fires after the window has been resized     x000D   x000D  function resize     x000D    console log  height     window innerHeight   px    x000D    console log  width     window innerWidth   px    x000D    x000D   x000D  window onresize   resize  x000D   lt p gt In order for this code snippet to work as intended  you will need to either shrink your browser window down to the size of this code snippet  or fullscreen this code snippet and resize from there  lt  p gt  x000D   x000D   x000D

User · Answer

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

User · Answer

If You want to check only when scroll ended  in Vanilla JS  You can come up with a solution like this   Super Super compact  var t window onresize        gt    clearTimeout t  t   setTimeout      gt    resEnded      500    function resEnded     console log  ended       All 3 possible combinations together  ES6   var t window onresize        gt        resizing this  this innerWidth  this innerHeight    1     if  typeof t     undefined   resStarted     2     clearTimeout t   t   setTimeout      gt    t   undefined  resEnded      500    3    function resizing target  w  h        console log  Youre resizing  width   w  height   h          function resStarted          console log  Resize Started      function resEnded          console log  Resize Ended

[javascript] Detect when a window is resized using JavaScript ?

Examples related to javascript

Examples related to jquery