jStyler

  • February 8 2008
  • A
  • B
  • C

Instructions to Use


1. Link the script files

Link all the necessary Javascript files.

<script type="text/javascript" src="jquery-1.2.2.min.js></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="switcher.js"></script>

2. Set up stylesheets

First, list out all the stylesheets you would like to include in your site. All except the default stylesheet gets an additional "alternate" attribute in the rel attribute. Add a title to each stylesheet. This will be the identifier for your stylesheet.

<link rel="stylesheet" type="text/css" href="screen.css" title="A" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="screen2.css" title="B" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="screen3.css" title="C" media="screen" />

3. Set up your style switcher

This is what will invoke the stylesheets. For the sake of presentation, I am using color blocks as my switcher. You can use any other forms of HTML elements to create the switcher.

The selected stylesheet will be indicated using a css class on appropriate a tag using a classname of "on".

<ul id="switcher">
   <li><a href="#A"><img src="images/A.gif" alt="A" /></a></li>
   <li><a href="#B"><img src="images/B.gif" alt="B" /></a></li>
   <li><a href="#C"><img src="images/C.gif" alt="C" /></a></li>

</ul>

4. Lastly, call the function

The last thing you need to do is call up the function. That is all.

<script type="text/javascript">
	jQuery(document).ready(function() {
	$('#switcher').switcher();
});
</script>

5. What if I have a stylesheet that always has to be active?

You might want to use a global css file that contains all repeating code and would like to not repeat it in each stylesheet. Well, don't worry. All you would have to do is place the file or files on top before the switcher stylesheets and do not give it a title (this is important).

<link rel="stylesheet" type="text/css" href="reset.css"  media="screen" />
<link rel="stylesheet" type="text/css" href="screen.css" title="A" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="screen2.css" title="B" media="screen" />

<link rel="alternate stylesheet" type="text/css" href="screen3.css" title="C" media="screen" />

Things to note

  • Remember Javascript is case sensitive. So, make sure you use the same case for your title in the stylesheet link attribute and the the link's href.
  • This is a cookie based style switcher. Once a stylesheet is selected, it will use that stylesheet until the cookie is removed.