Resolution dependent layout update

19 January 2006

24 comments

A Blue Perspective: Resolution dependent layout update

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

Download the source (ZIP, 16KB)

Categories

, , ,

Comments

  1. 1/24

    Emil Stenström commented on 20 January 2006 @ 00:20

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

  2. 2/24

    Chrstian Watson commented on 20 January 2006 @ 00:25

     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. 3/24

    The Man in Blue commented on 20 January 2006 @ 00:31

    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. 4/24

    Seb Frost commented on 20 January 2006 @ 01:29

    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. 5/24

    The Man in Blue commented on 20 January 2006 @ 01:38

    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. 6/24

    Ballwalkin' Mike commented on 20 January 2006 @ 08:59

    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. 7/24

    Brian LePore commented on 20 January 2006 @ 18:23

    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. 8/24

    Splintor commented on 22 January 2006 @ 16:45

     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. 9/24

    The Man in Blue commented on 22 January 2006 @ 21:41

    Yeah, because your code makes no sense. 

  10. 10/24

    Brian LePore commented on 23 January 2006 @ 06:03

     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. 11/24

    The Man in Blue commented on 23 January 2006 @ 10:15

    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. 12/24

    Brett commented on 24 January 2006 @ 16:09

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

  13. 13/24

    Beth commented on 24 January 2006 @ 20:47

     Great WebSite

  14. 14/24

    Mantroniks commented on 24 January 2006 @ 22:18

    @ 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. 15/24

    The Man in Blue commented on 25 January 2006 @ 00:29

    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. 16/24

    Mantroniks commented on 25 January 2006 @ 06:12

    "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. 17/24

    Aislin commented on 25 January 2006 @ 22:44

    Marvelous work! This is a really useful tool.

    AJAX is really a nifty tool!

  18. 18/24

    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. 19/24

    Vasil Dinkov commented on 1 February 2006 @ 09:45

    <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/24

    The Man in Blue commented on 1 February 2006 @ 12:48

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

  21. 21/24

    Jan commented on 6 April 2006 @ 21:29

    I'm sorry to say this, but this script doesn't seem to work right in OmniWeb 5.1.3 nor in Opera 8.52 on Mac OS X. Is it just me or is that really a bug?

    Anyways, it is a really awesome script.

  22. 22/24

    ciaran commented on 19 April 2006 @ 21:45

    Don't get me wrong - this script is great and exactly what I'm looking for but why is there no links to the JS source files?

  23. 23/24

    gudi commented on 21 April 2006 @ 06:19

    I've finally got the time to revisit your website, and i must say im as amused as i was back in time :)

    I havent seen this script before, but i must admit im impressed, really nice. Ill dive deeper into your archive to see what i've missed :)

  24. 24/24

    jetblack commented on 27 April 2006 @ 19:54

    Hi

    You said in reply to christian watson on 20/01/06 that it was easy to add stylesheets for other dimensions. It was just simply a case of adding to the checkBrowserWidth() conditionals. I am having trouble making this work. I can add to this easy enough - but making it work is something else.

    I looked at the source code for your page and there is this link among others

    <link rel="alternate stylesheet" type="text/css" href="css/features_1024.css" title="1024 x 768" />

    Do I add other alternate stylesheets to match what is in resolution.js ?

    I seem to get the impression from experimentation that this only works for one stylesheet - just wont recognise any others.

    All the best.

  25. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

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.

RSS feed