About three years ago I posted my stylesheet switcher switcher here. It was the first bit of programming I ever did using jQuery. Surprisingly enough it is still one of the most popular posts on my blog and I still get quite frequent questions about it.
One of the most popular questions is “how can you make the styleswitcher toggle between available stylesheets?”. So I just put together a little example of how to do this. While doing it I noticed that the original code wasn’t really that extensible which is probably why people were always asking that question! So I ended up rewriting the code a bit as well as putting together the new example. You can find it all here.
25 Comments, Comment or Ping
This is very nice. I will try to implement this into a new website of mine.
Nice work Kelvin. :)
July 31st, 2009
Very cool. But is it me or the readCookie part is missing?
August 4th, 2009
Hi Patrick,
The read cookie stuff is included in the js file ( http://www.kelvinluck.com/assets/jquery/styleswitch/stylesheetToggle.js ) but not in the inline code of the page... Sorry for any confusion,
Kelvin :)
August 4th, 2009
this is great! thanks for all the hard work!!! is there a way to make it go previous?
August 4th, 2009
Hi Mike,
Currently the $.stylesheetToggle function will loop through all available stylesheets in order. If you want some other logic then you can use the $.stylesheetSwitch function to implement that logic. There are examples of both on the demo page. Does that make sense?
Cheers,
Kelvin :)
August 4th, 2009
sorry for being a noob, i really don't know how to make that previous function. :/
August 5th, 2009
Hey everyone, just wanted to point out that if you're using this in a website where a variety of stylesheets could be dynamically loaded (such as in wordpress, where plugins might add their own) you might run into a conflict.
I fixed this very issue on my website by adjusting the jquery select as such:
$('link[title*=stylesheet_toggle_option]').each(
"stylesheet_toggle_option" is part of a phrase within the title attribute of my style include:
<link rel="alternate stylesheet" type="text/css" title="Light Indigo theme stylesheet_toggle_option" media="screen" href="/assets/css/light/light.css" disabled="" />
Just a heads up, and thanks for the jQuery plugin Kelvin!
cheers!
August 21st, 2009
you TOTALLY saved me with this one. I'd been fighting with various show/hide jscripts (not being a js person, but a php person), and every single one demanded that I do a separate instance for its use -- and every time I tried to toggle them as a unit, the only scripts I could find/get-to-work would treat the toggle-button as a button... and submit the page! AUUGH. Finally I realized that if I could just TURN IT OFF, then that's all I want, and lo and behold, your script works beautifully for that. Now one button turns on all the help text on the page, the cookie remembers it, and if the user's familiar enough with the form to no longer need the help, it can GO AWAY. With a single click! Oh, joy. I think I'm gonna have a drink and celebrate, because you really did save my last few shreds of sanity. THANK YOU!
August 25th, 2009
Hi Kelvin, I'm a little new to jQuery and I can't seem to get your style switcher to work. I've checked the source of your sample page, and I noticed that your toggle is linked to a "serversideSwitch.html". I've checked this post, the previous post and all the comments, as well as the codes for every single resource linked to both sample sites (the new one and the old one) and have found no reference to a serversideSwitch.html. Or any instruction on what to put on the href field of the toggle link, for that matter.
This is all very confusing and I'd really appreciate it if you could find the time to help me out.
August 29th, 2009
Hi Levi,
The purpose of serversideSwitch is to provide stylesheet switching functionality for users with Javascript disabled. You can see the file here:
http://www.kelvinluck.com/assets/jquery/styleswitch/serversideSwitch.html
You can see on that page what the requirements are for the serverside switcher but as I mention, it is only a small minority of users who will ever need this page. The styleswitcher should work fine for you without it (presuming you have JS enabled).
Hope that helps,
Kelvin :)
September 1st, 2009
Hey, this is great can't wait to see it in action on my site. Thanks for your work and talent.
September 14th, 2009
Very handy little script. I'll be putting this to use to show a broad range of styling capabilities in a demo for a product. This saved me some hassle and the code looks quite tidy. Thanks again.
September 15th, 2009
If you are using this with the latest jQuery the styleswitcher.js you may need to remove the @ in the [@*=style] areas as this support has been discontinued.
Thanks for the code though it works really nicely.
September 23rd, 2009
How should this script be modified so that it will _import_ another stylesheet and overwrite the active one partially, rather than replacing it completely?
Thank you for the code and more power to you.
September 27th, 2009
Do your Style Switcher manage sIFR titles ?
I would like my style switcher to change the color of sIFR titles.
October 1st, 2009
Awesome switcher, ive just put it into my WP blog but im having trouble when making it change the color of my h1, h2, h3 and h4. I am using Cufon, but the color is styled with CSS but I cant seem to make it change depending on what style sheet your on...
any ideas?
October 1st, 2009
Hi Kevin,
Nice job, seamless integration all working very well!
One question... is there any way of adding a named anchor to the style switch? Reason being, I'd like to be able to move the page at teh same time as clicking the styleswitch...
Just adding ?style=blue#anchor or #anchor?style=blue obviously won't work because of the over riding JS.
Any ideas greatly appreciated :)
October 8th, 2009
Hi,
@Ben - thanks for the headsup - I've fixed it now. I had previously fixed it but it looks like those @'s somehow reappeared!
@Bob - I'm afraid not, this code is designed to complement the browser's built in "alternate stylesheet" functionality so it behaves in the same way.
@Frank & Kevin - I'm sure that you can make the style switcher change cufon and/ or sFIR but you will probably need to add code to reinitialise the image swap after the stylesheets have changed.
@Jamie - you will need to edit your code so that it doesn't just "return false;" in your click handler. You could either set location.href = 'nameOfTheAnchor' or you could just not return false and let the link go to it's natural destination (note that with JS disabled then there will be no way for the styleswitch to work then).
Hope that helps,
Kelvin :)
October 12th, 2009
Great bit of code just what I was looking for, is there anyway of swapping the text link on the switch link though, i.e. instead of toggle it would display 2 sets of text links depending on what css file is being used, im trying to toggle between Normal and Hi Contrast at the moment
THanks
November 12th, 2009
Nice work. I am having a strange problem that manifests in FF3.5 I am using small-caps with the pseudo-element "first-line'. I see a space after any losing tag that begins in the first line and extends to the second--unless I comment out $.stylesheetInit();.or remove font-variant.
Why would your script interact this way?
November 23rd, 2009
Hi,
That's really strange Dan - I can't think why that would happen... Do you have a URL to the page in question?
Cheers,
Kelvin :)
November 29th, 2009
http://www.sorenkierkegaard.org/philosophical-fragments.html
Notice the second line has a gap at the end of the word "Postscript". Hover over the link and the gap disappears. Comment out $.stylesheetInit(); and the problem goes away. But it's not just links. It's any tag that starts in the first row and closes in the next. This did not happen with an older version of your script. Also, on some of my pages--even without a link in the first paragraph, the dropcap shifts suddenly.
Also, in Safari 3 for Mac, the dropcaps become HUGE.
November 30th, 2009
Thank you for this script!
Works perfect for me (-:
December 2nd, 2009
hey, just wanna say, i'm using it on my site now. check it out: http://www.mikemai.net
thanks so much for making this!!!
February 1st, 2010
Reply to “jQuery styleswitch – now with toggle!”