 |
Script To Load Different .css Depending On Screen Resolution |
 |
Member Login
Welcome
Welcome to the Zymic webmaster forums. Our forums are here to provide people the free ability to discuss a range of websites related topics such as design, development coding and marketing.
In order to post you will need to register for a zymic account or if you already have one simply login by using the form on the left.
 |
Zymic Webmaster Forums Web Design & DevelopmentClient Side ScriptingHTML and CSS |
 |
  |
  Oct 21 2010, 06:04 AM
Post
#1
|
|
|
Newbie  Group: Members Posts: 18 Joined: 3-August 10 From: America Member No.: 151,452  |
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 style sheets 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. |
 |
 
|
|
Apr 3 2011, 01:59 PM
Post
#2
|
|
|
Newbie Group: Members Posts: 1 Joined: 27-January 11 Member No.: 175,078 |
Thank you!
|
|
|
|
| |
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users) |
|
| 0 Members: | ||
|
Forum Jump |
|
| Lo-Fi Version | Time is now: 19th May 2013 - 08:51 PM |