kelvinluck.com

a stroke of luck

Switch stylesheets with jQuery

Update: I’ve released an updated version of this code which is more flexible. Please check it out.

I’ve just discovered jQuery which is an awesome JavaScript library. From the horse’s mouth:
jQuery is a Javascript library that takes this motto to heart: Writing Javascript code should be fun. jQuery acheives this goal by taking common, repetitive, tasks, stripping out all the unnecessary markup, and leaving them short, smart and understandable.
As an example of how succinct and easy code written with jQuery can be I put together a little example that allows you to add a stylesheet switcher to your site. Check out the example in action.

The stylesheet switcher allows your visitors to choose which stylesheet they would like to view your site with. It uses cookies so that when they return to the site or visit a different page they still get their chosen stylesheet.

The JavaScript code that powers the example looks like this:

/**
* Styleswitch stylesheet switcher built on jQuery
* Under an Attribution, Share Alike License
* By Kelvin Luck ( http://www.kelvinluck.com/ )
**/


(function($)
{
   $(document).ready(function() {
      $('.styleswitch').click(function()
      {
         switchStylestyle(this.getAttribute("rel"));
         return false;
      });
      var c = readCookie('style');
      if (c) switchStylestyle(c);
   });

   function switchStylestyle(styleName)
   {
      $('link[@rel*=style][title]').each(function(i)
      {
         this.disabled = true;
         if (this.getAttribute('title') == styleName) this.disabled = false;
      });
      createCookie('style', styleName, 365);
   }
})(jQuery);

Then all you need to do is to add a class of “styleswitch” to any links that you want to activate the stylesheet switcher and a “rel” attribute which corresponds to the “title” attribute of the link tag embedding the stylesheet you want to switch to. Just view the source of the example and all should become clear…

I’d appreciate any feedback on the effectiveness of this technique. I think it should work fine on any browser that jQuery supports (I’ve tested on IE5.5, IE6 and FF1.5 on XP and Safari on OSX). It should degrade gracefully by going to the href of the link when jQuery isn’t supported or JavaScript is disabled. I have linked to a page which suggests possible ways to deal with this situation (disable JavaScript and try and switch stylesheets on the example to see the page).

If you would like to use this code then please feel free to download the zip

14 Comments, Comment or Ping

  1. Chris

    Hello, and thank you very much for that great and light piece of code !
    I have a question : if the webpage calls more than one stylesheet, is it possible to switch to all alternate relative stylesheets ? If yes, how do I do that ?
    (hoping my english is not too bad so that you can understand my question !)
    Thank you in advance for your response

    June 5th, 2014

  2. nice switcher thanks a lot..

    June 21st, 2014

  3. Hi

    First let me thanks about your exellent documentation.

    My question is about background color when using switch-stylecheet. In fact
    whenI use
    background:-webkit-linear-gradient(top, #4bbb4b 0%,#220002 75%);

    The switching work nice either in IE, chrom, Opera but not in firefox

    I hope that I'am wrong but needs some help

    Thanks

    July 11th, 2014

Reply to “Switch stylesheets with jQuery”