5465 posts The Dude Abides
  • Became a Top 20 Author of the Month
  • Had an item that was trending
  • Had an item that became a weekly top seller
  • Located in United States
+13 more

If you’ve ever used this:


... you probably know about spastic resizing.

And for spastic browsers (Mac) this is great, but for browsers that aren’t spastic (Windows) it just isn’t needed. So tonight I figured out a way that satisfies both. Hope someone finds it useful.

$(document).ready(function() {

    var timer, prevW, prevH, fired, win = $(window);

    win.on("resize", resizer);

    // this function is called every time the browser resizes
    function resizer() {

        // catch the event for the first time, call the resize function
        if(!fired) sizeIt("cj");

        // use the "debounced" method for spastic resizing
        timer = setTimeout(sizeIt, 100);


    // the actual resizing happens here
    function sizeIt(st) {

        var winWidth = win.width(),
        winHeight = win.height();

        // at the end of the function we store the windows width and height,
        // if we get the same exact values twice in a row, there's no need to continue
        // on a non-spastic browser, this will ensure that the actual resizing only happens once
        if(prevW === winWidth && prevH === winHeight) return;


        // DO RESIZE STUFF HERE        


        prevW = winWidth;
        prevH = winHeight;
        fired = st === "cj";



The Benefit: Never a delay for resizing on a non-spastic browser, and resizing only happens once.
The Sacrifice: Content resizing will always happen twice (but only twice) on a spastic browser.

235 posts
  • Located in United States
  • Member of the Envato Team
  • Made it to the Authors' Hall of Fame
  • Had an item featured on Envato Market
+14 more
Envato team

Thanks for posting this, can’t wait to test it out :)