Javascript/Jquery: $(Window).Resize How to Fire After the Resize Is Completed

How to wait for the 'end' of 'resize' event and only then perform an action?

I had luck with the following recommendation: http://forum.jquery.com/topic/the-resizeend-event

Here's the code so you don't have to dig through his post's link & source:

var rtime;
var timeout = false;
var delta = 200;
$(window).resize(function() {
    rtime = new Date();
    if (timeout === false) {
        timeout = true;
        setTimeout(resizeend, delta);
    }
});

function resizeend() {
    if (new Date() - rtime < delta) {
        setTimeout(resizeend, delta);
    } else {
        timeout = false;
        alert('Done resizing');
    }               
}

Thanks sime.vidas for the code!

Fire resize event once on size down and once on size up

A simple solution is to use a 'flag'. In this case, I'm using a class to the html element

FIDDLE

$(window).on('resize', function() {
    if ((!$('html').hasClass('small')) && ($(window).width() < 650)) {
        $('#output').text('small');
        $('html').addClass('small').removeClass('large');
    }
    else if ((!$('html').hasClass('large')) && ($(window).width() > 650)) {
        $('#output').text('large');
        $('html').addClass('large').removeClass('small');
    }
});

Of course, you could keep create a variable to store the status of the page (large vs small).
This example might be more 'visually' easier to understand.

Here's an example with a variable instead of a class.

fire a function after window resize

So, I believe this is a similar scenario when a user "type" something: you can't know when the user finished to compose a sentence, the same here, you don't know when the user has finished to resize; so what you can do is have an acceptable interval:

var idt;
$(window).resize(function() {
    if (idt) clearTimeout(idt);
    idt = setTimeout(doAnim, 500);
}

You can also use a closure to avoid to pollute the global scope with idt variable.

However the main point here is that every time the user resize the window, it set a timeout and clear the previous one: the doAnim function will be executed only if the user leave the window without resizing it for half second. Of course you can set your own delay.

JQuery: How to call RESIZE event only once it's FINISHED resizing?

Here is an example using thejh's instructions

You can store a reference id to any setInterval or setTimeout. Like this:

var loop = setInterval(func, 30);

// some time later clear the interval
clearInterval(loop);

Fire Function on Window Resize

For an element to resize so it fits the content, the style overflow : auto has to be set, otherwise the element just keeps it's size and the content overflows.

Also, when you explicitly set the outerHeight, the elements stops auto-resizing to fit the content, the default height of auto has to be applied to trick it into resizing before the elements heights are compared

var equalize = function() {
    var max = Math.max.apply(null, 
                $('.equalize').css('height', 'auto').map(function() {
                    return $(this).outerHeight();
                })
              );
    $('.equalize').outerHeight(max);
};

jQuery(document).ready(function($) {
    $(window).resize(function() {
        equalize();
    }).trigger('resize');
});

div{
  display: inline-block;
  position: relative;
  width: 50%;
  float: left;
  background: yellow;
}

.other{
  background: salmon;
  overflow:auto;
}

FIDDLE

window.resize in jQuery firing multiple times

You got it, some browsers fire on resize start and again on end while others like FF fire continuously. Solution is to use setTimeout to avoid firing all the time. An example can be found here. Here is the code from the same reference:

(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...
});

How to Fire Resize event after all images resize

The <img> HTML Element has an onload callback. It fires when the image data has finished downloading from its source. Utilise this to make note of when an image is loaded. Count the load events and call setElementHeight once all your images are loaded.

An example could look like the below:

var sources = ['img/a.jpg', 'img/b.jpg', 'img/c.jpg'],
    loaded = 0;

for (var idx in sources) {
  var img = document.createElement('img');
  img.onload = function() {
    loaded++;
    if(loaded === sources.length) {
      setElementHeight();
    }
  }
  img.src = sources[idx];
}

jQuery on window resize

Here's an example using jQuery, javascript and css to handle resize events.

(css if your best bet if you're just stylizing things on resize (media queries))

http://jsfiddle.net/CoryDanielson/LAF4G/

css

.footer 
{
    /* default styles applied first */
}

@media screen and (min-height: 820px) /* height >= 820 px */
{
    .footer {
        position: absolute;
        bottom: 3px;
        left: 0px;
        /* more styles */
    }
}

javascript

window.onresize = function() {
    if (window.innerHeight >= 820) { /* ... */ }
    if (window.innerWidth <= 1280) {  /* ... */ }
}

jQuery

$(window).on('resize', function(){
    var win = $(this); //this = window
    if (win.height() >= 820) { /* ... */ }
    if (win.width() >= 1280) { /* ... */ }
});

How do I stop my resize code from executing so often!?

This is the first problem you'll notice when binding to resize. The resize code gets called a LOT when the user is resizing the browser manually, and can feel pretty janky.

To limit how often your resize code is called, you can use the debounce or throttle methods from the underscore & lodash libraries.

• debounce will only execute your resize code X number of milliseconds after the LAST resize event. This is ideal when you only want to call your resize code once, after the user is done resizing the browser. It's good for updating graphs, charts and layouts that may be expensive to update every single resize event.
• throttle will only execute your resize code every X number of milliseconds. It "throttles" how often the code is called. This isn't used as often with resize events, but it's worth being aware of.

If you don't have underscore or lodash, you can implement a similar solution yourself:
JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

---

Related Topics