about:jerone

Intro

For my site I made 2 different themes and because I couldn't choose which theme to use, I added both.
Because switching between multiple stylesheets isn't initialy support in every browser, I had to have a cross browser solution.
That's why I created StyleSheetSwitcher...

This script let's users switch between multiple stylesheets, with the ease of one click.

The whole script is written as a jQuery plugin and has support for other useful plugins.

Some of the features are:

• Adds a simple list of selectable stylesheets.
• One click for changing.
• Multiple stylesheets are supported.
• Exclution of stylesheets is possible. For example a stylesheet for common styles.
• Possible to translate used text.
• Support for events.
• By supporting the jQuery Cookie plugin, selecting a stylesheet is remembered.
• No style is added in the script itself, so all is fully changable with CSS.
• Cross browser. Tested working in all major browsers: Internet Explorer 6 - 8, Firefox 1 - 3.5, Opera 9 & 10, Chrome 1 - 3 and Safari 4. It should work with newer browsers and may work with older browsers, no promise until tested.

Example

Click here to open another page for an example.

Options

• StyleSheetSwitcher	Datatype:	jQuery plugin	Default:	-
  	Returns:	jQuery	Status:	Optional

  Description: The function to make style switching possible.
  Example:

  jQuery("#test").stylesheetswitcher();

  Arguments:

  • options	Datatype:	Object	Default:	-
    	Returns:	-	Status:	Optional

    Description: Some optional options for more features.
    Example:

    jQuery("#test").stylesheetswitcher({
    	defaultItem: "Hot Coals",
    	onSwitch: function(title){
    		jQuery(this).fadeTo("fast", 0.1).fadeTo("fast", 1);
    	}
    });

    Options:

    • defaultItem	Datatype:	String / Integer	Default:	0
      	Returns:	-	Status:	Optional

      Description: The begin stylesheet. Value must match title or ordered zero-based number.
      Example:-

    • classInclude	Datatype:	String	Default:	-
      	Returns:	-	Status:	Optional

      Description: Only include stylesheets that contains this class.
      Example:-

    • classExclude	Datatype:	String	Default:	-
      	Returns:	-	Status:	Optional

      Description: Exclude stylesheets that contains this class.
      Example:-

    • classCurrent	Datatype:	String	Default:	"current"
      	Returns:	-	Status:	Optional

      Description: Class to indicate current selected stylesheet.
      Example:-

    • title	Datatype:	String	Default:	"Change page style to {name}"
      	Returns:	-	Status:	Optional

      Description: Title of the links in menu.
      The part {name} will be overridden by the name of the stylesheet.
      Example:-

    • cookie	Datatype:	Boolean	Default:	True
      	Returns:	-	Status:	Optional

      Description: To remember the selected stylesheet, support is added for the jQuery Cookie plugin to save it's state.
      
      Example:-

    • onSwitch	Datatype:	Event	Default:	-
      	Returns:	-	Status:	Optional

      Description: Function executed when switched from stylesheet.
      Using this within the function refers to the selected item in the list.
      The title of the selected stylesheet is given trough the first argument in the function.
      Example:

      onSwitch: function(title){
      	jQuery(this).fadeTo("fast", 0.1).fadeTo("fast", 1);
      	alert("You have selected: " + title);
      }

      Arguments:

      • this	Datatype:	jQuery	Default:	-
        	Returns:	jQuery	Status:	Optional

        Description: Returns the clicked item in the menu.
        Example:-

      • title	Datatype:	String	Default:	-
        	Returns:	String	Status:	Optional

        Description: Returns the name of the selected stylesheet.
        Example:-

Usage

Place the following code in the head of your page.

<!-- StyleSheets -->
<link type="text/css" rel="stylesheet" href="styleA.css" title="Style A" />
<link type="text/css" rel="stylesheet" href="styleB.css" title="Style B" />
<link type="text/css" rel="stylesheet" href="common.css" />

<!-- Mandatory JavaScript files -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery-stylesheetswitcher.js"></script>
<!-- Optional plugins -->
<script type="text/javascript" src="jquery-cookie.js"></script>

<!-- StyleSheetSwitcher definition -->
<script type="text/javascript">
	jQuery(function() {
		jQuery("#test").styleSheetSwitcher({
			defaultItem: "Style B"
		});
	});
</script>

The StyleSheetSwitcher plugin must be called after the document is loaded.

Please note that the title in the stylesheet is mandatory!
If you don't set a title the stylesheet will be ignored.

Another way to exclude a stylesheet is using the classExclude option and set that class for the stylesheet.

Download

A zip archive for this plugin is available here: jquery-stylesheetswitcher-1.0.1.zip (size: 6kb).

The zip archive contains the following files:

• jquery-stylesheetswitcher.js - actual plugin (size: 2kb).
• jquery-stylesheetswitcher-min.js - minified plugin version (size: 1kb).
• jquery-stylesheetswitcher-vsdoc.js - VSDoc documentation file (size: 3kb).
• jquery-stylesheetswitcher.html - clean example page (size: 3kb).
• styleA.css - test stylesheet A (size: 1kb).
• styleB.css - test stylesheet B (size: 1kb).
• common.css - global stylesheet (size: 1kb).

Changelog

• version 1.0.1 (20-7-2009):
  • Added minified script version;
• version 1.0 (1-7-2009):
  • Initial release;

FAQ

Which versions of jQuery is this plugin compatible with?
This plugin is compatible with jQuery 1.3 and higher.

Which browsers is this plugin compatible with?
Tested working in Internet Explorer 6 - 8, Firefox 1 - 3.5, Opera 9 & 10, Chrome 1 - 3 and Safari 4. It should work with newer browsers and can work with older browsers, no promise until tested.

Does the plugin work with any other plugins?
StyleSheetSwitcher has integrated support for jQuery Cookie plugin.

Is there a VSDoc file available for this plugin?
Yes, there's a VSDoc file available on the download page.

What is VSDoc?
VSDoc is documentation format for Visual Studio. By using this file information is added to JavaScript Intellisense. This is only available in VS2008.

Todo

• ...