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

User · Answer

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.

User · Answer

Besides the window resize functions mentioned it is important to understand that the resize events fire a lot if used without a deboucing the events       Paul Irish has an excellent function that debounces the resize calls a great deal  Very recommended to use  Works cross-browser  Tested it in IE8 the other day and all was fine   http   www paulirish com 2009 throttled-smartresize-jquery-event-handler   Make sure to check out the demo to see the difference   Here is the function for completeness    function   sr         debouncing function from John Hann      http   unscriptable com index php 2009 03 20 debouncing-javascript-methods    var debounce   function  func  threshold  execAsap          var timeout         return function debounced                var obj   this  args   arguments            function delayed                    if   execAsap                    func apply obj  args                 timeout   null                          if  timeout                clearTimeout timeout             else if  execAsap                func apply obj  args              timeout   setTimeout delayed  threshold    100                     smartresize    jQuery fn sr    function fn    return fn   this bind  resize   debounce fn     this trigger sr          jQuery  smartresize         usage    window  smartresize function         code that takes it easy

User · Answer

window  bind  resize   function            alert  resize

User · Answer

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

User · Answer

I think you should add further control to this       var disableRes   false      var refreshWindow   function             disableRes   false          location reload              var resizeTimer      if  disableRes    false            jQuery window  resize function                 disableRes   true              clearTimeout resizeTimer               resizeTimer   setTimeout refreshWindow  1000

User · Answer

hope it will help in jQuery  define a function first  if there is an existing function skip to next step     function someFun        use your code      browser resize use like these      window  on  resize   function          someFun       call your function

User · Answer

I consider the jQuery plugin  jQuery resize event  to be the best solution for this as it takes care of throttling the event so that it works the same across all browsers  It s similar to Andrews answer but better since you can hook the resize event to specific elements selectors as well as the entire window  It opens up new possibilities to write clean code   The plugin is available here  There are performance issues if you add a lot of listeners  but for most usage cases it s perfect

User · Answer

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

User · Answer

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

User · Answer

Using jQuery 1 9 1 I just found out that  although technically identical    this did not work in IE10  but in Firefox       did not work in IE10   function           window  resize CmsContent adjustSize         while this worked in both browsers      did work in IE10   function           window  bind  resize   function             CmsContent adjustSize                 Edit     Actually not technically identical  as noted and explained in the comments by WraithKenny and Henry Blyth

User · Answer

jQuery provides   window  resize   function by default    lt script type  text javascript  gt     function for resize of div span elements var  window      window         rightPanelData        rightPanelData         leftPanelData        leftPanelData        jQuery window resize call event  window resize function resizeScreen            console log  window is resizing            here I am resizing my div class height      rightPanelData css   height    window height   - 166         leftPanelData css    height    window height   - 236         lt  script gt

[javascript] Cross-browser window resize event - JavaScript / jQuery

Examples related to javascript

Examples related to jquery

Examples related to cross-browser

Examples related to resize