64x64 icon dark hosting
Choose a hosting plan here and get a free year's subscription to Tuts+ (worth $180).
Advertisement

How To Create An Amazing jQuery Style Switcher

by
Gift

Start a hosting plan from $3.92/mo and get a free year on Tuts+ (normally $180)

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:

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:

Night Theme

The Night theme:

Night Theme

It's best to start with one style and then copy across all the selectors to the alternative StyleSheet - and then all that needs changing are the various CSS rules and declarations. Obviously you can have as many StyleSheets as you want but in this tutorial we're using two for illustrative purposes. Plus night and day go well together as a duo!

day.css:

night.css:

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:

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:

So, first we want to specify what happens when one of the StyleSheet links are clicked on (those within div#style-switcher):

loadStyleSheet:

Now we need to write the loadStyleSheet function:

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:

And, right at the end of our plugin we're going to call the cssDummy.init function:

We're done! The entire plugin now looks like this:

We can now call the jQuery plugin like this:

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!


Advertisement