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).

Demo:

http://www.kelvinluck.com/assets/jquery/styleswitch/

Download:

http://www.kelvinluck.com/mint/pepper/orderedlist/downloads/download.php?file=http%3A//www.kelvinluck.com/assets/jquery/styleswitch/styleswitch.zip

Source:

http://www.kelvinluck.com/2006/05/switch-stylesheets-with-jquery

Related Listings:

1. Time Sensitive CSS Switcher When I set out to redesign this site, I had...
2. TimePicker Script with jQuery Plugin A time picker for jQuery. list version | table version....
3. Form With Style – Ajax Script Forms are not very friendly when it comes to CSS...
4. jQuery Date Picker Script This is an clean, unobtrusive plugin for jQuery which allows...
5. Facebook Style Alert Confirm Box with jQuery and CSS I received a request from my reader that asked to...

Do you like this post?

Email: