Pure jQuery Style Switcher

Welcome to the demonstration page for the Pure jQuery Style Switcher written by Scott Brooks at UserFirst Interactive. The reason I created the Pure jQuery Style Switcher is because the most style switchers out there were PHP based and I wanted something that could be used that only required jQuery.

Here's the code

HTML code:

style: <a id="switchToBlueAnchor" href="#"><img src="images/style_blue.jpg" border="0"></a> <a id="switchToRedAnchor" href="#"><img src="images/style_red.jpg" border="0"></a>

jQuery code:

function setStyle(myStyle) {
	if (myStyle == "red"){
		$('#created-by').attr("src","/pure-jquery-style-switcher/images/a-userfirst-website-red.jpg");
		$("body a").css("color", "#983220");
		$("pre").css("border", "2px dashed #983220");
		$("pre").css("border-left", "20px solid #983220");
	}
	else{  // blue
		$('#created-by').attr("src","/pure-jquery-style-switcher/images/a-userfirst-website-blue.jpg");
		$("body a").css("color", "#607e99");
		$("pre").css("border", "2px dashed #607e99");
		$("pre").css("border-left", "20px solid #607e99");
	}
}

function setCookie(choosenStyle) {
	// javascript set
	$.cookie('style', null); 			// clear cookie
	$.cookie('style', choosenStyle); 	// set cookie
}


$(document).ready(function() {
	// stylesheet setup
	var headID = document.getElementsByTagName("head")[0];
	var cssNode = document.createElement('link');
	cssNode.type = 'text/css';
	cssNode.rel = 'stylesheet';

	var style_color = $.cookie('style');
	if (style_color != undefined) {
		cssNode.href = 'css/' + style_color + '.css';
	} else {
		cssNode.href = 'css/blue.css';
		style_color = "blue";
	}
	cssNode.media = 'screen';
	headID.appendChild(cssNode);
	// set style for the image src.  Not required unless you are setting an image dynamically, like we do here.
	setStyle(style_color);

	// click actions
	$("#switchToBlueAnchor").click(function()
	{
    	setStyle("blue");
    	setCookie("blue");
	});

	$("#switchToRedAnchor").click(function()
	{
    	setStyle("red");
		setCookie("red");
	});

});

Download

Plugin

Requires the Cookie Plugin for jQuery written by Klaus Hartl (included)

Download the demo here.

Questions? Comments?

We'd love to hear from you! Visit our blog and let us know what you think of our creations!