Freelancer.com

Go Back   Warrior Forum - The #1 Internet Marketing Forum & Marketplace > Warrior Support Forums > Website Design
Register Blogs Social Groups Advertise with usHelp Desk

Reply
LinkBack Thread Tools
Unread 7th September 2008, 10:31 AM   #1
Active Warrior
War Room Member
 
Join Date: 2008
Posts: 66
Thanks: 12
Thanked 3 Times in 3 Posts
Default 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.
Tony_D is offline   Reply With Quote
Unread 11th September 2008, 03:43 AM   #2
Active Warrior
 
Join Date: 2008
Posts: 75
Thanks: 0
Thanked 6 Times in 4 Posts
Default Re: Script to Load Different .css Depending On Screen Resolution

Nice find. thanks for sharing this!
Joshua.Taylor is offline   Reply With Quote
Unread 1st January 2009, 11:54 PM   #3
Sky Marshal
War Room Member
 
yangyang's Avatar
 
Join Date: 2007
Location: kavoir.com
Posts: 94
Blog Entries: 1
Thanks: 11
Thanked 2 Times in 2 Posts
Default 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. Presented to you by Usable Databases Co., Ltd.
yangyang is offline   Reply With Quote
Unread 13th May 2009, 06:57 AM   #4
Warrior Member
 
Join Date: 2009
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts
Default Re: Script to Load Different .css Depending On Screen Resolution

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

MichaelB23 is offline   Reply With Quote
Unread 14th May 2009, 06:08 AM   #5
HyperActive Warrior
War Room Member
 
Join Date: 2009
Posts: 137
Thanks: 33
Thanked 48 Times in 20 Posts
Default Re: Script to Load Different .css Depending On Screen Resolution

Quote:
Originally Posted by yangyang View Post
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.

Aaron Sustar is offline   Reply With Quote
Unread 14th May 2009, 06:19 AM   #6
Warrior Member
 
SEOsly's Avatar
 
Join Date: 2009
Posts: 14
Thanks: 0
Thanked 0 Times in 0 Posts
Default Re: Script to Load Different .css Depending On Screen Resolution

Quote:
Originally Posted by Aaron Sustar View Post
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.
SEOsly is offline   Reply With Quote
Unread 18th July 2009, 11:22 AM   #7
Warrior Member
 
Join Date: 2009
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default 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
alby54 is offline   Reply With Quote
Unread 25th July 2009, 09:34 PM   #8
Pacific ocean treasurer!!
War Room Member
 
Join Date: 2009
Posts: 75
Thanks: 29
Thanked 9 Times in 6 Posts
Default 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
staffelseo is offline   Reply With Quote
Unread 23rd August 2009, 01:36 AM   #9
Warrior Member
 
Join Date: 2009
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default Re: Script to Load Different .css Depending On Screen Resolution

Quote:
Originally Posted by alby54 View Post
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.
CBrowne is offline   Reply With Quote
Unread 24th August 2009, 06:00 PM   #10
Warrior Member
 
Join Date: 2009
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default 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.
alby54 is offline   Reply With Quote
Unread 24th August 2009, 10:25 PM   #11
HyperActive Warrior
 
kendrickyi's Avatar
 
Join Date: 2009
Location: Singapore
Posts: 222
Thanks: 18
Thanked 10 Times in 9 Posts
Default 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!
kendrickyi is offline   Reply With Quote
Unread 12th May 2010, 08:19 PM   #12
Warrior Member
 
Join Date: 2010
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default 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.
tjk29 is offline   Reply With Quote
Unread 14th September 2010, 02:15 AM   #13
Warrior Member
 
Join Date: 2010
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Default 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!
spring2010 is offline   Reply With Quote
Unread 6th July 2011, 11:28 AM   #14
Warrior Member
 
Join Date: 2011
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default 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!
qualitymove13 is offline   Reply With Quote
Unread 19th January 2012, 10:14 PM   #15
Warrior Member
 
Join Date: 2012
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default 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

sandywony is offline   Reply With Quote
Unread 20th January 2012, 10:44 AM   #16
TKT Consulting
 
Join Date: 2012
Location: Asheville, NC
Posts: 11
Thanks: 0
Thanked 1 Time in 1 Post
Default Re: Script to Load Different .css Depending On Screen Resolution

Use CSS media tag for responsive site designs
kl2000 is offline   Reply With Quote
Unread 20th January 2012, 10:49 AM   #17
TKT Consulting
 
Join Date: 2012
Location: Asheville, NC
Posts: 11
Thanks: 0
Thanked 1 Time in 1 Post
Default 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%;
}

}
kl2000 is offline   Reply With Quote
Unread 20th January 2012, 11:06 AM   #18
HyperActive Warrior
 
Join Date: 2012
Posts: 105
Thanks: 10
Thanked 10 Times in 8 Posts
Default 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
retroid is offline   Reply With Quote
Unread 21st March 2012, 09:43 AM   #19
Talashme
 
talashme's Avatar
 
Join Date: 2012
Posts: 34
Thanks: 1
Thanked 2 Times in 2 Posts
Default Re: Script to Load Different .css Depending On Screen Resolution

Thank you, its really save my time
talashme is offline   Reply With Quote
Reply

  Warrior Forum - The #1 Internet Marketing Forum & Marketplace > Warrior Support Forums > Website Design

Bookmarks

Tags
css, depending, javascript, load, resolution, screen, script, stylesheet

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




All times are GMT -6. The time now is 01:25 PM.