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.
Download the source (ZIP, 16KB)
Categories
Follow me on Twitter
To hear smaller but more regular stuff from me, follow @themaninblue.
Monthly Archives
Popular Entries
- Resolution dependent layout update
- footerStickAlt: A more robust method of positioning a footer
- widgEditor: A simple, standards-compliant WYSIWYG HTML editor
- Accessible, stylish form layout
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.
Comments
1/45
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/45
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/45
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/45
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/45
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/45
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/45
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/45
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/45
The Man in Blue commented on 22 January 2006 @ 21:41
Yeah, because your code makes no sense.
10/45
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/45
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/45
Brett commented on 24 January 2006 @ 16:09
Great script. I plan on adding it to my site.
13/45
Beth commented on 24 January 2006 @ 20:47
Great WebSite
14/45
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/45
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/45
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/45
Aislin commented on 25 January 2006 @ 22:44
Marvelous work! This is a really useful tool.
AJAX is really a nifty tool!
18/45
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/45
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/45
The Man in Blue commented on 1 February 2006 @ 12:48
Which is still kind of useless where unobtrusive scripts are concerned.
21/45
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/45
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/45
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/45
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/45
wytmohmladl commented on 6 March 2010 @ 18:06
jxvItj <a href="http://tffpgviwdtoh.com/">tffpgviwdtoh</a>, [url=http://mixervzbifyx.com/]mixervzbifyx[/url], [link=http://xftcoxxoyzqc.com/]xftcoxxoyzqc[/link], http://uoterlmyfqds.com/
26/45
vpbbzm commented on 6 March 2010 @ 18:20
aBY7FY <a href="http://phiahmwwrdcv.com/">phiahmwwrdcv</a>, [url=http://enebkvgqvyvm.com/]enebkvgqvyvm[/url], [link=http://bswmepqkntze.com/]bswmepqkntze[/link], http://epiuzngwxnuy.com/
27/45
frbeockstyr commented on 16 June 2010 @ 18:15
6jwiNb <a href="http://poyymefyrvak.com/">poyymefyrvak</a>, [url=http://jbbqzxqtvsld.com/]jbbqzxqtvsld[/url], [link=http://qpemtupokrdc.com/]qpemtupokrdc[/link], http://spegqtivoxii.com/
28/45
tqckka commented on 7 July 2010 @ 11:45
Pou7Ik <a href="http://zjwluuxbrfoh.com/">zjwluuxbrfoh</a>, [url=http://xzwsljjcocoo.com/]xzwsljjcocoo[/url], [link=http://vlzvexyalqkz.com/]vlzvexyalqkz[/link], http://vozylkiiiibe.com/
29/45
czxffbu commented on 22 March 2011 @ 09:20
kab42s <a href="http://lmtyznboxoak.com/">lmtyznboxoak</a>, [url=http://qnzaotoycphm.com/]qnzaotoycphm[/url], [link=http://jsjojwqcigic.com/]jsjojwqcigic[/link], http://prmdboxldmfv.com/
30/45
spojvzqibo commented on 22 March 2011 @ 11:59
5Vc3XA <a href="http://ioiunrheevah.com/">ioiunrheevah</a>, [url=http://lhqtwhaetjde.com/]lhqtwhaetjde[/url], [link=http://vsjjpbghgzfj.com/]vsjjpbghgzfj[/link], http://rrfdmhekzoot.com/
31/45
issgma commented on 22 March 2011 @ 21:24
Cw6R9h <a href="http://ujblryhldivw.com/">ujblryhldivw</a>, [url=http://wnqpaqklcxsr.com/]wnqpaqklcxsr[/url], [link=http://rrovznlxzliy.com/]rrovznlxzliy[/link], http://cnibsxmsaduq.com/
32/45
nzavesyh commented on 23 March 2011 @ 11:11
Ux9fs2 <a href="http://gpvfpdheqkia.com/">gpvfpdheqkia</a>, [url=http://ygtdhtvykibc.com/]ygtdhtvykibc[/url], [link=http://mjmrpavrcewd.com/]mjmrpavrcewd[/link], http://vmggxkkavyej.com/
33/45
hydghw commented on 23 March 2011 @ 11:15
hJgIH0 <a href="http://eacqyamyyrmi.com/">eacqyamyyrmi</a>, [url=http://hmdsrxjmuoed.com/]hmdsrxjmuoed[/url], [link=http://kreghwtyfllw.com/]kreghwtyfllw[/link], http://favmrhqcmvfc.com/
34/45
Kaydi commented on 20 May 2011 @ 20:37
Your answer was just what I ndeeed. ItÂ’s made my day!
35/45
Geralynn commented on 21 May 2011 @ 01:55
Great thinking! That really bekras the mold!
36/45
Janais commented on 21 May 2011 @ 06:55
Hey, that's the gretaset! So with ll this brain power AWHFY?
37/45
Krisalyn commented on 5 July 2011 @ 05:48
Super jzaezd about getting that know-how.
38/45
Kindsey commented on 5 July 2011 @ 14:33
AFAIC that's the best asnewr so far!
39/45
affordable link building service commented on 19 November 2011 @ 19:32
how's life ? v1.themaninblue.com admin found your website via search engine but it was hard to find and I see you could have more visitors because there are not so many comments yet. I have discovered site which offer to dramatically increase traffic to your site http://xrumerservice.org they claim they managed to get close to 1000 visitors/day using their services you could also get lot more targeted traffic from search engines as you have now. I used their services and got significantly more visitors to my blog. Hope this helps :) They offer increase page rank seo experts <a href=http://xrumerservice.org>backlinks</a> purchase backlinks Take care. John
40/45
backlinks service commented on 9 December 2011 @ 08:23
Get up to 100000 forum backlinks with our xrumer blast & massive traffic
Get incredible online web traffic using superb xrumer service today. We can post your custom post up to 100K forums worldwide, get insane amount of backlinks and incredible online web traffic in shortest time. Most affordable and most powerful service for web traffic and backlinks in the world!!!!
Your post will be published up to 100000 forums worldwide your website will get insatnt traffic and massive increase in seo rankings just after few days or weeks. Order now:
<a href=http://xrumerservice.org>backlinks service</a>
41/45
Loagannonna commented on 23 December 2011 @ 01:48
Earn up to $3500/month just by taking simple surveys online!
I tried one of those online survey sites about 4 months ago that
say all you have to do is spend a couple of minutes filling out
some surveys and you will be making hundreds a day..... YEAH RIGHT, I didn't make anything.
I joined 7 of these stupid websites and I actually tried filling
out a couple of surveys on each site and they took forever then at
the end they wanted me to buy things or I couldn't complete the
survey.
These are complete scams so be aware!!! I couldn't believe they
were even allowed to sell such bogus products.
Then about 2 weeks ago I was watching the news and they had some
vice presidents and marketing managers of some major multi million
dollar companies talking about a site that they personally work
with to pay consumers for their opinion, A site that actually just
wants the "average Joe's" honest opinion on products and services
and is willing to pay big money to get them. for more information
clik here: http://take-survey-and-get-money.info
42/45
embentoni commented on 2 January 2012 @ 21:51
Yes, that’s right. We’ll pay you $25 when you sign up with us today!
We have an instant $25 market research survey you can take as soon as you join.
http://get-money-for-your-opinion.info
Imagine companies paying you just to get your opinion about whether or not
you like their products sound too good to be true? It isn’t.
Thousands of companies are hiring people right now to do just that!
There are opportunities worldwide, so it doesn’t even matter what country you’re from.
When you join today, you’ll have THOUSANDS of surveys at your fingertips paying anywhere from $25-$50.
You can take these online from home, on vacation or anywhere you have an internet connection.’
Now is a better time than ever to get started! Take advantage of the instant $25 survey today!
Click Below To Get Started Now:
http://get-money-for-your-opinion.info
Looking forward to working with you.
Regards,
Jenny Adams
43/45
cash for survey commented on 10 January 2012 @ 14:47
If you want to make $10-$150/hour and up to $3500/month of your free time working at
home part-time then this is the most important message you’re ever
going to read.
Here’s why:
“Businesses need ME! They’re paying me money – CASH – to a
36-year-old work-at-home mother to get my opinion.”
http://www.cash-reward-surveys.info/surveys.html
Guess what?
They also need YOU!
I’m not a marketing expert or a sales gal. In fact, I know very
little about business. But I do know exactly what I like and what
I don’t like. I know what products I would buy and what services
I would use.
Guess what? This is exactly what large companies are paying me
for. They need to know what their average customer needs and
wants. So these companies pay millions of dollars every month to
the average person. In return, the average person, myself
included, answers some questions and gives them their opinion.
You’ve got to try this out. Just click on the link below and
check it out yourself.
http://www.cash-reward-surveys.info/surveys.html
44/45
Perniplinners commented on 6 February 2012 @ 23:45
Hi, This just came across my desk and I had to pass it on to you ASAP…
Internet multi-millionaire Mack Michaels has a few new positions available right now…
If accepted you can easily rake in $11, 917 per month starting from scratch.
==> http://www.maverickmoneymaking.info/maverick.html
Once you’re accepted just follow the training Mack gives you. It’s really quite simple…
Learn how Mack went from not being able to afford Christmas gifts to a millionaire lifestyle and how you can too!
BUT…
Due to the extremely high level of Hands-On time Mack spends with every new member he has to limit the number of positions that are open.
Right now there are only 2 available in your area. If you’re interested you should move quickly.
==> http://www.maverickmoneymaking.info/maverick.html
Your Friend, – Mike
45/45
Richard commented on 3 April 2012 @ 07:50
If you want to make $20-$50/hour and up to $3500/month of your time working at
home part-time then this is the most important message you’re ever going to read...
It may sound hard to believe, but it's true. There are thousands of companies out there who are willing to pay for your opinions regarding their products. This is an important part of product research, and they rely on people just like you for your honest opinion!
Imagine getting paid for doing things like:
- Trying out new menu items from popular restaurants
- Take short surveys about new cars that are coming out soon
- Give your opinion about new clothing and shoe designs
But here's a problem to find out best survey site you probably can waste too much time but I just stumbled up <a href=http://www.home-businessreviews.com/Surveys-For-Money.html>this article</a> where this guy revealed his source where he registered and taking surveys in his free time and earning $3000-$4000/month
Click Here To read this amazing story :
http://www.home-businessreviews.com/Surveys-For-Money.html