WEB STANDARDS CREATIVITY

Most browsers won’t have to go through the page load rigmarole, however. checkBrowserWidth() will receive the browser
width immediately and be able to check it. This is done through a simple conditional—we check theWidth against our predetermined
value. In our example, we use 960 as a threshold because that’s a nice, safe value for a maximized window size
at a resolution of 1024✕768 if we subtract some space for browser chrome like scrollbars. If you want your style sheet to
change at a different resolution, just change this value to whatever you need.
If the window width is greater than or equal to 960 pixels, we activate the alternate style sheet by calling setStylesheet()
with the appropriate style sheet title, in this case Wide:
function setStylesheet(styleTitle)
{
var links = document.getElementsByTagName("link");
for (var i = 0; i < links.length; i++)
{
if (links[i].getAttribute("rel") == "alternate stylesheet")
{
links[i].disabled = true;
if(links[i].getAttribute("title") == styleTitle)
{
links[i].disabled = false;
}
}
}
return true;
};
setStylesheet() takes a style sheet title and iterates through all of the link elements in the page, checking whether their
rel attribute matches alternate stylesheet. If that link is an alternate style sheet, its disabled property is set to true
(turning any unselected style sheets off), and then the title attribute is checked to see whether it is Wide. If it is a match,
disabled is set to false (turning on the style sheet).
After that loop has finished, the selected alternate style sheet will be switched on and all others turned off. The same function
is used if the browser width is not greater than our threshold. We call setStylesheet() with an empty string (""), and
this turns off all alternate style sheets because none of their titles will match.
Once all this has happened, the correct style sheet will be selected, and the page should now be displaying with the optimal
layout for the user’s browser size.
The last thing to do is to add in an event listener for when someone resizes the browser window. It’s all well and good to
detect the browser size when someone first visits a page, but if he changes the window size, we’ll want to change the layout
accordingly. To do this, we simply add an event listener for the window resize event that calls checkBrowserWidth() again:
attachEventListener(window, "resize", checkBrowserWidth, false);
Again, here I use a generic event handler (from event_listeners.js) that abstracts around some of the differences in
browser event handling:
function attachEventListener(target, eventType, functionRef, capture)
{
if (typeof target.addEventListener != "undefined")
{
target.addEventListener(eventType, functionRef, capture);
chapter 9 Creating Dynamic Interfaces Using JavaScript
221