JavaScript window resize event

Question

How can I hook into a browser window resize event   There s a jQuery way of listening for resize events but I would prefer not to bring it into my project for just this one requirement

User · Answer

The resize event should never be used directly as it is fired continuously as we resize.

Use a debounce function to mitigate the excess calls.

window.addEventListener('resize',debounce(handler, delay, immediate),false);

Here's a common debounce floating around the net, though do look for more advanced ones as featuerd in lodash.

const debounce = (func, wait, immediate) => {
    var timeout;
    return () => {
        const context = this, args = arguments;
        const later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        const callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

This can be used like so...

window.addEventListener('resize', debounce(() => console.log('hello'),
200, false), false);

It will never fire more than once every 200ms.

For mobile orientation changes use:

window.addEventListener('orientationchange', () => console.log('hello'), false);

Here's a small library I put together to take care of this neatly.

User · Answer

Thanks for referencing my blog post at http   mbccs blogspot com 2007 11 fixing-window-resize-event-in-ie html   While you can just hook up to the standard window resize event  you ll find that in IE  the event is fired once for every X and once for every Y axis movement  resulting in a ton of events being fired which might have a performance impact on your site if rendering is an intensive task   My method involves a short timeout that gets cancelled on subsequent events so that the event doesn t get bubbled up to your code until the user has finished resizing the window

User · Answer

I do believe that the correct answer has already been provided by  Alex V  yet the answer does require some modernization as it is over five years old now   There are two main issues    Never use object as a parameter name  It is a reservered word  With this being said   Alex V s provided function will not work in strict mode  The addEvent function provided by  Alex V does not return the event object if the addEventListener method is used  Another parameter should be added to the addEvent function to allow for this    NOTE  The new parameter to addEvent has been made optional so that migrating to this new function version will not break any previous calls to this function  All legacy uses will be supported   Here is the updated addEvent function with these changes          function  addEvent       param  obj          Object  Required           -   The object which you wish             to attach your event to        param  type         String  Required           -   The type of event you             wish to establish        param  callback     Function  Required           -   The method you wish             to be called by your             event listener        param  eventReturn  Boolean  Optional           -   Whether you want the             event object returned             to your callback method     var addEvent   function obj  type  callback  eventReturn        if obj    null    typeof obj      undefined           return       if obj addEventListener          obj addEventListener type  callback  eventReturn   true   false       else if obj attachEvent          obj attachEvent  on    type  callback       else         obj  on    type    callback       An example call to the new addEvent function   var watch   function evt                   Older browser versions may return evt srcElement         Newer browser versions should return evt currentTarget            var dimensions             height   evt srcElement    evt currentTarget  innerHeight          width   evt srcElement    evt currentTarget  innerWidth            addEvent window   resize   watch  true

User · Answer

Solution for 2018   You should use ResizeObserver  It is a browser-native solution that has a much better performance than to use the resize event  In addition  it not only supports the event on the document but also on arbitrary elements   var ro   new ResizeObserver  entries   gt      for  let entry of entries        const cr   entry contentRect      console log  Element    entry target       console log  Element size    cr width px x   cr height px        console log  Element padding    cr top px     cr left px                Observe one or multiple elements ro observe someElement     Currently  Firefox  Chrome  Safari  and Edge support it  For other  and older  browsers you have to use a polyfill

User · Answer

jQuery is just wrapping the standard resize DOM event  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

User · Answer

window onresize   function            your code

User · Answer

var EM   new events managment     EM addEvent window   resize   function win doc  event        console log  resized          EM removeEvent win doc  event         function events managment        this events           this addEvent   function node  event   func           if node addEventListener               if event  in this events                   node addEventListener event   function                        func node  event                        this events event   win doc  event                       true                else                  node addEventListener event   function                        func node  event                       true                             this events event     func           else if node attachEvent                var ie event    on    event               if ie event in this events                   node attachEvent ie event  function                        func node  ie event                       this events ie event                                      else                  node attachEvent ie event  function                        func node  ie event                                                 this events ie event    func                      this removeEvent   function node  event            if node removeEventListener               node removeEventListener event   this events event    true               this events event     null              delete this events event             else if node detachEvent               node detachEvent event   this events event                 this events event     null              delete this events event

User · Answer

Never override the window onresize function   Instead  create a function to add an Event Listener to the object or element  This checks and incase the listeners don t work  then it overrides the object s function as a last resort  This is the preferred method used in libraries such as jQuery   object  the element or window object type  resize  scroll  event type  callback  the function reference  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             Then use is like this   addEvent window   resize   function reference     or with an anonymous function   addEvent window   resize   function event      console log  resized

User · Answer

You can use following approach which is ok for small projects  lt body onresize  quot yourHandler event  quot  gt    x000D   x000D  function yourHandler e      console log  Resized    e target innerWidth    x000D   lt body onresize  yourHandler event   gt    Content     resize browser to see   lt  body gt  x000D   x000D   x000D

User · Answer

The following blog post may be useful to you  Fixing the window resize event in IE  It provides this code    Sys Application add load function sender  args         addHandler window   resize   window resize        var resizeTimeoutId   function window resize e         window clearTimeout resizeTimeoutId        resizeTimeoutId   window setTimeout  doResizeCode      10

User · Answer

First off  I know the addEventListener method has been mentioned in the comments above  but I didn t see any code  Since it s the preferred approach  here it is   window addEventListener  resize   function event        do stuff here       Here s a working sample

User · Answer

The already mentioned solutions above will work if all you want to do is resize the window and window only  However  if you want to have the resize propagated to child elements  you will need to propagate the event yourself  Here s some example code to do it   window addEventListener  resize   function        var recResizeElement   function  root        Array prototype forEach call root childNodes  function  el           var resizeEvent   document createEvent  HTMLEvents          resizeEvent initEvent  resize   false  true         var propagate   el dispatchEvent resizeEvent          if  propagate          recResizeElement el                  recResizeElement document body         Note that a child element can call   event preventDefault      on the event object that is passed in as the first Arg of the resize event  For example   var child1   document getElementById  child1    child1 addEventListener  resize   function  event            event preventDefault

User · Answer

lt script language  javascript  gt      window onresize   function         document getElementById  ctl00 ContentPlaceHolder1 Accordion1   style height    100         lt  script gt

[javascript] JavaScript window resize event

Examples related to javascript

Examples related to window-resize