Done Resizing Event | CSS-Tricks

If you’re used to something like jQuery UI resizeable, you get events you can bind to during the resizing, but also at the end of resizing.

No such event exists in native JavaScript.

You can fake it by setting a timeout to run the code you want to run when resizing stops. Then clear that timeout every time a resize event fires. That way the timeout will only finish if that timeout actually finishes.

var resizeTimer;

$(window).on('resize', function(e) {

  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {

    // Run code here, resizing has "stopped"
            
  }, 250);

});

Similar to debouncing.

Comments

Jose Luis Quintana

# October 6, 2014

Yeah !
I know about this fallback in resize window.
Very appreciated your trick !

zzzzBov

# October 6, 2014

This technique is called “debouncing”. If you happen to be using underscore, the code is quite simple:

$(window).on('resize', _.debounce(function () {
    // Run code here, debounce delay has passed
}, 250));

David Walsh wrote up a reasonable overview of how this works.

Chris Coyier

Permalink to comment# October 6, 2014

I mentioned that it’s similar to debouncing at the end of the article. But it’s not quite the same. Debouncing will run it every (whatever) seconds no matter what, slightly different than “wait until you’re done”.

Loading...
zzzzBov

Permalink to comment# March 23, 2016

Debouncing will run it every (whatever) seconds no matter what

You’re thinking of throttling, which will call the function once every (whatever) seconds. Debouncing will either run once at the beginning or end of the series of calls, so long as they happen within (whatever) seconds, but you already knew that.

Loading...

Matt

# October 7, 2014

Hi Chris

I use a trick like this at work with one small difference: instead of executing code inline, we fire a second event (I call mine ‘calmresize’). This way, we attach just one resize handler across the site and modules can listen to the calmresize event instead.

The code:

var FIRE_AFTER = 200, // in ms
        CALM_RESIZE_EVENT = 'calmresize',
        resizeTimeout,
        CalmResize = function () {
            this.bindEvents();
        };

    CalmResize.prototype = {

        bindEvents: function () {
            var $window = $('window');

            $window.on('resize.calm', function () {
                clearTimeout(resizeTimeout);

                resizeTimeout = setTimeout(function () {
                    $window.trigger(CALM_RESIZE_EVENT);
                }, FIRE_AFTER);
            });
        }

    };

    new CalmResize();

Hope this helps someone. Thanks for all the code snippets Chris – you’ve dug me out many a hole!

Matt

Permalink to comment# October 7, 2014

Sorry, should be $(window)

Loading...
Sebastian

Permalink to comment# October 16, 2014

Hey Matt,
I like your snippet and would like to integrate it in a jQuery plugin. Is that OK for you and how should i credit?

Regards,
Sebastian

Loading...
mrself

Permalink to comment# October 11, 2015

What is the purpose of using prototype here?

Loading...

Matt

# October 17, 2014

Hey Sebastian, glad you found it useful. If you could credit to Matt Perry and PaperShaker uk.paper-shaker.com that’d be excellent.

Thanks

Matt

fcw

# March 8, 2015

i think i found a quite simple solution. it also works for scroll-events, …

$(window).on('resize', function(e)
{
    // do stuff here
    console.log(!e.isTrigger ? ' resize' : ' triggerd');

    if (!e.isTrigger)
    {
        clearTimeout(this._timer);
        this._timer = setTimeout(function(){ $(window).trigger('resize'); }, 250);
    }
});

This is useful, if you want to trigger the same resize-function after resizing (if you resize very quickly sometimes values don’t update)

Matt

# March 21, 2015

I’ve published a resizeend event emitter on NPM:

https://www.npmjs.com/package/resize-end

Ken Swarthout

# June 30, 2015

I’m new to web page development and I’m having some trouble with some code I’m working on. I need to change a CSS property (I think that’s what it’s called) on the end of a window resize (or I could do it at the beginning I guess). It’s the left property. I have a class called sections and I need to set left: to 0;. I’ve been trying code like this and haven’t had much look with it working. I’ll try this come tomorrow, but I have a quick question. Do I need anything for this code to work? Or do I just have to include jQuery? The other examples I’ve seen just don’t seem to work at all. And I know you said these functions don’t exist in native Javascript but you can fake it using your code…is your code jQuery or is it Javascript? I was under the impression they’re two different things. I thought jQuery was written in Javascript but wasn’t in fact Javascript. It was something different. I’m just a bit confused.

Ken Swarthout

# July 1, 2015

Just wanted to thank you for writing a great article. I have successfully incorporated it into my website and it works now. Thank you.

JEYAKUMAR DEVARAJULU

# February 3, 2016

Nice one, it saved my productivity hours…

Csaba Tuncsik

# March 10, 2016

(function ($) {
    var timer = null;
    $(window).bind('resize.resizeEnd', function () {
        if (timer) {
            clearInterval(timer);
        }
        timer = setInterval(function () {
            clearInterval(timer);
            $(window).trigger('resizeEnd');
        }, 250);
    });
})(jQuery);

james

# March 10, 2016

For css3 Transition

$(‘.target’).on(‘webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend’, _.debounce(function () {
console.log(‘Your Code here’)
}, 250));

David

# May 24, 2016

The best solution is here:
http://stackoverflow.com/questions/5489946/jquery-how-to-wait-for-the-end-of-resize-event-and-only-then-perform-an-ac/27923937#27923937

Luca

# September 26, 2016

it’s very elegant and effective. Just wonderful

John

# March 10, 2017

Thanks for this!

Kamil Naja

# August 6, 2017

Works very well! Thank you!

Dylan

# December 5, 2017

I noticed that this method isn’t always reliable in terms of ‘catching’ the end of a user’s resizing. I have a method that uses the viewport width in order to add or take away columns from a feed of items, and I find that by using this method to debounce it, it sometimes doesn’t ‘catch’ the final viewport width when the user has finished resizing the screen. Not sure if this has to do with the timeout negating the final window state but it seems to not be technically reliable.

Emilio

# January 22, 2019

Chris, I just worked on a site that I couldn’t use lodash on, just jQuery and this is perfect and simple. You’ve thought through so many awesome useful things on the good ol’ CSS-Tricks. I can always trust you!

Comments

Leave a Reply Cancel reply