10 Replies Latest reply on Dec 27, 2012 7:11 AM by show4max

    Help with changing CSS based on monitor resolution

    Tim629

      Hello!

       

      So I thought it would be cool to have some kind of javascript that would change the CSS based on what the users monitor resolution was.  I went searching around google and found this:

       

      http://www.warriorforum.com/website-design/10031-script-load-different-css-depending-scree n-resolution.html

       

      Modifying what I needed to I came up with this 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>


      So far the following resolutions work:

      800x600

      1360x768

      1440x900

       

      But resolutions

      1024x768

      1152x648

      1152x864

      1280x720
      1280x768
      1280x800
      1280x900

       

      Do not.  They all have a site that is too big.  My CSS for those resolutions (1024 and 1280) are fine and have no problems.  So I'm guessing something is wrong with my JS.  I am no expert in JS so I hope I did not mess something up.

       

      Any help would be appreciated.

       

      Thanks