I wrote an article called “Preparing for Widescreen” for Digital-Web. Please read it!

One thing to note – the D-W staff accidentally published an outdated version of my JavaScript, so the code referenced in my article is not the same script I used in my demo. I’ve outlined the differences on below, so come back here and read the details after you get through the article.

Here’s the code from my demo:

First, determine screen width, using a conditional operator (basically a condensed if..else statement), via document.body.clientWidth (IE, Firefox) or innerWidth (Opera, Firefox, Netscape).

var screenW = (document.all) ? document.body.clientWidth : innerWidth

Next, again using a conditional operator, I set a variable to tell which stylesheet should be active. It is crucial to give this variable a name that is consistent with what each stylesheet has been named, as later it will be used within the indexOf command.

var theStyle = (screenW > 1200) ? 'huge' : (screenW > 1000) ? 'big' : 'small';

Once that variable is set, use it within a for loop that enables the correct stylesheet and disables the others.

var i, a;
for (i = 0; a = document.getElementsByTagName('link')[i]; i++) {
 if (a.getAttribute('href').indexOf(theStyle) != -1) {
   a.disabled = false;
 } else {
   a.disabled = true;
 }
}

The three previous snippets of code need to be placed into a function, which I’ve called dynamicStyle(). Once this is created, the following command is placed within the script tag (outside of the function), in order for the content to adjust when the page is loaded or when a user resizes their browser:

window.onload = window.onresize = dynamicStyle;

Same basic idea, but a slightly smoother solution.