Alexandru Dinulescu's Thoughts

Hello

I was always wondering what jQuery can do to help me give more power to my CSS stylesheets so one day after some time spent on the web i discovered a very very simple solution that was so easy to install that i was baffled that i couldnt figure it out a lot sooner. So without further comments here is the rundown of the stuff.

the XHTML

It’s very straightforward very easy to implement

You may wonder why i didnt use the href tag instead, well if the user has javascript turned off, then it means that he will be redirected to the CSS file in question rather than just changing the file which is very very bad so thats why we are using the rel attribute.

The jQuery

What did we do here? Simple, everytime a user clicks one of the links in the nav id, the rel attribute we specified is given to the LINK element in the head section of the page. the link element is the tag which inserts external CSS files, so by changing that we CHANGE how the site looks.

Now since we did that and it works, users may be annoyed to do this everytime they enter your site, so it’s a good thing we have the cookie jquery plugin which sorts all our issues. so with some small tweaks to the jquery code we get something like this

Now everything is AOK, only that the user sheets a small shutter everytime they load the page, since javascript is loaded after the HTML and CSS is loaded. to prevent that we can put the if statement ABOVE the document ready function. This is not recommended most of the times but since we know exactly WHAT to manipulate we can do this on this occasion.

In case people didnt know this is the order you need to put link the scripts/CSS in order for this technique to work.

And that is all, nice nifty webpage that does the trick and helps you out enormously when you try to make larger font sizes and stuff like that, even for skinning purposes.

Questions in comments, will answer all of them.