Skip to main content

jQuery Capture Window Resize on End Event

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

Two methods to capture a resize event on a window, but how to capture the event once the user has finished resizing the window? A little trick is to use a setTimeout() with clearTimeout() and optimal duration is 250 even captures slowish window resizes smoothly. See Window resize examples for how you might use them.

Method 1

$(window).bind('resize', function(e)
 {
     //do something
});

Method 2

$(window).resize( function(e)
{
    //do something
});

Method 2 with timeout

$(window).bind('resize', function(e)
{
    window.resizeEvt;
    $(window).resize(function()
    {
        clearTimeout(window.resizeEvt);
        window.resizeEvt = setTimeout(function()
        {
            //code to do after window is resized
        }, 250);
    });
});

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn valuable skills with a practical introduction to Python programming!


Give yourself more options and write higher quality CSS with CSS Optimization Basics.