How To Create An Amazing jQuery Style Switcher
Aug 26th in Javascript & AJAX by James Padolsey
In this tutorial I will be showing you how to create a style switcher using jQuery and PHP. The end result will be an unobtrusive & entirely degradable dynamic style switcher which will be quick and easy to implement.
Step 1: The HTML
First, we need to create our basic HTML file and save it as index.php:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Style Switcher</title>
<?php
// Checks for, and assigns cookie to local variable:
if(!empty($_COOKIE['style'])) $style = $_COOKIE['style'];
// If no cookie is present then set style as "day" (default):
else $style = 'day';
?>
<!-- StyleSheet -->
<link id="stylesheet" type="text/css" href="css/<?php echo $style ?>.css" rel="stylesheet" />
<!-- jQuery -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- Our plugin -->
<script type="text/javascript" src="js/styleswitcher.jquery.js"></script>
</head>
<body>
<div id="container">
<h1>Style-Switcher Example</h1>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="banner"></div>
<div id="content">
<h2>NETTUTS Tutorial Example</h2>
<p>Page content...</p>
</div>
<div id="foot">
<p>Footer stuff...</p>
</div>
<!-- StyleSheet selection: -->
<div id="style-switcher">
<h4>Choose your style:</h4>
<ul>
<li id="day"><a href="style-switcher.php?style=day">Day</a></li>
<li id="night"><a href="style-switcher.php?style=night">Night</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
$('#style-switcher a').styleSwitcher(); // Calling the plugin...
</script>
</body>
</html>
You'll see that there is some PHP up there just below the title attribute in the head. It's very simple - all it does is check for a cookie called "style" - if it exists then it assigns it to the local variable (also called "style") and if the cookie doesn't exist, it assigns the default theme ("day") to the $style variable. This variable is then echoed out within the href attribute of the link element (href="css/<?php echo $style ?>.css").
You'll see that the style-switcher div is included above in our HTML. There is no need to add this using JavaScript because the method we're using will allow the style-switcher to work when JavaScript is disabled. The two links (night & day) take the user to a file called style-switcher.php with an appended query string specifying the corresponding theme (e.g. href="style-switcher.php?style=day").
I've also called the a jQuery plugin called styleSwitcher. This has not been developed yet (well, it will have by the time you read this), so hold on! ... We will be writing this plugin in step 4 of this tutorial.
Step 2: The CSS
Now, we need to create a couple of CSS StyleSheets for our HTML. I've decided to create just two StyleSheets - one will have the theme of "Day" and the other will have the theme of "Night" and I've named them appropriately. (day.css & night.css)The Day theme:
The Night theme:
day.css:
#dummy-element{width:2px;} /* Necessary to check if StyleSheet has loaded */
/* Quick Reset */
body,ul,ol,li,img,form,p,h1,h2,h3,h4,h5,h6,blockquote {
margin: 0;
padding: 0;
border: none;
list-style: none;
font-weight: normal;
}
/* General / Header */
body {background: #98beeb url(../img/day-body-bg.jpg) repeat-x; }
#container {
width: 60%;
margin: 0 auto;
min-width: 400px;
max-width: 800px;
position: relative;
}
h1 {
text-align: left;
text-transform: uppercase;
color: white;
font-size: 1.4em;
padding: 45px 30px 10px 30px;
}
/* Navigation */
#nav {
padding: 5px 5px 0 0;
overflow: hidden;
}
#nav li {display: inline;}
#nav a {
float: left;
color: #6195ce;
font-weight: bold;
text-decoration: none;
padding: 3px 6px;
margin-left: 5px;
background: white;
}
#nav a:hover {color: #2c5a8c;}
/* Banner */
#banner {
height: 125px;
background: url(../img/day-banner.jpg) center;
border: 5px solid white;
clear: both;
}
/* Content Area */
#content {
border: 10px solid white;
background: white;
color: #2c5a8c;
margin: 5px 0;
}
#content a {font-weight: bold;}
#content a:hover {text-decoration: underline;}
h2 {
padding: 0.3em 0;
font-size: 1.4em;
}
p {padding: 0.3em 0;}
/* Footer */
#foot {
background: white;
color: #1f3a57;
text-align: center;
border: 10px solid white;
clear: both;
}
#foot a {
text-decoration: none;
font-weight: bold;
color: #2c5a8c;
}
#foot a:hover {text-decoration: underline;}
/* Style-Switcher */
#style-switcher {
position: absolute;
width: 100%;
top: 0;
left: 0;
right: 0;
height: 34px;
background: #79a3cc url(../img/day-ss-bg.jpg);
border-bottom: 1px solid white;
}
#style-switcher ul {
border-right: 1px solid white;
float: right;
}
#style-switcher h4 {
display: inline;
color: #153c67;
font-weight: bold;
line-height: 34px;
padding: 0 10px;
float: left;
border-left: 1px solid white;
}
#style-switcher li {display: inline;}
#style-switcher li a {
float: left;
line-height: 26px;
color: white;
background: #90a6bb;
text-decoration: none;
padding: 0 13px;
display: inline;
margin: 4px 4px 4px 0;
}
#style-switcher li a:hover {background: #3a5a7c;}
night.css:
#dummy-element{width:2px;} /* Necessary to check if StyleSheet has loaded */
/* Quick Reset */
body,ul,ol,li,img,form,p,h1,h2,h3,h4,h5,h6,blockquote {
margin: 0;
padding: 0;
border: none;
list-style: none;
font-weight: normal;
}
/* General / Header */
body {
font-family: Calibri,"Arial Narrow",Arial,Sans-Serif;
background: #072952 url(../img/night-body-bg.jpg) repeat-x;
}
#container {
width: 60%;
margin: 0 auto;
min-width: 400px;
max-width: 800px;
position: relative;
}
h1 {
text-align: left;
text-transform: uppercase;
color: white;
font-size: 1.4em;
padding: 45px 30px 10px 30px;
font-family: "Times New Roman", Times, serif;
}
/* Navigation */
#nav {
padding: 5px 5px 0 0;
overflow: hidden;
}
#nav li {display: inline;}
#nav a {
float: left;
color: #010e2e;
font-weight: bold;
text-decoration: none;
padding: 8px 6px 3px 6px;
font-size: 0.8em;
text-transform: uppercase;
font-weight: 700;
margin-left: 5px;
background: white url(../img/night-nav-bg2.jpg) repeat-x;
}
#nav a:hover {color: #2c5a8c;}
/* Banner */
#banner {
height: 125px;
background: url(../img/night-banner.jpg) center;
border: 5px solid white;
clear: both;
}
/* Content Area */
#content {
color: white;
margin: 20px 0;
padding: 5px 0;
border-top: 4px double white;
border-bottom: 4px double white;
font-family: "Times New Roman", Times, serif;
}
#content a {font-weight: bold;}
#content a:hover {text-decoration: underline;}
h2 {
padding: 0.3em 0;
font-size: 1.4em;
}
p {padding: 0.3em 0;}
/* Footer */
#foot {
color: white;
font-size: 0.8em;
clear: both;
}
#foot p {
text-align: center;
padding: 0;
}
#foot a {
text-decoration: none;
font-weight: bold;
color: white;
}
#foot a:hover {text-decoration: underline;}
/* Style-Switcher */
#style-switcher {
position: absolute;
width: 100%;
top: 0;
left: 0;
right: 0;
height: 34px;
}
#style-switcher ul {float: left;}
#style-switcher h4 {
display: inline;
color: white;
font-weight: bold;
line-height: 34px;
padding: 0 10px;
float: left;
}
#style-switcher li {display: inline;}
#style-switcher li a {
float: left;
line-height: 34px;
color: white;
text-decoration: none;
padding: 0 4px;
margin-left: 5px;
display: inline;
}
#style-switcher li a:hover {
background: white;
color: #13181c;
background: white url(../img/night-ss-bg.jpg) repeat-x left bottom;
}
This is not really a CSS tutorial so I won't be delving into any of the above, but if you have any questions then please feel free to ask them in the comments section. And yes, I know that min-width is not supported in older browsers! ;)
Step 3: style-switcher.php
This is where we write the core functionality of the style switcher. It is actually just a few lines of very basic PHP code. You should create a new file called "style-switcher.php" and copy the following into it:<?php
$style = $_GET['style'];
setcookie("style", $style, time()+604800); // 604800 = amount of seconds in one week
if(isset($_GET['js'])) {
echo $style;
} else {
header("Location: ".$_SERVER['HTTP_REFERER']);
}
?>
So, what the above code does is assign the "style" GET variable to a local $style variable. In other words it will take the value of the style property within the query string (style-switcher.php?style=day). It then sets a cookie (for one week) called "style" - we will be able to retrieve this cookie on our main index.php with the code shown in step 1 (remember that little chunk of PHP in the head?). Next, it checks to see if "js" is appended to the query string. If it is then we know that JavaScript (which we have yet to write) has requested this PHP script. The else condition occurs when a user does not have JavaScript enabled and redirects the user to the referrer (i.e. the page they just came from) - this will become clearer once we've written the jQuery stuff!
Step 4: The jQuery stuff
You can, if you want, stop right here!... The solution thus far will work perfectly, but as I stated in the intro we are going to make it even cooler with some jQuery awesomeness! Not only are we going to allow the user to change their theme without refreshing the page but we are also going to add a really cool fading effect... I mean, what type of jQuery tutorial would this be if there was no fading!?!? Obviously this is all possible without having to create a plugin but I thought it would be a good learning experience for all you, plus it allows us to adapt or transfer the code quickly and easily. First off, let's create a file called "styleswitcher.jquery.js". Making a new plugin in jQuery is extremely simple; all it takes is the following code:jQuery.fn.styleSwitcher = function(){
// The code goes here...
}
So, first we want to specify what happens when one of the StyleSheet links are clicked on (those within div#style-switcher):
/* "this" refers to each instance of the selected element,
* So, if you were to call the plugin like this:
* $('a').styleSwitcher(); then the following would occur
* when clicking on any anchor within the document:
*/
$(this).click(function(){
// We're passing this element object through to the
// loadStyleSheet function.
loadStyleSheet(this);
// And then we're returning false.
return false;
});
loadStyleSheet:
Now we need to write theloadStyleSheet function:
function loadStyleSheet(obj) {
// Append new div to body:
$('body').append('<div id="overlay" />');
// Give body a height of 100% (to fix IE6 issue):
$('body').css({height:'100%'});
// Select newly created div and apply some styles:
$('#overlay')
.css({
display: 'none',
position: 'absolute',
top:0,
left: 0,
width: '100%',
height: '100%',
zIndex: 1000,
background: 'black url(img/loading.gif) no-repeat center'
})
// Now fade in the div (#overlay):
.fadeIn(500,function(){
// The following will happen when the div has finished fading in:
// Request PHP script (obj.href) with appended "js" query string item:
$.get( obj.href+'&js',function(data){
// Select link element in HEAD of document (#stylesheet) and change href attribute:
$('#stylesheet').attr('href','css/' + data + '.css');
// Check if new CSS StyleSheet has loaded:
cssDummy.check(function(){
// When StyleSheet has loaded, fade out and remove the #overlay div:
$('#overlay').fadeOut(500,function(){
$(this).remove();
});
});
});
});
}
I hope the comments explained it sufficiently. The more attentive of you will have noticed that we are calling a currently undefined function (cssDummy.check()). Don't worry because that is the next step...
cssDummy:
We need a way of testing whether a StyleSheet has loaded. If it has loaded then we can make the overlay div disappear, but if it hasn't we have to keep on checking until it does load. I did a bit of searching around the net and found a reliable way of testing such a thing. It involves testing for the computed width of a dummy element. The width of this element will be defined in the CSS - and so the computed width of the element will only equal the width defined in the CSS when the StyleSheet has loaded. I hope you now understand why we had to include that "#dummy-element" rule in each CSS file... So, here it is:var cssDummy = {
init: function(){
// Appends "dummy-element" div to body:
$('<div id="dummy-element" style="display:none" />').appendTo('body');
},
check: function(callback) {
// Checks if computed with equals that which is defined in the StyleSheets (2px):
if ($('#dummy-element').width()==2) callback();
// If it has not loaded yet then simple re-initiate this
// function every 200 milliseconds until it had loaded:
else setTimeout(function(){cssDummy.check(callback)}, 200);
}
}
And, right at the end of our plugin we're going to call the cssDummy.init function:
cssDummy.init();We're done! The entire plugin now looks like this:
jQuery.fn.styleSwitcher = function(){
$(this).click(function(){
loadStyleSheet(this);
return false;
});
function loadStyleSheet(obj) {
$('body').append('<div id="overlay" />');
$('body').css({height:'100%'});
$('#overlay')
.css({
display: 'none',
position: 'absolute',
top:0,
left: 0,
width: '100%',
height: '100%',
zIndex: 1000,
background: 'black url(img/loading.gif) no-repeat center'
})
.fadeIn(500,function(){
$.get( obj.href+'&js',function(data){
$('#stylesheet').attr('href','css/' + data + '.css');
cssDummy.check(function(){
$('#overlay').fadeOut(500,function(){
$(this).remove();
});
});
});
});
}
var cssDummy = {
init: function(){
$('<div id="dummy-element" style="display:none" />').appendTo('body');
},
check: function(callback) {
if ($('#dummy-element').width()==2) callback();
else setTimeout(function(){cssDummy.check(callback)}, 200);
}
}
cssDummy.init();
}
We can now call the jQuery plugin like this:
$('#style-switcher a').styleSwitcher();
Finished!
If you're not sure about the file structure then download the src files to have a look. I hope you enjoyed reading through this tutorial. As always, if you have any questions feel free to ask them below! If you enjoyed this posting, please Digg it!
Related Posts
Check out some more great tutorials and articles that you might like
User Comments
( ADD YOURS )Keith August 26th
Fantastic article. More jQuery!
Douglas Neiner August 26th
Great example and good detail. I think it would be better to write the cookie and make the change on the client side if javascript is enabled. PHP can read back cookies written with javascript, so that would speed things up for those with javascript enabled.
Can wait to implement this on a site!
curtis allen August 26th
really nice jquery tutorial
Khaled Dostzada August 26th
Night Looked better IMO
still great tutorial and i agree MOAR jquery!
Paul Gendek August 26th
I created something similar using only jQuery, the Cookie plugin, and a small function.
Basically, you declare your style sheets as usual (reset, default, etc), and the additional styles as rel=”alternate stylesheet”. Give them title tags that match the rel tag of the selection links (light, dark, etc) and add class=”styleswitcher”.
Here’s the function:
$.styleswitcher = function(name) {
$(’body’).toggle();
$(’link[@rel*=stylesheet][@title]‘).each(function(i)
{
this.setAttribute(’rel’, ‘alternate stylesheet’);
this.disabled = true;
if (this.title == name) {
this.disabled = false;
this.setAttribute(’rel’, ’stylesheet’);
}
});
$(’body’).toggle();
$.cookie(’stylesheet’, name, {expires: 365});
};
$(document).ready(function() {
$(’.styleswitcher’).click(function()
{
$.styleswitcher(this.getAttribute(’rel’));
return false;
});
if ($.cookie(’stylesheet’)) {
$.styleswitcher($.cookie(’stylesheet’));
};
});
This works better because the user can still choose which page style to view in the browser itself (Firefox: View > Page Style), and it’s a lot easier/faster/smaller.
Ade Pribadi August 26th
Wow this tutorial i’ts all i need. I love jQuery and i will implementing in my company website soon. How about if you making tutorial similar like this, but full website using php, jQuery, and mysql.
I will waiting, thanks.
insic August 26th
all i can say is WOW!. i am doing style switcher before but not this fantastic. thanks for sharing!
insic August 26th
more jQuery please!
Dan August 26th
Thanks for this- very cool.
What happened to the nightly quick tips?
daniel August 26th
just what i was expecting! great tutorial. Thanks a lot !
Mukarram August 27th
Excellent tutorial James.
James August 27th
Thanks for the kind comments!
Just a note to those interested - if you are not willing to use jQuery then I have made a regular JS version available here: http://enhance.qd-creative.co.uk/index.php/2008/javascript/jquery-theme-switcher-follow-up-notes (obviously it’s a much larger script due to the fact that no library is used).
@Paul - Nice script, I like how you’ve integrated it with the traditional alternative stylesheet methods. Only problem being that yours is not truly degradable. I know the user can select alternative stylesheets themselves but this is only possible within the best and most modern browsers. The ideal style switcher would include all options: jQuery (with effects), backend fallback + alternative stylesheets.
@Douglas - Good idea! … I did think about doing it like that but I wasn’t sure if it would be a good idea to duplciate the cookie functionality across the two methods (PHP/JS). You’re right though, it would be faster to do it that way.
Thomas August 27th
Great Tutorial, Thanks
Shane August 27th
Nice work - thanks for posting.
Kevin Quillen August 27th
I think the fault is on the author for making #2 seem like a commandment, not Snook.
Also… single line still only works if you have a widescreen like the flickr photo. Otherwise wordwrap will rain on your parade. Things can easily be missed there.
Kevin Quillen August 27th
Shoot, had the wrong tab open :p
Craigsnedeker August 27th
Thats awesome!!!!!
Kevin Quillen August 27th
jQuery is definately an awesome framework. Hope to see more examples.
ralexismf August 27th
WoW, great. Fantastic tutorial and awesome efect’s…… thank you so much
Dan August 27th
Nice, thanks for this one.
BTW the demo says it is an obtrusive switcher
Connor August 27th
I’ve done an effect like this before, but I have to say I like the way it fades in and out. With the way I did it, it would just instantly switch between the alternative style sheets.
Nate August 27th
This was awesome!
Aaron Irizarry August 27th
thanks… i would definitely like to see some more jquery tuts
Lado Criativo August 27th
awesome! great tutorial!
andi August 27th
Woah. Crazy. Great.
grEvenX August 27th
Very cool effect indeed
Paul Gendek August 27th
@James: Agreed - on switching through the browser menu. Although, my version does allow style switching from links through jQuery, and it is degradable through the default stylesheet if JS is disabled. Of course it could be extended!
crysfel August 27th
beware with the XSS attacks!!
# <?php
# $style = $_GET['style'];
# setcookie(”style”, $style, time()+604800); // 604800 = amount of seconds in one week
# if(isset($_GET['js'])) {
# echo $style; //
before you print “$style”, make sure there is not a malicious code
Philo August 27th
Nice tutorial!
Ben Griffiths August 27th
A good demonstration of some of jQuery’s abilities, thanks
Corey August 27th
Finally something new to use jquery for!!! great tut
ty August 27th
Good stuff, one thing though the demo mentions it being “obtrusive” rather than unobtrusive as it should be in the text there.
I apologize for the obtuse comment.
James August 27th
Sorry about the text (”obtrusive” instead of “unobtrusive”) in the tutorial demo. I must have had a mind blank when writing it lol …
I’ve tweeted @NETTUTS to fix it… I’ll email them too.
Lamin Barrow August 27th
I love style switchers and i am beginning to like Jquery ( I have a huge problem with libraries because your have to do things in its way). Thanks for the post.
Braden Keith August 27th
Last night I was thinking about what the best way to do this would be, but you’ve given me the answer. That’s a really cool effect
dlv August 27th
great result! thanks James to share this !! It’s really nice to see this king of eye catching things, i hope people use this feature to change the style…
Mark Abucayon August 28th
wow awesome, more jquery please. this is different to the others. thank you for sharing this one.
Niklas August 28th
Indeed it looks cool. Always nice to see useful Query scripts!
Zach Reed August 28th
Question….
Does it hold that style sheet when you go to more pages though? Like say that navigation worked on the top, if I went to another page, lets just say “services.php”, would it hold the “night” style sheet or whatever style sheet I had chosen?
SWEET TUT EITHER WAY!
James August 28th
@Zech - yes, it would hold the StyleSheet. We’re storing the user’s preference in a cookie which is retrievable by any page.
Taylor Satula August 28th
Great article, Thanks James
Mike August 30th
A nice example of day/night style switch: http://www.xhtmlizers.com - hit the day/night shift button over to the right.
Jatin Meshiya September 1st
one thing I want to ask. i have download the source. i found in js directory a file named “jquery.js” which has no enter (^p) in it. that is why at the end of the file you will find that some part of the script is been losed as comment! why it is like so?
and more over it you have not speak even a word about this file in your tutorial, why? i want to know the truth + the need of the file + readundancy of the file. please dont consider it as an order it is my humble request. as i am your younger brother!!( i am born 1988) please
Sortins Technologies September 1st
Awesome yaar. Thank you for your article.
HUSSAM September 4th
NICE WORK MAN
fano September 22nd
really nice!
I used the following to pass the xhtml validation:
<?php echo “@import
\”$style.css\”;> “; ?>
but I can get the style to switch. any idea ?
Ted October 4th
Nice tutorial. I’m trying to use it in a WordPress template - designed by myself - but it doesn’t work.
Ted October 13th
Like it!
What about switching style sheets automatically with time since there is one for the day and another for the night.
Lazer Unicorn October 25th
Hey,
sweet tut - i implemented it on my site, it works fine now with some minor tweaks…i was wondering: how can i designate the default style? I have three stylesheets and i want one style to be the default one
thanks
Aaron November 2nd
Awesomeness. . . time for me to try it out!
Ted November 4th
Still no idea for automatic switch?
fabien thomas November 16th
Hi, this is just huge !
I was just looking for a script like this one !
i’ve just had few troubles with the cookie writing functions, but i finally managed to make it work perfectly with some research.
thanks a lot, great job !
Add Your Comment
( GET A GRAVATAR )Your Name November 20th
Trackbacks