Script to Load Different .css Depending On Screen Resolution

by Tony_D 19 replies
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.
#website design #css #depending #javascript #load #resolution #screen #script #stylesheet
Avatar of Unregistered
  • Profile picture of the author Joshua.Taylor
  • Profile picture of the author yangyang
    That is a really great script. However if you could do it server side, it'd be better!

    Thanks!
    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.

  • Profile picture of the author 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
    • Profile picture of the author CBrowne
      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.
  • Profile picture of the author staffelseo
    so if the resolution is different it will load a differend .css WOW that is pretty cool, this is a real problem solver thanks
  • Profile picture of the author alby54
    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.
  • Profile picture of the author kendrickyi
    Thanks Tony D for the code! It's real helpful!
    Signature

    "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!

    • Profile picture of the author pmorrison2588
      Banned
      [DELETED]
    • Profile picture of the author tjk29
      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.
  • Profile picture of the author hacker9
    Banned
    [DELETED]
  • Profile picture of the author sandywony
    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
  • Profile picture of the author kl2000
    Use CSS media tag for responsive site designs
  • Profile picture of the author kl2000
    Example media query

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

    #container {
    width: 94%;
    }

    #content {
    width: 65%;
    }

    #sidebar {
    width: 30%;
    }

    }

Trending Topics