CSS Stylesheet Switcher - what does it mean?
A stylesheet switcher allows your visitors to choose from a number of stylesheets they would like to view your website with. For example, you may have three pre-made stylesheets (say red, blue and green) and you want your visitors to choose and apply any one of them in your webpage without redirecting them to a new page or refreshing the page.
This tutorial will show you how to create such a client side css stylesheet switcher using jQuery javascript library.
Default Stylesheet
I assume you already have a default stylesheet implemented in your webpage
<link rel="stylesheet" href="default.css" type="text/css">
The list of options available to your visitors
List your available stylesheets here (follow the format)
<ul>
<li><a id="css-red" href="#red">Red</a></li>
<li><a id="css-blue" href="#blue">Blue</a></li>
<li><a id="css-green" href="#green">Green</a></li>
</ul>
<li><a id="css-red" href="#red">Red</a></li>
<li><a id="css-blue" href="#blue">Blue</a></li>
<li><a id="css-green" href="#green">Green</a></li>
</ul>
Time for some JavaScript
This is the jQuery code that switches your stylesheets instantly once the visitor clicks on any of the links (listed above in ul tag)
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// red
$("#css-red").click(function() {
$("link[rel=stylesheet]").attr({href : "red.css"});
});
// blue
$("#css-blue").click(function() {
$("link[rel=stylesheet]").attr({href : "blue.css"});
});
// green
$("#css-green").click(function() {
$("link[rel=stylesheet]").attr({href : "green.css"});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
// red
$("#css-red").click(function() {
$("link[rel=stylesheet]").attr({href : "red.css"});
});
// blue
$("#css-blue").click(function() {
$("link[rel=stylesheet]").attr({href : "blue.css"});
});
// green
$("#css-green").click(function() {
$("link[rel=stylesheet]").attr({href : "green.css"});
});
});
</script>
13 comments:
just what i was looking for. nice tutorial. thanks
Hi!
Very nice post...
I was scratching my head a bit to figure out how could I 'translate' it to an @import of a stylesheet, to override only some styles and not the entire stylesheet.
It is pretty simple: just do it the same way but with
$('style[type="text/css"]').text('@import url("yourstylesheet.css");');
Hey there!
Great post...
I'm really beginning to love jquery.
moo who? proto what? :)
Thanks for this post.
R.
Thanks.. just what I was looking for to use on my blog.
You rock!!
http://www.lrwv.com
-Tyler
Ok I got this to working great on my site, Thank you again.....
but how do I make it so that it remember the last css style chosen byt the visitor.
ex: if blue.css when click, then blue.css would be the user selection when they visit the site again.. and not the default green.css
can this setting be saved in their browse cookies??
Maybe Pere or someone could expand on this - $('style[type="text/css"]').text('@import url("yourstylesheet.css");');
To override some styles. Not sure exactly how to use that code instead.
Thanks
Pretty good. Works like a charm. However, you should do a follow up on cookies because the chosen style isn't remembered at all.
If you want a css to be user specific, use a cookie :)
This thing is AWESOME but when the browser is refreshed, it goes back to the default style! Any word on how that can be fixed?
Hi!
Great little tool for the toolbox!
Pere, your 'translation' to an @import seams to be working for me in Firefox, Mozilla and Safari, but not IE.
Any clues?
This code overwrite all existing stylesheet so you can't use multiple .css.
I didn't manage to use @ import.
my solution is :
- put an id on the stylesheet you want to switch an then
$("link[type='text/css']").each( function(i){
if ($(this).attr('id') == 'theme') {
$(this).attr({href : "squelettes/css/bleu.css"});
}
});
@Tyler:
In order to remember the last CSS file, store it in a Javascript variable during the page, and use cookies. e.g. each time it changes, put it in a cookie, and then use onload
in Jquery: document.ready(function() { //do stuff });
and retrieve the data from the cookie and update it.
@SC:
$() is a selector. so:
$('style[type="text/css"]')
finds all style tags with the attribute text/css
then .text() sets the text in it, so we update all stylesheets inside text with @import(URL), which effectively is an inline styles while letting the href="" on the tag remain, so you get the original stylesheet and the new one you're putting in.
@Marney:
it's probably not doing the selector right in IE, put an ID on the style instead. See below.
@Boutmos:
That's a inefficient way to do it, the selector works for ID's. You can just do:
$("#theme").attr({href: "URL"});
Hope this helps!
To append styles using jQuery:
$('<link>').attr({ 'rel': 'stylesheet', 'href': 'http://path/to/stylesheet.css' }).appendTo('head')
Post a Comment