Update: I’ve released an updated version of this code which is more flexible. Please check it out.
jQuery is a Javascript library that takes this motto to heart: Writing Javascript code should be fun. jQuery acheives this goal by taking common, repetitive, tasks, stripping out all the unnecessary markup, and leaving them short, smart and understandable.As an example of how succinct and easy code written with jQuery can be I put together a little example that allows you to add a stylesheet switcher to your site. Check out the example in action.
The stylesheet switcher allows your visitors to choose which stylesheet they would like to view your site with. It uses cookies so that when they return to the site or visit a different page they still get their chosen stylesheet.
The JavaScript code that powers the example looks like this:
* Styleswitch stylesheet switcher built on jQuery
* Under an Attribution, Share Alike License
* By Kelvin Luck ( http://www.kelvinluck.com/ )
**/
(function($)
{
$(document).ready(function() {
$('.styleswitch').click(function()
{
switchStylestyle(this.getAttribute("rel"));
return false;
});
var c = readCookie('style');
if (c) switchStylestyle(c);
});
function switchStylestyle(styleName)
{
$('link[@rel*=style][title]').each(function(i)
{
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
});
createCookie('style', styleName, 365);
}
})(jQuery);
Then all you need to do is to add a class of “styleswitch” to any links that you want to activate the stylesheet switcher and a “rel” attribute which corresponds to the “title” attribute of the link tag embedding the stylesheet you want to switch to. Just view the source of the example and all should become clear…
I’d appreciate any feedback on the effectiveness of this technique. I think it should work fine on any browser that jQuery supports (I’ve tested on IE5.5, IE6 and FF1.5 on XP and Safari on OSX). It should degrade gracefully by going to the href of the link when jQuery isn’t supported or JavaScript is disabled. I have linked to a page which suggests possible ways to deal with this situation (disable JavaScript and try and switch stylesheets on the example to see the page).
If you would like to use this code then please feel free to download the zip
133 Comments, Comment or Ping
The example running perfect in IE.
But it can not move to the correct position in Opera 9.
How can I do? :(
August 14th, 2006
Hi Keel,
I’m not sure I understand what you mean by “move to the correct position” – can you elaborate? Are you talking about the stylesheet switcher?
Cheers,
August 15th, 2006
Hi Kelvin, was using styleswitcher successfully on a test site with jquery, but using the jquery build from 01 July rev110, (to use interface and thickbox v2.0)styleswitcher no longer functions…..would you know,what has changed in later versions of jquery,that stops the styleswitcher from functioning ??????
August 19th, 2006
Hi Giuliano,
There was a bug in some versions of jquery where ‘link[@rel*=style]’ wasn’t working. I’ve just tested with the new rev 200 and updated the example and the problem seems to be fixed – is it an option for you to upgrade to that?
If not simply change link[@rel*=style] to link[@rel=*style*] (ignore the bold, that is textile inserting formatting) which will make it work even in versions of jQuery with the bug (I prefer the former because it looks neater though!),
Cheers,
August 20th, 2006
Kelvin,
Many thanks, will update to rev 200 and test. Maybe that will also cure a problem,I have had with removeClass not working for me.
Once again many thanks for sharing and taking the tie out to check
August 21st, 2006
I would like to suggest a change to your styleswitcher, to add support for persistent stylesheets – which must be applied in addition to any alternate stylesheet. Persistent stylesheets have a rel attribute of ‘stylesheet’ and no title attribute and are supported by the best browsers.
All you need to do is to add a condition ‘must have the title attribute’ to the jQuery expression used in the switchStylestyle function, by changing link[@rel*=style] to link[@rel*=”style”][@title] (note that I also had to add the quotes in the condition concerning the rel attribute for it to work properly).
Cheers,
Andrea
P.S. Any reason why you publish people’s email addresses? That’s how I finally got caught by spammers… (and also why I’m not submitting my true one – sorry for that).
August 22nd, 2006
Hi Andrea,
Thanks for the feedback!
I had implemented persistant stylesheets in the version I am actually using but had forgotten to update this page – thanks for reminding me :)
I found that for some releases of jQuery the rel*=style wasn’t working and I had changed it temporarily to rel=style (the bold word should be surrounded by asterisks – textile getting in the way again) but just now I found that the latest release of jQuery (r226 from subversion) is behaving as expected again.
Sorry about publishing people’s email addesses – I didn’t know I was! It is just the default Text Pattern comments form. If you put in a web address and an email address it publishes just the web address, this is probably the best thing to do if you want to receive email updates when people respond to your comments. I can’t find a way to turn off display of email addresses so I think that’s the only solution – sorry,
Thanks again for the feedback,
Kelvin :)
August 25th, 2006
Thanks for the script Kevin. As an arts graduate I have trouble understanding all this scripting business and this set of scripts does exactly what I want. Props.
PS. I’m a bit of a newbie at this and it took me a bit of time to work out how to send the user back to where they came from, so I’ll show my referer PHP code here:
if(isset($_COOKIE['style'])) { header('Location: '.$_SERVER['HTTP_REFERER']);September 2nd, 2006
Cool – thanks for that Andy. Just to clarify that you will only need that PHP for people who have JavaScript disabled,
Cheers,
Kelvin :)
September 4th, 2006
Hi Kevin,
I only now came back and found your reply.
Concerning textpattern and email address publication, as I haven’t got a web site of any plausible interest, I’m going to enter a fake url and my real email address.
On the code, I have made another small change to one line, to autocorrect any possibile problem with trying to apply a style that doesn’t actually exist in the page. It happened to me a couple of times already, with embarassing effects, be it because I had renamed a style or because I was having different pages using different sets of styles (but sharing – by mistake – a cookie on the same path). I found the autocorrecting code to be the only way to fix the problem once it was stored in people’s cookies.
To make sure I don’t end up with unstyled content, in the last line of the $(document).ready call I check for the presence of at least one link to the style returned by the cookie before calling the switchStylestyle function at all.
if (c && $(‘link[@rel*=”style”][@title=”’ + c + ’”]’).size()>0) switchStylestyle( c );
This way, if for any reason the cookie returns a style that is not referenced in the page, I’ll avoid disabling the default stylesheet.
Note that you can be even more bullett-proof by performing this test at the beginning of the switchStylestyle function instead, like so:
if ($(‘link[@rel*=”style”][@title=”’ + c + ’”]’).size()==0) return;
That way, you’ll also autocorrect any possible error in the rel attribute of the link used to trigger the style switcher.
This is a rather optional change, but I found it quite useful in my own projects.
Cheers again,
Andrea
September 11th, 2006
Oops,
in the previous message, second suggested change, the test must be on the ‘styleName’ parameter (not an undefined ‘c’ variable), of course.
Cheers,
Andrea
September 11th, 2006
Hi, to stop TXP from showing the email addresses, click on your “Admin” tab, then on the “Advanced Preferences” (yellow button) and make sure the choice “Never display email?” is set to yes (under the “Publish” heading).
Nice bit of jQuery B.T.W.
September 19th, 2006
Great – thanks for the info Brian, TXP should never be displaying email addresses now (couldn’t find that setting hidden down there before!).
And glad you like the style switcher!
September 19th, 2006
Hey,
Great script, thanks.
I have one problem tough: i would like to use the alternate stylesheet as default, and have a link that would turn it off and leave only the plain style. Is this possible?
Thank you
September 21st, 2006
Hi Kelvin (^_^)
can’t say how much this cookie checking version of the switcher is usefull ! I was trying to check for the session.ID in PHP, but it seems lighter with cookies, I may try to target to a session.Id between pages if the browser actually don’t support js, but it looks like a bit of too much coding for just the effect :) if anyone…
:) well i’m gonna see your zip for that but I think it’s well, simple and light, and if a browser don’t support jquery it won’t be a big deal, as soon everybody’s gonna know about jquery s superstar :D
Thanx a lot
October 6th, 2006
Hi Kelvin,
Awesome work on the style switcher! I decided to give it ago and 5 minutes later (if that), its up and works like a charm! The only thing i am a bit stumped on, is running it in thickbox. When doing so it says serverside script cant be found (or something that extent!). Is there something i am missing here? I know its possible, as i’ve seen it been done before, so i am sure its something i am missing :) I am using the latest version of jquery (not svn), thickbox and your style switcher – just not sure where the conflict is! Any suggestions would be much appreciated!
Thanks,
Chris
November 1st, 2006
Hi Chris,
Glad you like the styleswitcher…
If I understand you correctly you are asking if you can have the buttons to switch styles inside a thickbox? The problem you are having doing this is that the relevant JS isn’t being added to those buttons (that happens on document ready). Try running this code once the thickbox is opened:
[code]
$(’.styleswitch’).click(function()
{
switchStylestyle(this.getAttribute(“rel”));
return false;
});
[/code]
That should associate the links inside the thickbox with the relevant JS to switch the stylesheets…
Hope this helps,
Kelvin :)
November 2nd, 2006
Hi Kevin,
do you know if it is possible to change a style sheet for an iframe ?
thanks for your answer, and for your work !
December 12th, 2006
great switcher. is there a way to toggle between two style sheets? rather than having two links on the screen i am trying to have one that just toggles.
April 6th, 2007
Hi Lucas,
Yes, you can do this quite easily. Try something like this (untested):
$(document).ready(function() {
var stylesheet1 = ‘YOUR_FIRST_STYLESHEET_NAME’;
var stylesheet2 = ‘YOUR_SECOND_STYLESHEET_NAME’;
$(’.styleswitch’).click(function()
{
var c = readCookie(‘style’);
if (c && c == stylesheet1) {
c = stylesheet2;
} else {
c = stylesheet1;
}
switchStylestyle©;
return false;
});
}
Hope that helps,
Kelvin :)
April 12th, 2007
Hello I’ve used the your code to set up a switcher. When the site first load it doesn’t load a stylesheet.How ever when I select each of the switch links the sttlesheet change fine I’m not sure what I’ve done wrong as I followed you instructions completeley.
April 19th, 2007
Hi Nichola,
Do you have somewhere that we can look at your page? That would make it easier to figure out what’s going wrong…
Do you have one stylesheet with rel=”stylesheet” and one with rel=”alternate stylesheet”?
Do you have cookies enabled on your browser? Does my example work for you?
Hope that helps,
Kelvin :)
April 19th, 2007
Kelvin (et al),
Just wanted to say thanks for creating this, it’s saved me a whole load of headache! (Alas the client gave me plenty!)
I had to modify the script to cover the site needs and thought I would share the solution with you all, and if anyone has any way better to do this then please let me know!
Objectives:
1. Need to switch styles to enable font-sizes and padding to change for accessibility reasons.
2. Need to switch colours and some backgrounds depending on what season it is, and/or via a link.
Issues:
1. Could not overwrite other styles when switching between objectives.
2. Would still retain any persistent styles without further modifications.
Resolution:
Setting classes to the stylesheet links and thereby allowing certain calls to ignore the other styles!
Modifications:
$(document).ready(function() {
$(’.styleswitch’).click(function(){
switchStylestyle(this.getAttribute(“rel”));
return false;
});
var c = readCookie(‘style’);
if© switchStylestyle©;
//have to create two cookies so I can get the correct data for the corresponding styles!
$(’.seasonswitch’).click(function(){
switchSeason(this.getAttribute(“rel”));
return false;
});
var k = readCookie(‘season’);
if (k) switchSeason(k);
});
function switchStylestyle(styleName){
//If the link is NOT a season style then disable and re-enable
$(‘link[@rel*=style][@title]’).not(’.season’).each(function(i){
this.disabled = true;
if (this.getAttribute(‘title’) styleName) this.disabled = false;
});
createCookie('style', styleName, 365);
}
function switchSeason(seasonName){
//If the link is NOT a typography style then disable and re-enable
$('link[@rel*=style][@title]').not('.typo').each(function(i){
this.disabled = true;
if (this.getAttribute('title') seasonName) this.disabled = false;
});
createCookie(‘season’, seasonName, 365);
}
Hope this helps anyone else in a similar situation!
Cheers!
June 19th, 2007
I’m looking for something similar to this. What I’d like is for an alternate css style to be loaded dependant on the page they come from. ANy help would be appreciated.
August 21st, 2007
Hi there,
When i visit my webpage for the first time no stylesheet is selected. How can i define a default stylesheet who is selected when i visit the website for the first time?
thanks in advance,
koen
November 8th, 2007
Hi Koen,
Like on my example page, you need one stylesheet with:
rel=”stylesheet”
and the others have:
rel=”alternate stylesheet”
The one which doesn’t have alternate in the rel will be the default stylesheet which is selected when the website is first visited.
Hope that helps,
Kelvin :)
November 9th, 2007
muchas gracias, gran trabajo
December 5th, 2007
hi kelvin,
i have the same sort of problem other users mentioned above: when i visit the page for the first time there is no stylesheet selected.
the default stylesheet has a rel=”stylesheet”, and the other have rel=”alternate stylesheet”. so that shouldn’t be the problem. tested that behaviour in different browsers.
and here’s another brief question: how can i call one of the stylesheets with some sort of a referrer. say i want to start the webpage (that has the styleswitcher included) from another page, i.e. a link that says “View the page with Style XXX”. The style XXX will than be set to default.
thanks in advance
timex
December 5th, 2007
Hi Kelvin, Fantastic Switcher, however just one question re the switcher links. In the HTML you have href="serversideSwitch.html?style=style1"
What is the significance of href="?style=style1". Can they be left out or must the ? stay for example…..excuse my asking this question however a response would be appreciated.Thanks,
Noel
December 11th, 2007
Hi,
@timex – weird about having no stylesheet when you first visit the page. Does the same happen on my example page?
Re. calling with a referrer – you could change the line:
var c = readCookie(‘style’);
To something like:
var c = document.location.search.substring(1);
(untested but should mean that the value of c is whatever is after the ? in your URL). Obviously you could extend this to split find “style=” in document.location.search and extract the string after the equals…
Hope that helps,
Kelvin :)
December 11th, 2007
Hi Noel,
Glad you like it :)
The “serversideSwitch.html?style=style1” in the links is there because we are doing progressive enhancement. If Javascript is disabled then the user is instead directed to a page.
The idea is that on this page you would have a serverside script which would set a cookie to the value of the style passed to it and then when any page on your site is generated it would use this cookie to decide on which stylesheet to make the default. You would have to write this script yourself as it’s dependant on how the rest of the site is put together.
Alternatively you could just put the link pointing to a HTML page saying something like “Sorry – your browser doesn’t support the javascript necessary to use our stylesheet switcher”. Only a very small minority of people should ever see this message anyway…
Hope that helps,
Kelvin :)
December 11th, 2007
Hi Kevin,
Firstly thank you for your reply last December. I am having a slight problem though with IE (theres a shock). When using Microsoft’s proprietary conditional comments the switcher no longer works. Just wondering if you or anybody else has experienced the same thing or is there any obvious workaround.
Regards,
Noel.
February 27th, 2008
Hi Kelvin,
Problem solved. I suppose looking back it wasn’t a problem in the first place. Simply use
@import
for IE only stylesheets within proprietary conditional comments and the switcher still works
Regards,
Noel.
March 1st, 2008
Thanks for the style switch script, Kelvin. I made a sleight addition to your code that works wonders for me, and may help others… Normally when the style is switched with your script, any js generated page text disappears – which is expected since the page is not actually reloading. I assigned all js related text a class (.js_text, which is set to display:none in the css). I added $(”.js_text”).show(); to the first line of your script. Now all js text on the page is displayed when the style is switched. Check my site for an example. Rock on!
March 14th, 2008
Hi Kelvin,
thanks for the great script. My implementation however didn’t work out and i still can’t figure out why.
Plesae have a look at http://www.cialog.com
The styleswitch is in the page footer “day” and “night”
It works lika a charm in safari and firefox but IE has no style when you try to switch from night (default) to day.
any hint … would be much appreciated.
ciao stefan
April 9th, 2008
nice trick
i used to use php , but i now i have switched to jquery
April 10th, 2008
Hi Stefan,
I guess it might be to do with your conditional comments for the IE specific stylesheet. If you remove this does it start to work?
Cheers,
Kelvin :)
April 10th, 2008
Hi ;)
I’m relatively new to jQuery – just trying to learn it now… so this might not be a hard one for all you experts out there – but I’m stuck…
I’ve implemented the CSS Switch successfully – thanks for sharing, Kelvin :) – but now I’d like to hide the switcher links when JS is disabled.
I tried hiding it via CSS – then showing it via the
$(”#switch”).show();
command – which works fine. But then, of course, switching CSS will hide the links with the new CSS…
I tried altering the your code, Kelvin – but without success… :(
I’d appreciate it if anyone could help me with this….(I’m collecting my tests on this page)
April 11th, 2008
Hi,
There are two ways you could deal with this problem. Easiest is probably to re-show the links after switching stylesheets. Put your $(”#switch”).show() just before the “return false;” in css_switch.js.
Hope that helps,
Kelvin :)
April 12th, 2008
Kelvin ;)
thanks so much for getting back to me on this – much appreciated :)
I’ve edited my code as you suggested – but when I take out the $(”#switch”).show(); from the HTML and add in into the css_switch.js file – the links do not show up at all :’( Will keep trying…
as you mentioned there would be 2 ways to solve this – would you mind telling how else I could try to get this to work?
Thanks again :)
April 13th, 2008
Hi,
Try leaving the code in both places. The first to show the links when the page loads and the second to re-show them after applying new CSS…
The other alternative is to put a style=”display:none” directly on the span and show it through JS. Then loading a new stylesheet won’t re-hide it…
Hope that helps,
Kelvin :)
April 16th, 2008
This is a great solution! I did have one caveat, however. My site uses lots of styles—we have site themes—so this solution wasn’t optimal since using alternate stylesheets took a while to load.
To fix this, I replaced these lines:
$(‘link[@rel*=style][@title]’).each(function(i)
{
this.disabled = true;
if (this.getAttribute(‘title’) == styleName) this.disabled = false;
});
with this:
$(‘link[@title=theme]’).attr(‘href’,styleName+’.css’);
This looks for an element named “link” with an attribute “title” that contains “theme”. It changes the attribute “href” of the link element to ”[styleName].css”.
May 27th, 2008
Hi Kal,
Thanks for the alternative implementation. I can’t tell for sure by looking at your code snippet but does your system also allow browsers to use their built in style switching ability (View > Page Style in Firefox)?
Cheers,
Kelvin :)
May 28th, 2008
No, it doesn’t, since I don’t include the actual CSS files on the page.
May 30th, 2008
Hi Kelvin,
Nice little script. I tested it out on a WordPress theme I’ve been working on, though have since removed it. I would like to use it eventually though, once I redesign my site.
The problem I ran into was “flashing” of the default style. Switching to the alternate style worked fine, but if I say… refreshed or clicked to go to another page, I would see a flash of the default style before showing the alternative style properly.
Any idea of why this would be?
June 13th, 2008
This works great. I’ve reformatted the code into a jQuery plugin style, and added a revert method to remove the cookie and go back to the default stylesheet.
Additionally, I’m using the jQuery Cookie plugin to handle the cookies.
(function(e){
e.styleswitch = function()
{
$(’.styleswitch’).click(function(){
e.styleswitch.change(this.getAttribute(“rel”));
$(this).blur();
return false;
});
$(’.stylerevert’).click(function(){
$(‘link[@rel*=style][@title]’).each(function(i)
{
this.disabled = true;
});
e.cookie(‘styleswitch’, null, {expires: 365});
$(this).blur();
return false;
});
var c = e.cookie(‘styleswitch’);
if (c != null) e.styleswitch.change©;
}
e.styleswitch.change = function(styleName)
{
$(‘link[@rel*=style][@title]’).each(function(i)
{
this.disabled = true;
if (this.getAttribute(‘title’) == styleName) this.disabled = false;
});
e.cookie(‘styleswitch’, styleName, {expires: 365});
}
})($);
$(document).ready(function(){
$.styleswitch();
});
To revert to default style you simply need a link like:
Revert style
June 23rd, 2008
I have seen a cross browser PHP style switching code at http://www.nightingalei.derby.sch.uk
Seems to work pretty good. Reckon it must set a cookie as when you go back to hte site after leaving it remembers which style you last chose. Obviously this will work even if the user has JScript turned off!
July 13th, 2008
This is nice but I also have the problem that #45 – Nyssa – has.
The default style will flicker before the selected one is shown when I navigate to other pages.
July 15th, 2008
Is there a way to display some sort of animation like a loading gif when they choose a new style?
Thanks!
July 15th, 2008
Hi guys,
@Bjorn & Nyssa… I hadn’t seen this problem before and I wonder if it is to do with recent changes to the jquery document ready code. I know I saw a thread on the jquery dev mailing list about how that functionality has changed recently… Maybe document.ready is firing later than it used to and that is causing the flash?
@joel – maybe you could show the loading gif on click and add an event listener to find out when the stylesheet loaded and then hide the gif… I haven’t tried it though and am on the road at the moment so won’t be able to… Let me know if you get it to work…
Hope that helps,
Kelvin :)
July 19th, 2008
bjorn and nyssa – try setting your media attrib to “screen” i think this fixed the flicker for me.
August 9th, 2008
Kelvin.
Being very new to web design. I have a problem applying the style sheet switcher. only the first index page retains the selected css style and switches. The other pages with the switcher in the head of the page have no css. What am I doing wrong
August 17th, 2008
Is there any way to switch stylesheets declared by < ?xml-stylesheet… instead of < link… element?
Generally, is jQ able to access any of xml declarations (these before < !DOCTYPE ?)
September 3rd, 2008
Unfortunately, this approach means downloading all the alternate stylesheets even if they are never used. For performance-conscious sites with many skins, this is an issue.
The best cross-browser approach I’ve found so far for theme switching is to AJAX in styles and swap out the old CSS once they are completely downloaded and save the cookie for the next load of the page.
September 8th, 2008
Question: I love the plugin, but I find in FF2 and 3, when I reload a new stylesheet, I need to force a refresh of the whole page to clear out the old stylesheet. It works in IE8,7, and 6… which blows my mind btw.
How would I force a refresh when the style sheet changes in jQuery? Thanks, I am a little new to jQuery
September 15th, 2008
thanks
this is a very good plugin. but here a problem. I think this plugin can’t work whit ie7-js code.
http://code.google.com/p/ie7-js/
can you help me?
September 27th, 2008
Thanks for the code. It works fine for what I need it, however I would like to have a splash page that gives the end-user a link choice of one style or another. Is this possible to do? Mind you the splash page will only serve as a portal to one style or another, and will not be seen after entering the site.
September 29th, 2008
this is a very good plugin. greets from turkey
thanks.
October 4th, 2008
Hi and thank you for this.
I have a request if is not too hard to do it, i need that code to change the stylesheets when user refresh the page.
I have one page with 2 stylesheets and the following code:
MaxStyleNum = 2;
StyleNum = parseInt(document.cookie.charAt(6)) % MaxStyleNum + 1;
if (isNaN(StyleNum)) StyleNum = 1;
document.cookie='style=' + StyleNum;
StyleFile = "style" + StyleNum + ".css";
document.writeln('');
(i added some dots in there because the code didn't appear :))
- with the css files style.css and style2.css
The thing is working but not in Safari and i don't understand why. I'm on the "graphics side" on the web and i don't know many things about this.
Thank you
November 21st, 2008
I have a Firebug error:
readCookie is not defined
var c = readCookie('style');
What does this mean?
I've named my styles basic, black, green etc.
January 5th, 2009
Hi Marko,
You need the cookie functions which are included in the sourcecode of the example page or the downloadable zip...
Probably easiest to grab the whole file from here:
http://www.kelvinluck.com/assets/jquery/styleswitch/styleswitch.js
January 5th, 2009
Oh I just missed that, probably downloaded the wrong file. Thanks!
January 5th, 2009
Me again,
seems like I have a problem in IE6. I have several alternate stylesheets and in IE6 if I click the second I get the style switched but only some elements in my HTML and second and other stylesheets won't change at all, take a look http://www.markoprljic.iz.hr/bcp
btw. works fine in all other browsers.
I don't know is this a CSS bug or HTML bug or the script just throws IE6 in quirks, I don't know. Please help. Any answer is appreciated or further reference.
Thanks.
January 7th, 2009
never mind, fixed that
January 8th, 2009
Might I ask what the link to /mint/?js does in the example page? Also, in the online example you link to the google hosted jquery, but not in the downloadable zip file...
I'm currently having some problems getting the script working, implemented in a Wordpress Widget, but I'm confident I'll be able to solve it soon and that I'll really enjoy the script, so thanks in advance :)
January 13th, 2009
Hi Jacob,
The link to mint/?js is just for my stats tracking software - you don't need to include it in your page...
I've just updated the zip file to make sure it contains the latest version of the code... I changed the example to use the latest version of jQuery (hosted on Google's AJAX libraries CDN) to fix a bug that was reported recently...
If you are creating a wordpress widget then you should instead include the version of jQuery which ships with wordpress so that only one version of jQuery is included and it's shared between any different plugins the user uses...
Cheers,
Kelvin :)
January 13th, 2009
Hi Kevin,
I am having the same issue that Bjorn & Nyssa were having that on page reload or on some pages, the default style flickers before the alternate style loads. Have you figured out what this might be?
Thanks.
January 19th, 2009
I am having a problem I have never encountered, nor can I find the solution to. Anytime I add the 'title' attribute to a that is not loaded correctly, and consequently is not loaded. When the title attribute is removed, all is well. Without the title attribute I cannot get *most* jquery stylsheet switchers to work as they all use this same method. I have attempted changing Doctypes; no joy. Any help would be appreciated.
January 21st, 2009
Sorry, your form removed some of my comment. Correction:
Anytime I add the 'title' attribute to a *link* that *link* is not loaded correctly,
January 21st, 2009
Hi Dan,
Did you try switching the order of your JS and CSS includes? I think I read somewhere that that may help,
Cheers,
Kelvin :)
January 22nd, 2009
Hi Sean,
I'm afraid I don't quite understand what you are getting at. Do you have an example page? You should have a title attribute on all "alternate stylesheet" link elements because this allows browsers which support user style switching to display the alternative stylesheets in the relevant browser menu,
Cheers,
Kelvin :)
January 22nd, 2009
The styleswitcher doesn't seem to 'stick' with IE6. Any ideas?
January 24th, 2009
Hi Darren,
Are you using a "real" IE6 or a standalone version? I ask because I'm sure the script used to work in IE6 - I tested it pretty comprehensively back when I wrote the script. But I just tested now in a standalone IE 6 (as I now have IE7 on my machine) and I see the issue you describe e.g. when you return to the page it seems to have forgotten the styles...
I want to find out if this is an issue with how the standalone IE6 handles cookies or if the problem is a real one (in which case I'm wondering why it didn't happen when I originally tested the script). I think there are some people at work who still have real IE6 on their machines so in the week I'll try and test on those,
Thanks,
Kelvin :)
January 25th, 2009
Hi all.
I had this script working very nicely but I recently updated to jQuery v3 and it no longer works.
Has anyone else had this problem?
When I click the link to switch, nothing happens. No errors btw
January 27th, 2009
Hi Tom,
Are you using the latest version of the code? I updated it when the jQuery 1.3 beta came up to make it compatible (removed an @) ,
Cheers,
Kelvin :)
January 27th, 2009
Im having the flicker problem too. Strangely not at all on the home page but on other pages that are a little more js heavy.
January 29th, 2009
thank you for sharing this cool thing !
it work very well for me, but when i use with some other stuff, ex) mootool i caroussel.
a javascroipt errer appeared that "click is not a funtion" for the line of "$('.styleswitch').click(function()" .
is there could be other way than use click function ?
Cheers
Alex
February 10th, 2009
Hi Alex,
I've just updated the code so that it should work in noConflict mode with other libraries,
Cheers,
Kelvin :)
February 10th, 2009
Hi Kelvin,
Thank you so much, now it work perfectly !
This is one of my favourite plugins ?????
Cheers
Alex
February 11th, 2009
i wrote 5 stars but broken to the question mark. never mind :p
February 11th, 2009
Hi Kelvin, great script! i am currently using this script in my still in development wordpress theme. its really easy to customize so great job. thanks!
February 12th, 2009
Hi Kelvin
Thanks a lot for this script, works very well on my page! Great work!
I was trying to do some jquery stuff after the user clicked on a stylesheet-link but it did not work out until now. maybe someone here can help me out. the code i tried to use:
$('.styleswitch').click(function()
{
switchStylestyle(this.getAttribute("rel"));
if (style == 'style2') {
$("body").css({'background' : 'yellow'});
}
if (style == 'style3') {
$("body").css({'background' : 'blue'});
}
return false;
});
what am i doing wrong?
that css-background color change is just as example! i actually want to add some html code via jquery .prepend.html to the body.
thanks a lot for your help!
cheers,
daniel
February 28th, 2009
Hi Daniel,
I'm not sure why it wouldn't work... Did you try alerting "style" to see what it equals? Where are you expecting "style" to be set?
Cheers,
Kelvin :)
March 3rd, 2009
thanks kelvin!
you've pointed me to the solution. i'm not that savy in js :)
the code that works:
if (this.getAttribute("rel") == 'style1') {
$("body").css({'background' : 'yellow'});
}
thanks again!
March 4th, 2009
Very good! thanks for this solution!
March 14th, 2009
thx, good plugin
March 16th, 2009
Hi Kelvin,
I just wanted to say thank you so very much for this wonderful script, I really appreciate all of your time and effort that went into it, and letting me use it free of charge.
Cheers,
Andrew
March 28th, 2009
Hello Kevin, thank you very much for sharing this.
I am trying to accomplish the same as Lucas, to have ONE link that lets the visitor switch between two stylesheets. I have never touched jquery or javascript before, and I am having somewhat a hard time getting it to do this. I have tried using that part you replied to Lucas with, but I have no clue how to make the link call the script and actually change the stylesheet.
It would be great if you have time to explain this a little further.
Thanks again!
-Steffen
April 5th, 2009
Noticed a couple of people asking about having a 'one link' switcher (Steffen, Lucas). I was wondering the same?
There appears to be a simple solution to this without touching the jQuery script, just a few tweaks on the HTML/XHTML?
styles1
styles2
Just wrapping your links (or applying directly to links?) with elements and give them IDs 'st1', st2', etc? Seems to work for me?
Here's an example of this. Disability site still in dev, front-end coded template ready to port to CMS. Click 'High Visibility':
http://www.friezedesign.co.uk/wecil/index.html
Does it work?
Many thanks Kevin!
April 14th, 2009
Hi there,
Thanks for this. I am using this on my site but facing the same problem like a few others here. The screen flashes the default stylesheet everytime a page refreshes.
Is there some solution to it??
Thanks
April 21st, 2009
nice trick to make my site speaking more stylesheet
May 24th, 2009
Hi Kevin,
Thanks for the great article. I have a problem though. Using @import doesn't work at all.
I have two CSS (style1.css and style2.css). On the style2.css , I used @import(style1.css); because the changes here are only font-sizes. However, the styles from style1.css have no effect on style2.css using @ import. Any ideas?
June 9th, 2009
Hi,
What is the best dedicated server web hosting company?
I'm want to build a web site for my supervisor.
appreciate your feedback,
-Leticia
June 11th, 2009
Hi all,
I am also having the screen flicker effect in the following browsers:
Opera 9.64 on Mac
IE 5.5/6/7 on PC
Basically it seems the jQuerry takes a while to load on these browsers, so loads the default CSS style sheet, and then after a break of sometime, the new one loads in.. This causes a horrid flicker effect on screen.
There have been quite a few ideas on how to resolve this like adding the 'screen' attribute to the CSS link ref, placing the JS scripts above the CSS ones in the HTML - neither of these seem to have worked...
Anyone got any ideas? I am desperate to get this working, its such a nice feature but at the moment not usable due to the flickering on the browsers / os's mentioned above....
Thanks Kevin and all!
dubbs
June 18th, 2009
Kevin,
As already stated, I'm looking to create a toggle button that switches between two stylesheets.
I've had no luck with the code you posted above. Would you mind explaining in a bit more detail how to do this?
Best,
-JB
June 23rd, 2009
Hey Kelvin,
i real like this script, but: is it possible to set a stylesheet by load the Site, without klicking any Link ? I've different Domains, so i want to set the cookie automaticliy, is that possible ?
Jess
July 8th, 2009
Hey Kelvin,
This is n awesome plug-in. I'm incorporating it into a new site of mine. I have one question though. I have 9 15x15 px boxes of different colors. I am using this to switch between the "color" style sheets. Is there any way that jquery can be used to remove the box of the color being displayed?
thanx,
Jacob
July 13th, 2009
I fixed the disappearing part but ave not been able to find a way for the js to support images I'm going to make them the "background" of my boxes but I don't want the text to show.
Any idea on how to hide the text?
July 13th, 2009
Never mind everything. I got it working. It's awesome. take a look at the finished product. http://digitaldesigns.tk/
July 13th, 2009
hey man, this is awesome stuff!!!
i have one question, what if i just want 2 buttons "previous" and "next" instead of clicking on different styles. how would i modify the links?
July 16th, 2009
Hi Kevin
Great article, I particularly like the cookie support so that it remembers the users prefeered stylesheet. I have one quick question though.
I have implemented the stylesheet switcher on http://www.thetelephonyblog.com (under the 'themes / styles' tab in the sidebar), and when the user changes the page there is a split second where it shows the default sylesheet before it switches to the users preffered one, is there any way I can resolve this?
Many thanks
Peter
July 20th, 2009
Hi All,
I've just released an updated version of this code which is more easily extensible and includes support for toggling between available styles. Check it out here:
http://www.kelvinluck.com/2009/07/jquery-styleswitch-now-with-toggle/
Kelvin :)
July 31st, 2009
Has anyone had any luck getting this to work with conditional IE6 style sheets? My conditional stylesheet is being completely ignored when this styleswitch script is active. If I remove it from the code, the conditional stylesheet works fine.
August 12th, 2009
good one :)
August 20th, 2009
Here's one that allows you to dynamically change the style of some html elements with jquery. It saves your changes to the db. You can change RGB and font size values. It also uses the jQuery ui slider widget.
http://tympanus.net/codrops/2009/09/06/dynamically-changing-style-with-jquery/
September 6th, 2009
The screen flash is a deal breaker for me. Did anybody resolve this?
November 3rd, 2009
Hi,
if a web page contains big amount of data then a stylesheet is rather to be rewritten than switched. Switching causes a browser to redraw its page two times: first after disabling an old stylesheet and then after enabling a new one. If one rewrites a tag stylesheet of the DOM the browser redraws the page only once, thereby decreasing time of browser's non-responsiveness.
Volodymyr
November 8th, 2009
Thank you for this script!
Works perfect for me (-:
December 2nd, 2009
Hey Whose coding
January 13th, 2010
Nice clean bit of code, works well, thank you for sharing.
im using a triple A for the font size, and also 3 colour options, both use a separate (duplicated) function and they both work on their own, each saving a seaprate cookie.. but how can I make both work at the same time..
how can I set it up to allow users to e.g. select large font, and blue/white contrast? both work independatly brilliantly.. but as the funtions are using the same variables they over write each other..
I bet that made no sense at all
February 1st, 2010
The main style.css on my site is over-riding the other styles, is there an edit to the script to make the current css be the only styling there is at the time, this is really a problem :(
Thanks
R
February 12th, 2010
Reply to “Switch stylesheets with jQuery”