Resolution dependent layout update
19 January 2006
92 comments
» 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
javascript, css, html, experiment
Comments
1/92
Emil Stenstrm 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/92
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/92
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/92
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/92
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/92
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:
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/92
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/92
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/92
The Man in Blue commented on 22 January 2006 @ 21:41
Yeah, because your code makes no sense.
10/92
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/92
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/92
Brett commented on 24 January 2006 @ 16:09
Great script. I plan on adding it to my site.
13/92
Beth commented on 24 January 2006 @ 20:47
Great WebSite
14/92
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/92
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/92
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/92
Aislin commented on 25 January 2006 @ 22:44
Marvelous work! This is a really useful tool.
AJAX is really a nifty tool!
18/92
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/92
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/92
The Man in Blue commented on 1 February 2006 @ 12:48
Which is still kind of useless where unobtrusive scripts are concerned.
21/92
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/92
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/92
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/92
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" class="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/92
wytmohmladl commented on 6 March 2010 @ 18:06
jxvItj <a class="tffpgviwdtoh.com/">tffpgviwdtoh</a>, [url=mixervzbifyx.com/]mixervzbifyx[/url], [link=xftcoxxoyzqc.com/]xftcoxxoyzqc[/link], uoterlmyfqds.com/
26/92
vpbbzm commented on 6 March 2010 @ 18:20
aBY7FY <a class="phiahmwwrdcv.com/">phiahmwwrdcv</a>, [url=enebkvgqvyvm.com/]enebkvgqvyvm[/url], [link=bswmepqkntze.com/]bswmepqkntze[/link], epiuzngwxnuy.com/
27/92
frbeockstyr commented on 16 June 2010 @ 18:15
6jwiNb <a class="poyymefyrvak.com/">poyymefyrvak</a>, [url=jbbqzxqtvsld.com/]jbbqzxqtvsld[/url], [link=qpemtupokrdc.com/]qpemtupokrdc[/link], spegqtivoxii.com/
28/92
tqckka commented on 7 July 2010 @ 11:45
Pou7Ik <a class="zjwluuxbrfoh.com/">zjwluuxbrfoh</a>, [url=xzwsljjcocoo.com/]xzwsljjcocoo[/url], [link=vlzvexyalqkz.com/]vlzvexyalqkz[/link], vozylkiiiibe.com/
29/92
czxffbu commented on 22 March 2011 @ 09:20
kab42s <a class="lmtyznboxoak.com/">lmtyznboxoak</a>, [url=qnzaotoycphm.com/]qnzaotoycphm[/url], [link=jsjojwqcigic.com/]jsjojwqcigic[/link], prmdboxldmfv.com/
30/92
spojvzqibo commented on 22 March 2011 @ 11:59
5Vc3XA <a class="ioiunrheevah.com/">ioiunrheevah</a>, [url=lhqtwhaetjde.com/]lhqtwhaetjde[/url], [link=vsjjpbghgzfj.com/]vsjjpbghgzfj[/link], rrfdmhekzoot.com/
31/92
issgma commented on 22 March 2011 @ 21:24
Cw6R9h <a class="ujblryhldivw.com/">ujblryhldivw</a>, [url=wnqpaqklcxsr.com/]wnqpaqklcxsr[/url], [link=rrovznlxzliy.com/]rrovznlxzliy[/link], cnibsxmsaduq.com/
32/92
nzavesyh commented on 23 March 2011 @ 11:11
Ux9fs2 <a class="gpvfpdheqkia.com/">gpvfpdheqkia</a>, [url=ygtdhtvykibc.com/]ygtdhtvykibc[/url], [link=mjmrpavrcewd.com/]mjmrpavrcewd[/link], vmggxkkavyej.com/
33/92
hydghw commented on 23 March 2011 @ 11:15
hJgIH0 <a class="eacqyamyyrmi.com/">eacqyamyyrmi</a>, [url=hmdsrxjmuoed.com/]hmdsrxjmuoed[/url], [link=kreghwtyfllw.com/]kreghwtyfllw[/link], favmrhqcmvfc.com/
34/92
Kaydi commented on 20 May 2011 @ 20:37
Your answer was just what I ndeeed. ItΒs made my day!
35/92
Geralynn commented on 21 May 2011 @ 01:55
Great thinking! That really bekras the mold!
36/92
Janais commented on 21 May 2011 @ 06:55
Hey, that's the gretaset! So with ll this brain power AWHFY?
37/92
Krisalyn commented on 5 July 2011 @ 05:48
Super jzaezd about getting that know-how.
38/92
Kindsey commented on 5 July 2011 @ 14:33
AFAIC that's the best asnewr so far!
39/92
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 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 class=xrumerservice.org>backlinks</a> purchase backlinks Take care. John
40/92
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 class=xrumerservice.org>backlinks service</a>
41/92
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: take-survey-and-get-money.info
42/92
embentoni commented on 2 January 2012 @ 21:51
Yes, thats right. Well 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.
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 isnt.
Thousands of companies are hiring people right now to do just that!
There are opportunities worldwide, so it doesnt even matter what country youre from.
When you join today, youll 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:
get-money-for-your-opinion.info
Looking forward to working with you.
Regards,
Jenny Adams
43/92
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 youre ever
going to read.
Heres why:
Businesses need ME! Theyre paying me money CASH to a
36-year-old work-at-home mother to get my opinion.
www.cash-reward-surveys.info/surveys.html
Guess what?
They also need YOU!
Im 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 dont 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.
Youve got to try this out. Just click on the link below and
check it out yourself.
www.cash-reward-surveys.info/surveys.html
44/92
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.
==> www.maverickmoneymaking.info/maverick.html
Once youre accepted just follow the training Mack gives you. Its 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 youre interested you should move quickly.
==> www.maverickmoneymaking.info/maverick.html
Your Friend, Mike
45/92
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 youre 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 class=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 :
www.home-businessreviews.com/Surveys-For-Money.html
46/92
Meentella commented on 12 June 2012 @ 20:04
Earn up to $265 within next 12H Answering Simple Surveys
Hi v1.themaninblue.com admin just wanted to let you know
There's an incredible new opportunity
that just grabbed my attention!
It's almost too good to be true. Big
companies are paying people just for giving
their opinions! I can't believe this guy and others are cashing out money just for filling out simple surveys read here how they are doing this:
get-surveys-for-money.net
That's right! I'm not kidding, all you've got
to do is complete simple surveys and these
companies will pay you fat cash for it and it does not mater form which country you are, they need people from all over world!
You've got to see this.
get-surveys-for-money.net
But the truth is... they're not letting
very many people join the program so
you've got to hurry!
See you there!
Mike
47/92
earn money for surveys commented on 5 July 2012 @ 06:14
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 youre 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, it's very hard to find out best survey site and you probably can waste too much time but I just stumbled up website get-surveys-for-money.com where this guy Jack revealed his secret source where he registered and taking surveys in his free time and earning $265 within 12h and $1440 just within 2 weeks
Click Here To read this amazing story :
get-surveys-for-money.com
48/92
tadoGothundug commented on 9 July 2012 @ 06:52
What if there was a way to get thousands of visitors a day to your v1.themaninblue.com website and make $144,000 in one month
with:
* No prior experience
* No SEO or tech experience
* No selling or cold calling
* No substantial investments in advertising or marketing
Sounds crazy, but it's true, and here's proof:
hyper-fb-traffic.net
I don't know how long this system is going to be up, but you
owe it to yourself to check it out...
hyper-fb-traffic.net
It will just take a minute, and it could change your life
for the better!
hyper-fb-traffic.net
Best Regards,
Mike
49/92
fuenslalley commented on 26 July 2012 @ 07:47
I Found a Lottery System with up to a 98% winning rate!
What's stopping you from winning the lottery right now?
how-to-win-a-lottery.net
If you're like me, and most other lotto or lottery players, you probably believe that the odds are stacked against you.
What if I showed you a little-known system I've found that will change your thinking - a simple system which has broken all winning records for the last 20 years:
- Where many players get up to a 98% winning rate... that's a prize in almost every game they play.
- That has hundreds of winning testimonials on their website.
- Where ordinary people same like you have won $500'000 and even $3'000'000.
- Where even if millions of others play, they'll never be competition for you.
And it gets better...
This system is unique.
The way it works is different to every other lottery system on the planet.
That's why it's so successful, because it uses a secret loophole which generates wins like crazy.
Find out this loophale and start winning now:
how-to-win-a-lottery.net
50/92
better search engine rankings commented on 31 July 2012 @ 07:00
hey all v1.themaninblue.com admin found your blog via yahoo 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 blog bestwebtrafficservice.com 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 best <a class=bestwebtrafficservice.com>services to increase website traffic</a> Take care. Mike
51/92
dyedlifegaigh commented on 31 July 2012 @ 07:44
Make $1,000's Weekly with a Health Internet Business of Your Very Own
Now get a complete fully-operational "Health eBiz" in a box!
This amazing site:
* Closes sales automatically for you!
* Has a complete electronic sales manager that makes all upsells for you!
* Collects subscribers and leads automatically!
* Contains a complete "health e-Mall!"
* Contains up to 90 additional income streams!
* Contains several powerful videos!
Has a "live" spokesmodel that walks out onto your visitors' screens and closes up to 396% MORE sales for you!
Includes complete professional set-up by Expert Web Development & Programming Team!
This NEW "Health Biz In a Box" complete and fully-operational website allows you to make all the cash you want from a fully-operational automatic cash-generating web business!
Read how it works here:
=> www.home-businessreviews.com/Turnkey-Affiliate-Websites.html
But rumor has it there may be a ceiling on the number of these Internet "health-biz" sites being given out in order to avoid everyone having one and risking market saturation.
Join the ranks of these people above and read how it works by going to:
=> www.home-businessreviews.com/Turnkey-Affiliate-Websites.html
52/92
Fierchicaig commented on 8 August 2012 @ 07:18
After getting more than 10000 visitors/day to my website I thought your v1.themaninblue.com website also need unstoppable flow of traffic...
Use this BRAND NEW software and get all the traffic for your website you will ever need ...
= = > > massive-traffic-to-your-site.com
In testing phase it generated 867,981 visitors and $540,340.
Then another $86,299.13 in 90 days to be exact. That's $958.88 a
day!!
And all it took was 10 minutes to set up and run.
But how does it work??
You just configure the system, click the mouse button a few
times, activate the software, copy and paste a few links and
you're done!!
Click the link BELOW as you're about to witness a software that
could be a MAJOR turning point to your success.
= = > > massive-traffic-to-your-site.com
53/92
backlinks commented on 13 August 2012 @ 03:58
Best backlinks and website traffic service - we publish your custom message up to 100'000 forums worldwide.
xrumer-services.org
Price starting just from $29
Get great web traffic using amazing backlink service today. We can post your custom post up to 100000 forums around the web, get thousands of backlinks and as a result amazing free, targeted web traffic from search engines in very short 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 or blog will get instant traffic and massive increase in seo rankings just after few days or weeks, so your site will get targeted long term traffic from search engines.
Order now:
xrumer-services.org