The problem that a few people noted on the Rosenfeld Media site was that Dave had changed the script to fire once the page loaded, so you'd get the usual flickering effect as the browser displayed content on arrival, then the script would fire some seconds later (accounting for images, etc.)

In the original version this was gotten around by initialising the script at the very end of the <body> – not terribly unobtrusive, and annoying to maintain (ahhhh ... 2004, how long ago you were).

The new version of the resolution dependent layout script counteracts this by executing before any of the content has arrived. This is possible because for most browsers all the script has to do is check the browser width, then change the stylesheets accordingly; it doesn't have to interact with any of the content at all. If the script is placed after the stylesheets – in the <head> – then all is dandy, you'll get zero flicker.

The exceptions are Internet Explorer for Windows 5 & 5.5. They can't actually tell you the width of the browser, so you have to measure the width of the <body>. Unfortunately, that doesn't exist until the entire <body> has been downloaded. So, for those browsers we revert to the page load event. BUT! To sweeten the deal, we set a cookie everytime that the browser's width is calculated. As poor IE 5/5.5 users move around your site, each successive page can check the cookie value instead of waiting for the page to load. So the only time they get flicker is the first time they come to your site.

The page load and window resize event handlers now also use standard event listeners, so this script won't interfere with any other scripts that you might be running on your page at the same time.

7/20

I have been using that site's version since my site relaunch earlier this month. I even added cookies to it then, but I still saw the flicker on my site on IE6 (Win XP SP2) and just left it in. I modified my version so that it's now using the article's implementation (though my event handling and variable names are slightly different), and still see the flicker. :(

When looking at the author's site it's flawless, so I blame my abundance of scripts / WordPress / my WordPress theme.

9/20

10/20

That should work too, but the longer code is more clear and easier to understand for the "maintenance coder". Also, Internet Explorer 6 doesn't Do The Right Thing in my testing. Using IE's Dev Toolbar it does still set the value to disabled correctly, but for some reason it didn't load the linked stylesheet (I have NO idea why this happens). Throwing a parenthesis around the logic test didn't help either. It works in Firefox 1.5.

The Man in Blue:

What he is saying is that your code initializes the value to true, compares the title attribute to styleTitle, and if that is true then it sets the value to false. One comparison and two assignments.

Splintor noticed that the value of currTag.disabled is dependent on the evaluation of the logic test. He noticed that currTag.disabled is true when the title attribute does not equal styleTitle, and it is false when it is. Based off of JavaScript's operator precedence, (currTag.getAttribute("title") != styleTitle) will be evaluated, and then assigned to currTag.disabled. One comparison and one assignment. It's marginally more efficient, but harder to read and understand.

17/20

18/20

coolin' commented on 29 January 2006 @ 23:29

I tried using something like this before and found that some people actually prefer being able to choose the resolution to use, rather than to let a script choose. Although some people browse at very high resolutions these days, not all of them browse at fullscreen. Just some thoughts.

19/20

<blockquote>The exceptions are Internet Explorer for Windows 5 & 5.5. They can't actually tell you the width of the browser, so you have to measure the width of the <body>. Unfortunately, that doesn't exist until the entire <body> has been downloaded.</blockquote>

This is actually not true. You can get the width of the browser window in IE5/5.5 before the entire body element has been loaded but your script must be linked and executed after the opening body tag (even right after it will do).

Popular Entries

My Book: Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

About this site

The Man in Blue is the alter ego of Cameron Adams, a Web Technologist in MelbourneSydney, Australia. (That means he does graphic design, HTML/CSS, JavaScript, writing, server-side jiggery pokery, and anything else that takes his fancy that day.)

Cameron has been designing graphical/informational/software things on and off the Web since 1997. You can see more of Cameron's design work on his portfolio, and if you're interested his services are available for hire.