Page style:

A Blue Perspective: Resolution dependent layout update

Resolution dependent layout update
19 January 2006

» Change CSS layout according to browser width «

After Dave Shea ran into a spot of trouble integrating my rather experimental resolution dependent layout script of yesteryear, I thought I'd update it to make it a bit more robust.

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.

Internet Explorer 5 for Mac officially sucks, so it don't get nothing.

Comments

1/20. 20 January 2006 @ 00:20, Emil Stenström wrote:

 This will come in handy, thanks! Good to see you stay devoted to your old (2004) scripts. 

2/20. 20 January 2006 @ 00:25, Chrstian Watson wrote:

 Excellent work! This is a really useful tool.


One question: can you set the JavaScript to detect multiple resolutions? For example, if I wanted a different layout at 800, 1024, 1154, 1280px?

3/20. 20 January 2006 @ 00:31, The Man in Blue wrote:

Yeah, that's fairly easy Christian.

Inside resolution.js there's a function called checkBrowserWidth(). Down the bottom of that function there's a set of conditionals.

You can add your own ones fairly easy, to divide up different resolutions to different stylesheets.

4/20. 20 January 2006 @ 01:29, Seb Frost wrote:

You mght want to check your demo page under IE6 - the 4th column disappears and reappears every other pixel as you resize the window above 800px.

5/20. 20 January 2006 @ 01:38, The Man in Blue wrote:

No need to panic! It's under control!

Just dropped the CSS width on the columns by 0.1%.

Thanks for the heads up.

6/20. 20 January 2006 @ 08:59, Ballwalkin' Mike wrote:

Great update to an already great script.  I don't know if you had seen the following script released in November that seems very similar to this one:

http://particletree.com/features/dynamic-resolution-dependent-layouts/ 

Though I do like the idea of using cookies to store the data.  That was a most welcome addition!  I plan on using this on my next project.  thank you!

7/20. 20 January 2006 @ 18:23, Brian LePore wrote:

Mike:

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.

8/20. 22 January 2006 @ 16:45, Splintor wrote:

 Is there any reason you use:

currTag.disabled = true;    if(currTag.getAttribute("title") == styleTitle)  {   currTag.disabled = false;  }

and not:

currTag.disabled = currTag.getAttribute("title") != styleTitle;    

?

9/20. 22 January 2006 @ 21:41, The Man in Blue wrote:

Yeah, because your code makes no sense. 

10/20. 23 January 2006 @ 06:03, Brian LePore wrote:

 Splintor:

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.

11/20. 23 January 2006 @ 10:15, The Man in Blue wrote:

Ah, you have to set the stylesheet disabled value to true initially, otherwise Internet Explorer doesn't recognise when you set it to false. It's a bug.

12/20. 24 January 2006 @ 16:09, Brett wrote:

Great script. I plan on adding it to my site. 

13/20. 24 January 2006 @ 20:47, Beth wrote:

 Great WebSite

14/20. 24 January 2006 @ 22:18, Mantroniks wrote:

@ Cameron

The whole idea is thus serve different stylesheets in relation to the client's browser resolution. And the idea is to put relative boxes instead of floated boxes when you are on eg 800*600?

Is AJAX/PHP a possible enhancement to your script too?

15/20. 25 January 2006 @ 00:29, The Man in Blue wrote:

There's a whole range of different stuff you can do, substituting floats for normal block elements is just one. You could server totally different colours, fonts, graphics, layout, etc.

AJAX isn't a logical enhancement, but hell, you could throw it in if you want to be buzzworthy.

16/20. 25 January 2006 @ 06:12, Mantroniks wrote:

"AJAX isn't a logical enhancement, but hell, you could throw it in if you want to be buzzworthy."

no hype, no buzz, no hype only top-notch simplified methods that make use of programmatory logic in a productive way

I misunderstood AJAX methods being an aid to the Event.Listener script

"There's a whole range of different stuff you can do, substituting floats for normal block elements is just one. You could server totally different colours, fonts, graphics, layout, etc."

The definition of  a stylesheet switcher

 

17/20. 25 January 2006 @ 22:44, Aislin wrote:

Marvelous work! This is a really useful tool.

AJAX is really a nifty tool!

18/20. 29 January 2006 @ 23:29, coolin' wrote:

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. 1 February 2006 @ 09:45, Vasil Dinkov wrote:

<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).

20/20. 1 February 2006 @ 12:48, The Man in Blue wrote:

Which is still kind of useless where unobtrusive scripts are  concerned.

Post your own comments

Fields marked with an asterisk* are mandatory. All HTML tags will be escaped. http:// strings in comments will be auto-linked.




Archives