WEB STANDARDS CREATIVITY

220
return document.documentElement.clientWidth;
}
else if (document.body)
{
return document.body.clientWidth;
}
return 0;
};
There are actually a few ways of determining the width of the browser window, depending on which browser you’re using,
and each of the conditions in getBrowserWidth() matches one of these. Firefox, Mozilla, Safari, and Opera use
window.innerWidth. Internet Explorer 6 and 7 use document.documentElement.clientWidth.
In a rather strange quirk that document.documentElement.clientWidth exists in Internet Explorer 5 and 5.5, but it is always
set to 0, so we have to check for this and default to document.body.clientWidth if that’s the case. The only problem with
this is that the body element must exist before Internet Explorer 5.x can figure out the browser window width, so we have to
reschedule the call to getBrowserWidth() once the page has been loaded. This is done in the first condition inside check-
BrowserWidth(). If getBrowserWidth() returns 0, it means that the browser is probably Internet Explorer 5.x, so we create
a new load event listener and wait for the page to load before doing any style sheet switching.
addLoadListener() is a generic page load event handler that abstracts around some of the differences in browser event
handling:
function addLoadListener(fn)
{
if (typeof window.addEventListener != 'undefined')
{
window.addEventListener('load', fn, false);
}
else if (typeof document.addEventListener != 'undefined')
{
document.addEventListener('load', fn, false);
}
else if (typeof window.attachEvent != 'undefined')
{
window.attachEvent('onload', fn);
}
else
{
return false;
}
return true;
};
This and another abstracted event handler are included in event_listeners.js, because you’ll probably use them regularly
on other projects.