WEB STANDARDS CREATIVITY

You’ve probably guessed that we’re going to take the third route, since that’s what resolution-dependent layout is all about.
The way to do this is to use some JavaScript that detects the window size as the page is loading and applies the wider style
sheet if it will fit. If JavaScript happens to be turned off, the page won’t explode. Instead, the user will get the basic style
sheet, which if you’ve designed it properly, should still be perfectly usable. Just consider the alternate layout a bonus for
people with larger screens and JavaScript turned on (which is a pretty hefty chunk of users).
The JavaScript should be placed after the style sheet declarations in the HTML:
This is important, because the JavaScript is going to run immediately and try to work on the style sheets, so if they haven’t
been included yet, you’ll have problems.
The first thing to do inside resolution.js is to check the size of the browser window:
checkBrowserWidth();
function checkBrowserWidth()
{
var theWidth = getBrowserWidth();
if (theWidth == 0)
{
addLoadListener(checkBrowserWidth);
return false;
}
if (theWidth >= 960)
{
setStylesheet("Wide");
}
else
{
setStylesheet("");
}
return true;
};
checkBrowserWidth() begins by getting the width of the browser using getBrowserWidth():
function getBrowserWidth()
{
if (window.innerWidth)
{
return window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth != 0)
{
chapter 9 Creating Dynamic Interfaces Using JavaScript
219