Script to Load Different .css Depending On Screen Resolution

Tony_D · 09-07-2008, 11:31 AM

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.

Joshua.Taylor · 09-11-2008, 04:43 AM

Nice find. thanks for sharing this!

yangyang · 01-01-2009, 11:54 PM

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

Thanks!

MichaelB23 · 05-13-2009, 07:57 AM

Wow great thanks!!! Been looking for this all over.

Aaron Sustar · 05-14-2009, 07:08 AM

Quote:

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.

SEOsly · 05-14-2009, 07:19 AM

Quote:

Originally Posted by Aaron Sustar

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.

Quoted for truth.

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

alby54 · 07-18-2009, 12:22 PM

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

staffelseo · 07-25-2009, 10:34 PM

so if the resolution is different it will load a differend .css WOW that is pretty cool, this is a real problem solver thanks

CBrowne · 08-23-2009, 02:36 AM

Quote:

Originally Posted by alby54

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

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.

alby54 · 08-24-2009, 07:00 PM

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.

kendrickyi · 08-24-2009, 11:25 PM

Thanks Tony D for the code! It's real helpful!

tjk29 · 05-12-2010, 09:19 PM

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.

spring2010 · 09-14-2010, 03:15 AM

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!

qualitymove13 · 07-06-2011, 12:28 PM

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!

sandywony · 01-19-2012, 10:14 PM

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

kl2000 · 01-20-2012, 10:44 AM

Use CSS media tag for responsive site designs

kl2000 · 01-20-2012, 10:49 AM

Example media query

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

#container {
width: 94%;
}

#content {
width: 65%;
}

#sidebar {
width: 30%;
}

}

retroid · 01-20-2012, 11:06 AM

^ nice mate

read more about responsive design with media query here
Responsive Design with CSS3 Media Queries

09-07-2008, 11:31 AM	#1
Tony_D Active Warrior War Room Member Join Date: Jun 2008 Posts: 96 Blog Entries: 1 Thanks: 12 Thanked 2 Times in 2 Posts	Script to Load Different .css Depending On Screen Resolution 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.

09-11-2008, 04:43 AM	#2
Joshua.Taylor Active Warrior Join Date: Aug 2008 Posts: 76 Thanks: 0 Thanked 6 Times in 4 Posts	Re: Script to Load Different .css Depending On Screen Resolution Nice find. thanks for sharing this!

01-01-2009, 11:54 PM	#3
yangyang Sky Marshal War Room Member Join Date: Jun 2007 Location: kavoir.com Posts: 84 Blog Entries: 1 Thanks: 10 Thanked 2 Times in 2 Posts Social Networking	Re: Script to Load Different .css Depending On Screen Resolution That is a really great script. However if you could do it server side, it'd be better! Thanks!
	MySQL Content Databases - yellow pages, world hotels, lawyers, realtors, amazon books, golf courses, colleges, famous quotes, auto parts, dictionary, etc.

05-13-2009, 07:57 AM	#4
MichaelB23 Warrior Member Join Date: May 2009 Posts: 7 Thanks: 0 Thanked 0 Times in 0 Posts	Re: Script to Load Different .css Depending On Screen Resolution Wow great thanks!!! Been looking for this all over.
	Bodybuilding Quotes - Play Pacman Online Bodybuilding.com Coupon Codes - CashCrate - Swine Flu Symptoms

07-18-2009, 12:22 PM	#7
alby54 Warrior Member Join Date: Jul 2009 Posts: 2 Thanks: 0 Thanked 0 Times in 0 Posts	Re: Script to Load Different .css Depending On Screen Resolution 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

07-25-2009, 10:34 PM	#8
staffelseo Pacific ocean treasurer!! War Room Member Join Date: Jul 2009 Posts: 60 Thanks: 17 Thanked 6 Times in 4 Posts	Re: Script to Load Different .css Depending On Screen Resolution so if the resolution is different it will load a differend .css WOW that is pretty cool, this is a real problem solver thanks

08-24-2009, 07:00 PM	#10
alby54 Warrior Member Join Date: Jul 2009 Posts: 2 Thanks: 0 Thanked 0 Times in 0 Posts	Re: Script to Load Different .css Depending On Screen Resolution 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.

08-24-2009, 11:25 PM	#11
kendrickyi HyperActive Warrior Join Date: Aug 2009 Location: Singapore Posts: 226 Thanks: 18 Thanked 10 Times in 9 Posts Social Networking	Re: Script to Load Different .css Depending On Screen Resolution Thanks Tony D for the code! It's real helpful!
	"My Affiliate Marketing Mini Course To Help You Start An Affiliate Marketing Business That Could Generate Passive Affiliate Income For You Every Month, Even If You Are An Internet Newbie!" Unlock The Secrets To Wealth Now!

05-12-2010, 09:19 PM	#12
tjk29 Warrior Member Join Date: May 2010 Posts: 1 Thanks: 0 Thanked 0 Times in 0 Posts	Re: Script to Load Different .css Depending On Screen Resolution 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.

09-14-2010, 03:15 AM	#13
spring2010 Warrior Member Join Date: Sep 2010 Posts: 3 Thanks: 0 Thanked 0 Times in 0 Posts	Re: Script to Load Different .css Depending On Screen Resolution 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!

07-06-2011, 12:28 PM	#14
qualitymove13 Warrior Member Join Date: Jul 2011 Posts: 1 Thanks: 0 Thanked 0 Times in 0 Posts	Re: Script to Load Different .css Depending On Screen Resolution 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!

01-19-2012, 10:14 PM	#15
sandywony Warrior Member Join Date: Jan 2012 Posts: 1 Thanks: 0 Thanked 0 Times in 0 Posts	Re: Script to Load Different .css Depending On Screen Resolution 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
	web design uae

01-20-2012, 10:44 AM	#16
kl2000 TKT Consulting Join Date: Jan 2012 Location: Asheville, NC Posts: 6 Thanks: 0 Thanked 1 Time in 1 Post Social Networking	Re: Script to Load Different .css Depending On Screen Resolution Use CSS media tag for responsive site designs

01-20-2012, 10:49 AM	#17
kl2000 TKT Consulting Join Date: Jan 2012 Location: Asheville, NC Posts: 6 Thanks: 0 Thanked 1 Time in 1 Post Social Networking	Re: Script to Load Different .css Depending On Screen Resolution Example media query /* for 980px or less browser width */ @media screen and (max-width: 980px) { #container { width: 94%; } #content { width: 65%; } #sidebar { width: 30%; } }

01-20-2012, 11:06 AM	#18
retroid Active Warrior Join Date: Jan 2012 Posts: 51 Thanks: 1 Thanked 3 Times in 3 Posts	Re: Script to Load Different .css Depending On Screen Resolution ^ nice mate read more about responsive design with media query here Responsive Design with CSS3 Media Queries