HTML FIX IT.COM: swap stylesheet for different resolutions.

HTMLfixIT.com JavaScript swap stylesheet based on screen resolution tutorial.

How to swap stylesheets based on screen width using JavaScript.

1. Place the following in its entirety between the head tags of your page.

<link rel="stylesheet" type="text/css" href="css/default.css"       title="Default" />
<link rel="alternate stylesheet" type="text/css" href="css/test1.css" title="test1" />
<link rel="alternate stylesheet" type="text/css" href="css/test2.css" title="test2" />
<link rel="alternate stylesheet" type="text/css" href="css/test3.css" title="test3" />

<script type="text/javascript">
<!--
function getAllSheets() {
  //if you want ICEbrowser's limited support, do it this way
  if( !window.ScriptEngine && navigator.__ice_version ) {
    //IE errors if it sees navigator.__ice_version when a window is closing
    //window.ScriptEngine hides it from that
    return document.styleSheets; }
  if( document.getElementsByTagName ) {
    //DOM browsers - get link and style tags
    var Lt = document.getElementsByTagName('link');
    var St = document.getElementsByTagName('style');
  } else if( document.styleSheets && document.all ) {
    //not all browsers that supply document.all supply document.all.tags
    //but those that do and can switch stylesheets will also provide
    //document.styleSheets (checking for document.all.tags produces errors [WHY?!])
    var Lt = document.all.tags('LINK'), St = document.all.tags('STYLE');
  } else { return []; } //lesser browser - return a blank array
  //for all link tags ...
  for( var x = 0, os = []; Lt[x]; x++ ) {
    //check for the rel attribute to see if it contains 'style'
    if( Lt[x].rel ) { var rel = Lt[x].rel;
    } else if( Lt[x].getAttribute ) { var rel = Lt[x].getAttribute('rel');
    } else { var rel = ''; }
    if( typeof( rel ) == 'string' &&
        rel.toLowerCase().indexOf('style') + 1 ) {
      //fill os with linked stylesheets
      os[os.length] = Lt[x];
    }
  }
  //include all style tags too and return the array
  for( var x = 0; St[x]; x++ ) { os[os.length] = St[x]; } return os;
}
function changesheet() {
  for( var x = 0, ss = getAllSheets(); ss[x]; x++ ) {
    //for each stylesheet ...
    if( ss[x].title ) {
      //disable the stylesheet if it is switchable
      ss[x].disabled = true;
    }
    for( var y = 0; y < arguments.length; y++ ) {
      //check each title ...
      if( ss[x].title == arguments[y] ) {
        //and re-enable the stylesheet if it has a chosen title
        ss[x].disabled = false;
      }
    }
  }
  if( !ss.length ) { alert( 'Your browser cannot change stylesheets' ); }
}

function setsheet()
{
var screen_width = screen.width;

if (screen_width <= 640)
{ changesheet('test1'); }

if (screen_width <= 1024)
{ changesheet('test2'); }

if (screen_width > 1024)
{ changesheet('test3'); }
}
//-->
</script>

<script type="text/javascript">

</script>

2. Create the stylesheets.

Create a default stylesheet for the page, (called default.css) and then make 3 copies of it, call them test1.css, test2.css and test3.css. Edit the 3 testX stylesheets so that the first one (test1.css) is suited to resolutions at or below 640x480, the second (test2.css) to suit resolutions at or below 1024x768, and finally edit the last one so that it suits resolutions above 1024x768. Save the finished stylesheets into the same directory called css that is located in the directory containing the page you want to swap stylesheets.

3. Set the code to start when the page loads.

Replace your body tag with the following:

Congratulations!

If you did all that correctly, your page should now change stylesheets based on your screen resolution. If you want to offer people an option box by which they can select which stylesheet to run manually, here are some additional steps you should take.

Add this javascript code inside the head tags of your page.

Place this select box somewhere within your body tags.

The end result will look like this. (select one, it works.)

If you are unsure of any of the above steps, view the source code of this page as it has all the relevant bits in the relevant places.

Regards

Franki

HTMLFIXIT Spider detect link.