homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Javascript to write stylesheet for different screen resolutions
An alternative to liquid design?

 12:31 am on Mar 13, 2003 (gmt 0)

I have a snippet of Javascript written that will check to see what screen.width the viewer happens to be running. Here's the code I have now....

if (screen.width == 640) {
document.write('<link rel="stylesheet" href="Homepage640.css">');
if (screen.width == 800) {
document.write('<link rel="stylesheet" href="Homepage800.css">');
if (screen.width == 1024) {
document.write('<link rel="stylesheet" href="Homepage1024.css">');
if (screen.width == 1280) {
document.write('<link rel="stylesheet" href="Homepage1280.css">');
if (screen.width == 1600) {
document.write('<link rel="stylesheet" href="Homepage1600.css">');

This script works great, but I'm concerned that a user might be running an odd resolution that the above script doesn't cover. For example... what if they are running 1100 or something? I have no way to catch all of the possibilities. Therefore, I have written some new code that will try to catch all of the unusual screen resolutions....

if (screen.width <= 719) {
document.write('<link rel="stylesheet" href="Homepage640.css">');
if (screen.width => 720) && (screen.width <= 920) {
document.write('<link rel="stylesheet" href="Homepage800.css">');
if (screen.width => 921) && (screen.width <= 1150) {
document.write('<link rel="stylesheet" href="Homepage1024.css">');
if (screen.width => 1151) && (screen.width <= 1450) {
document.write('<link rel="stylesheet" href="Homepage1280.css">');
if (screen.width => 1451) {
document.write('<link rel="stylesheet" href="Homepage1600.css">');

This seems like it should work great, but it doesn't. When I run the code, it craps out on me. I dont really know what's happening or what's going wrong, so maybe somebody here can advise me?

Also, I realize some of these ranges might seem a little odd, but I was trying to put the common resolutions somewhere in the middle of the ranges shown above. If you have some better suggestions for the ranges I'm showing here, please feel free to throw in your $0.02.

Thanks in advance!



 2:01 am on Mar 13, 2003 (gmt 0)

Well hopefully its just a typo:

greater than is >= , not =>

less than you get right, <=


 2:28 am on Mar 13, 2003 (gmt 0)

Nope. Just checked and it wasn't the problem. I still get nothing. I really get the idea it must be my JS syntax or something. Maybe the way I'm writing the script with the parentheses and curly brackets? I actually searched the web looking for other similar code and found some that seemed like it worked... but for some reason mine doesn't.

Just for the sake of being thorough, here's my page. You can view source to see the code in action.... or in this case inaction. :-\


[edited by: rcjordan at 2:33 am (utc) on Mar. 13, 2003]
[edit reason] sorry, no references to your site, please. [/edit]


 2:48 am on Mar 13, 2003 (gmt 0)

Yes, its the syntax. When your first
) arrives, it closes the "if" part of the statement.

Try something like this:

if ((w >= 720) && (w <= 920)) {
document.write('<link rel="stylesheet" href="Homepage800.css">');


 3:20 am on Mar 13, 2003 (gmt 0)

HA! That did it. I knew it had to be simple. Thanks so much for the help. Everything is working great now.


 8:50 am on Mar 13, 2003 (gmt 0)

Or you could just alter your design so you don't have to mess with different style sheets for different reolutions.

All the designs I do are designed to stretch across the screen on any resolution, and will fit down to 800 x 600 (often even 640x480)

Your system is flawed in that there doesn't appear to be a style sheet if someone is running at a resoltuino other than those specified.

The switch statement would probably work better for you:



 9:25 am on Mar 13, 2003 (gmt 0)

Not sure about your approach here, I agree with Allen you should just alter your design so you don't have to mess with different style sheets for different reolutions. Maybes a good idea for different Browsers, not resolutions.

Also you are finding the Screen Width which is not necessary width of the available browser window. Not everyone has their windows set to maximise. You could use Javascript to find the window width, but its a bit of a can of worms-

var myWidth =0;
if( typeof( window.innerWidth ) == 'number' ) {
myWidth = window.innerWidth;
} else {
if( document.documentElement &&
( document.documentElement.clientWidth document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
} else {
if( document.body && ( document.body.clientWidth document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;

then replace screen.width with myWidth


 1:35 pm on Mar 13, 2003 (gmt 0)

I hear what you're saying. But the thing is... I've gotten many emails from the regulars of my site who were running at higher resolutions like 1280 and 1600 who said that the layout I was using was weirdly shaped or the text was too small. When changing my own resolution to the higher values, I saw the same thing.

Originally I had my site designed as you described. I had width=100% on everything so that it would stretch to the limits of the screen. Problem is... the side navigation menu I was using had a width of about 25%, which on higher resolutions didn't look so nice. And setting absolute values for everything wasn't looking so nice either. Man, it's really too bad I can't show you now because I threw away my old stuff when I changed to this design. I was THAT sure of myself that what I was doing was MUCH better than anything I'd ever done before.

Flawed? Well, not anymore.... or at least it shouldn't be. Now that I've got ranges for the screen resolutions in my javascript, it will write the correct URL for the style sheet depending on what resolution they happen to be at.

And the design wasn't really that difficult either. I just designed my stuff around CSS at one particular resolution (1024x768). Then when I was done, I just saved the same style sheet as different filenames... one for each resolution I wanted to cover. In the end, I had about 5 different style sheets. When I was ready, I just changed my own computer settings to a different screen resolution... reload the page so that the JS would detect the change and show me the correct style sheet. Then I could just change the text heights and pixel widths for everything to accomodate the change in resolutions. I thought it was pretty elegant and not too much trouble either and I should have all of the bases covered. I even have <noscript> tags for those people who happen to have JS turned off.

I read the link you sent me, but I'm still not sure I understand how it works. I think I really need a better example of how this code works before I can seriously consider using it. Are you using this code yourself? If so, can I see an example where you're using it? I think that would help.

Also, Hocus Pocus.... I hear you loud and clear. I actually started my concept with this in mind, but I don't think it's necessary for what I'm doing. All I need to know is what (max) resolution they are set for so I can make the correct settings for text height and so forth. If I tried to base it on the available screen size, it would be a nightmare. I mean, if they don't have their browser maximized, that's Ok. At least it will still show the correct text height and the elemets (table and div widths, etc) would have the right values. I woudln't want to try basing that on their <i><b>available</b></i> screen area because then the browser would try to truncate the elements to a smaller size everytime they resized their window, which is not really what I'm shooting for.

My sincerest thanks to everyone for giving me plenty to think about! I welcome any follow up comments you may have. Man, it's great being able to collaborate with other webmasters about this stuff!


 5:58 pm on Mar 13, 2003 (gmt 0)

I'm one who is not yet convinced that totally liquid design is always the best way to go. Sometimes there are things you want to accomplish that don't "liquify" very well across the great range of screen resolutions that are available today.

For example, one of the issues I have with some liquid design is that the lines of text can extend too wide for comfortable reading on very large screen resolutions - it's hard for the eye to track from right to left at the end of each line.

For me the ideal is a strong, easy to use communication. That means chosing the best tool for each job, rather than assuming there is one best way that always applies.

So, serving up different stylesheets for different screen resolutions is one tool - and liquid design is another. When maxwidth has better browser support, that will also help us a lot by limiting how far div content may stretch.


 8:29 pm on Mar 13, 2003 (gmt 0)

I'm with Tedster on the use of liquid design. Long lines of text are terribly fatiguing to read. It's no accident that virtually every newspaper and newsmagazine uses columns 35 to 40 characters wide.
It's easy on the eyes. Plus long lines make the reader feel like they're "stuck" to a spot on the page. Psychologically, the reader feels much more progress is being made if the eye is allowed to steadily move vertically down the page as well as accross the lines.

Plus, as a guy who's pushing fifty, me eyes ain't what they used to be and browsing at a 1024 resolution is just about out of the question for me unless the page offers some kind of a font-size boost.
Hey, why not detect if it allows the author to help?

We are out to serve the readers, are we not?


 8:44 pm on Mar 13, 2003 (gmt 0)

There's another factor here too - assuming that your visitor's have half a brain (sometimes that seems not to be true, right?)

That is, liquid design allows people to resize their WINDOW and see a display that they like. However, resolution specific stylesheets aren't looking at window size, but screen resolution. Then the visitor can't change what they see as simply as they can with liquid layout.

And, as HocusPocus mentioned, trying to write javascript that's based on window size can be a nasty can of worms - the code is different for different browsers. But as one of my friends once said, you can't make an omelet without breaking open a can of worms!

So, if you're serving up content pages with information that people really want to read, then assuming that your visitors have at least half a brain can be a good way to go (hence liquid design can work well).

But if you need the immediate impact of a really spiffy design - to retain first time traffic on an ecommerce page, for instance - then you'd better find a way to deliver such a page no matter what the screen resolution, window size, browser version, operating system, etc. your traffic arrives with. That can sometimes use every trick in the toolkit.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved