Script to Load Different .css Depending On Screen Resolution

by Tony_D

Posted: 16 years ago 19 replies

WEB DESIGN

Hey all, I've never posted in the Website Design forum before, but i had a useful script I thought I'd share with you. This is a relatively simple javascript which lets you specify different .css stylesheets to correspond with different screen resolutions.

Put the following code between the <head> </head> tags of your site:

<script type="text/javascript">

function getcss(cssfile){

loadcss = document.createElement('link')

loadcss.setAttribute("rel", "stylesheet")

loadcss.setAttribute("type", "text/css")

loadcss.setAttribute("href", cssfile)

document.getElementsByTagName("head")[0].appendChild(loadcss)

}

if(screen.width <= '800')
// Defines the resolution range you're targeting (less than 800 pixels wide in this case)

{

getcss('800x600.css')
// Defines the .css file you want to load for this range (800x600.css)

}

else if(screen.width > '800' && screen.width < '1280')
// This time we're targeting all resolutions between 800 and 1280 pixels wide

{

getcss('1024x768.css')
//And we want to load the .css file named "1024x768.css"

}

else if(screen.width > '1024' && screen.width < '1600')
//Targeting screen resolutions between 1024 and 1600px wide

{

getcss('1280x1024.css')
//Load 1280x1024.css

}

else

{

getcss('1280x1024.css')
//This else statement has "if" condition. If none of the following criteria are met, load 1280x1024.css

}

</script>

I use this to adjust table, image, font size to make full use of screen real estate at any resolution. Sometimes at 800x600 and smaller I'll lose an advertising banner in liu of maintaining the form and function of my site.

#css #depending #javascript #load #resolution #screen #script #stylesheet

Joshua.Taylor 16 years ago

Nice find. thanks for sharing this!
- Thanks
{{ DiscussionBoard.errors[95465].message }}

yangyang

15 years ago

That is a really great script. However if you could do it server side, it'd be better!

Thanks!

Thanks
2 replies

Signature

1. Global Movies Database = $489.95 = 1.5 GB data + 65.9 GB images.

2. World Hotels Database = $589.95 = 1.54 GB data + 71.4 GB images.

3. Auto Parts Database = $489.95 = 15.8 GB data + 30.4 GB images.

{{ DiscussionBoard.errors[379573].message }}

MichaelB23 15 years ago

Wow great thanks!!! Been looking for this all over.
- Thanks
{{ DiscussionBoard.errors[779857].message }}

Aaron Sustar

15 years ago

Originally Posted by yangyang

That is a really great script. However if you could do it server side, it'd be better!

Thanks!

There's virtually no way of doing this server-side, because the HTTP header sent by visitor's browser does not include any information about visitor's screen resolution. JavaScript (well, any kind of client-side script language) is pretty much the only option you have.

Thanks
1 reply

{{ DiscussionBoard.errors[782713].message }}

SEOsly

15 years ago

Originally Posted by Aaron Sustar

Quoted for truth.

Thanks for sharing the script though, it certainly has a good few number of uses.

Thanks

{{ DiscussionBoard.errors[782727].message }}

alby54

15 years ago

Great script.....but wouldn't make more sense to take in consideration browser-width instead of screen resolution which really doesn't mean much? Also...this is the script part then, to make it work, it is neccessary to add the customized css stylesheets as "alternate"...am I right ?

best regards
Alby54

Thanks
1 reply

{{ DiscussionBoard.errors[993409].message }}

CBrowne

15 years ago

Originally Posted by alby54

Just found this on google, and thought I should point out that javascript does have a "window.outerWidth" and "window.outerHeight" option, now I know it isn't perfect because it includes window decorations and chrome (which on my screen are 0 pixels on the sides but about 75px in added height); but you don't really need to be pixel-perfect for these conditionals.

As for the other part, no. The script adds the CSS in, and I would recommend ALWAYS READING AND UNDERSTANDING SCRIPTS YOU FIND ON THE NET before you use them. This is security 101, and I shouldn't really have to point it out. In particular, note the "getcss" function, whose job is simply to add the necessary markup.

Thanks

{{ DiscussionBoard.errors[1109097].message }}

staffelseo 15 years ago

so if the resolution is different it will load a differend .css WOW that is pretty cool, this is a real problem solver thanks
- Thanks
Signature
EPIC ONE TIME FEE SEO SERVICE + FREE CONSULTATION!

NO RANK = REFUND
100% RANK INDUCING MONSTER RANKING SERVICE
{{ DiscussionBoard.errors[1017736].message }}
alby54 15 years ago

Ok, but if I'm not mistaken, the getcss function provides to include a certain stylesheet not to sostitute an existing one. There has to be at least one kind of CSS stylesheet loaded as default otherwise, and I shouldn't really have to point it out, who doesn't have javascript enable will end up viewing an unstyled white page with just text in it.
- Thanks
{{ DiscussionBoard.errors[1114417].message }}
kendrickyi 15 years ago

Thanks Tony D for the code! It's real helpful!
- Thanks
- 1 reply
{{ DiscussionBoard.errors[1115031].message }}
- tjk29 14 years ago
  
  Hello,
  
  I am sorry for bringing up old topics but I ran into some problems with this.
  
  I tried it on my site but ran into problems with it showing on other resolutions.
  
  It shows on these:
  800x600
  1360x768
  1440x900
  
  but not these
  1024x768
  1152x648
  1152x864
  1280x720
  1280x768
  1280x800
  1280x900
  
  My CSS is right so I'm wondering if I did something wrong with the JS code.
  
  Here is my modification of the code above
  
  Code:
  
  <script type="text/javascript"> function getcss(cssfile){ loadcss = document.createElement('link') loadcss.setAttribute("rel", "stylesheet") loadcss.setAttribute("type", "text/css") loadcss.setAttribute("href", cssfile) document.getElementsByTagName("head")[0].appendChild(loadcss) } if(screen.width <= '800') // Defines the resolution range you're targeting (less than 800 pixels wide in this case) { getcss('css/800m.css') // Defines the .css file you want to load for this range (css/800.css) } else if(screen.width > '1024' && screen.width < '1152') // This time we're targeting all resolutions between 1024 and 1152 pixels wide { getcss('css/1024m.css') //And we want to load the .css file named "css/1024.css" } else if(screen.width > '1280' && screen.width < '1360') // This time we're targeting all resolutions between 1280 and 1360 pixels wide { getcss('css/1280m.css') //And we want to load the .css file named "css/1280.css" } else if(screen.width > '1440' && screen.width < '1600') // This time we're targeting all resolutions between 1440 and 1600 pixels wide { getcss('css/1440m.css') //And we want to load the .css file named "css/1440.css" } else { getcss('css/1680m.css') //This else statement has "if" condition. If none of the following criteria are met, load css/1680m.css } </script>
  
  Any idea on what I did wrong?
  
  Thanks.
  
  Thanks
  
  1 reply
  
  {{ DiscussionBoard.errors[2092347].message }}
  
  spring2010 14 years ago
  
  Hi All,
  
  I tried Tony's script, only difference was to make it an external javascript file, but it does not load the different css files, correctly.
  
  All I changed was remove the script tag and save as a .js file. I create this in the directory with my .xsl and other .js files. And I can see in the generated xml code that the .js file has been loaded.
  
  But why aren't the different css files getting loaded properly? Is there anything more to making the script external. I'm quite new new to javascript, so I could be doing something that is obvious to you, would be very grateful if you could give me some pointers.
  
  Thanks in advance!
  
  Thanks
  
  1 reply
  
  {{ DiscussionBoard.errors[2595424].message }}
  
  qualitymove13 13 years ago
  
  Could you please show me what a couple of the corresponding CSS attributes look like? Thanks in advance as I am still learning the ropes!
  
  Thanks
  
  {{ DiscussionBoard.errors[4206025].message }}
sandywony 12 years ago

That was a fantastic post. I tried it. This script works on adjusting screen size. If you have any other Java scripts share them.

Thanks in advance
- Thanks
{{ DiscussionBoard.errors[5454181].message }}
kl2000 12 years ago

Use CSS media tag for responsive site designs
- Thanks
{{ DiscussionBoard.errors[5457411].message }}
kl2000 12 years ago

Example media query

/* for 980px or less browser width */
@media screen and (max-width: 980px) {

#container {
width: 94%;
}

#content {
width: 65%;
}

#sidebar {
width: 30%;
}

}
- Thanks
{{ DiscussionBoard.errors[5457438].message }}
retroid 12 years ago

^ nice mate

read more about responsive design with media query here
Responsive Design with CSS3 Media Queries
- Thanks
{{ DiscussionBoard.errors[5457553].message }}
talashme 12 years ago

Thank you, its really save my time
- Thanks
{{ DiscussionBoard.errors[5872251].message }}
Wellman 9 years ago

Using CSS Media Queries would be much better!
Thanks for sharing.
- Thanks
{{ DiscussionBoard.errors[9752874].message }}

Script to Load Different .css Depending On Screen Resolution

Trending Topics

Any thoughts on golf's latest phenom...Scottie Scheffler??

The Twilight Zone

What's the Best IM-Related Skill to Learn Today That Can Help in the Future?

best high quality crypto traffic.

Should i Index Author pages?