New Perspectives On Web Design

By Aaron Gustafson CHAPTER 7

clearTimeout( resizing );
resizing = null;
// run the callback
callback();
}
// track the resize event
window.onresize = function(){
// if we are currently resizing, clear the timeout
if ( resizing )
{
clearTimeout( resizing );
resizing = null;
}
// set the done function to execute when the resize completes
resizing = setTimeout( done, 50 );
};

// run the callback once
callback();
};

With a function like watchResize, it becomes easy to track changes in
browser size so we can update the interface in ways CSS alone can’t.
To introduce this more dynamic functionality to the earlier script, we
would start by moving the browser_size variable to the global scope so it
is available to any other adaptive UI scripts we might want to write. We’ll
update it in real time using watchResize:

// watch browser width on resize
var browser_width = 0;
window.watchResize(function(){
browser_width = window.innerWidth ||
document.body.offsetWidth;
});

With browser_width being updated live, we can revisit the original script and
make it more adaptive by having it check the width as orientation changes: