## 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):

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!