Window Resize in JS

I will write a full article on responsive website design & JavaScript soon, but for now here’s a quick snippet! (With a little help from jQuery, naturally.)

var resizeTimeout, win = $(window);
win.bind('resize', function()
{
    if (resizeTimeout) clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(function()
    {
        var width = win.width();
        /* do responsive stuff... */
    }, 100);
});

The basic idea is that you don’t want to be hammering the window resize event because it gets fired repeatedly when a user manually resizes their browser. Instead you should use a short timeout to wait for resizing to end.

You may ask, why am I using JavaScript at all, surely pure CSS media queries are better? For most circumstances they are, but when you’re applying interactivity to a website, that experience can differ greatly depending on the screen size. My latest build involves a lot of Google Maps work but only for larger screens (an alternate — and default before JS kicks in — content design is presented to suit smaller screens). Loading in the whole Google Maps JavaScript library ignorant of usage is a heavy burden on bandwidth.

I’m using this technique to load JavaScript and other content like high-res images very late in the game. If the window never reaches the larger breakpoints no unused resources are ever wasted.

More soon!


More from me…

Read more on my blog and follow @dbushell. If you like what I do:

Why not hire me!