Mar 28

Dynamically Changing Your Target Window Width

Preparing for Widescreen: A good idea that’s going to become more and more popular as screen sizes exist in a much larger range of resolutions and aspect ratios than ever before.

I’m suggesting that we use a different stylesheet for different screen resolutions. With simple JavaScript, we can test for resolution and then load the corresponding stylesheet.

I did a proof-of-concept once for something similar. I checked the width of the screen window, then displayed or didn’t display a third column. I never did anything with it, but it worked well. I didn’t, however, capture the screen resize event like they do here.

(Why are they reloading the entire page on screen resize? Why not just rerun the function that detected the screen resolution window width and loaded the stylesheet in the first place? What am I missing?)

by Deane   March 28, 2006 11:50 PM   |

Comments

by Michel Fortin,   March 29, 2006 7:50 AM  

Screen resolution? Shouldn't that be the window width?

by Deane,   March 29, 2006 7:58 AM  

Right, right -- I changed my references.

by Peter Crackenberg,   March 29, 2006 10:48 AM  

If you look at his demo page, rather than his explanation, you'll see this line in his javascript:

window.onload = window.onresize = dynamicStyle;

So he's rerunning the resize function rather than reloading the page when the thing gets resized, which is the sane thing to do.

by Deane,   March 29, 2006 3:54 PM  

But he mentions this line in the text:

<body onResize="document.location.href = document.location.href">
by Douglas Clifton,   April 1, 2006 6:58 PM  

I wrote the JavaScript for his article after pointing out many of the problems with the original implementation. Unfortunately, when the article was published the text mistakenly referenced the original technique.

Add Comment

Want to advertise on this site? Contact FM.
Web Hosting Web hosting, dedicated servers and Web design services
Laser Toner Cartridges UK laser toner, toner cartridges, hp toner, lexmark toner, samsung toner, canon, toner, epson toner, oki toner, kyocera toner, xerox toner, remanufactured toner, compatible toner
Direct TV Deals Free 4 room direct tv deals. no equipment to buy. free fast professional direct tv installation. this is the best direct tv deal available anywhere.
SEO Article Learn from the experts with our SEO article.
rope light Shopping with birddog distributing, inc., gives you access to the lowest prices, the best customer service and the quickest delivery times possible.
Laptop AC Adapter We offer genuine factory direct replacement AC adapters.
Direct TV Best satellite TV deals.
Direct TV Deals Direct TV programming deals are varied and include packages containing from 50 channels up to over 250 channels.
8mm film to DVD Retain family memories with the only frame by frame digital restoration service in the United States for your 8mm film to DVD today
Rubber Stamp Shop for custom self-inking stamps, hand stamps, address stamps, label stamps, check endorsement stamps, check deposit stamps, date stamps, pre inks, pocket stamps, ink and much more!