Comments on: Style Sheet Switcheroo

By: PHP-help » Excellent jQuery Tutorials

PHP-help » Excellent jQuery Tutorials — Mon, 08 Mar 2010 12:12:53 +0000

[...] Tutorial Link Demo Link [...]

By: 40??jquery?? | QK31

40??jquery?? | QK31 — Tue, 23 Feb 2010 16:36:04 +0000

[...] Tutorial Link Demo Link [...]

By: 10 jQuery Resources | Brightscape Blog

10 jQuery Resources | Brightscape Blog — Thu, 04 Feb 2010 09:56:08 +0000

[...] CSS Switcher [...]

By: Li

Li — Fri, 22 Jan 2010 08:59:31 +0000

Thanks!
???????

By: 40+ Excellent jQuery Tutorials « PSD to HTML , Slicing PSD to HTML

40+ Excellent jQuery Tutorials « PSD to HTML , Slicing PSD to HTML — Sun, 10 Jan 2010 19:10:19 +0000

[...] Tutorial Link Demo Link [...]

By: shengmx

shengmx — Tue, 05 Jan 2010 06:48:27 +0000

agree idea said by Dan Sorensen at 16th floor

By: pligg.com

pligg.com — Sat, 18 Jul 2009 06:31:18 +0000

Style Sheet Switcheroo…

allow visitors to switch a stylesheet with a click of a mouse.
This not only gives another fine example of the short code you can write with jQuery but also too illustrate some of the more advanced features of the jQuery javascript library….

By: Anthony Alexander

Anthony Alexander — Mon, 04 May 2009 05:27:36 +0000

Asynchronous Javascript functions became AJAX, All javascript became Jquery, now John Resig invented CSS selectors too.

By: Dan Sorensen

Dan Sorensen — Wed, 04 Mar 2009 21:50:38 +0000

Just a quick update to say that jQuery 1.3 doesn’t support the @ sign in the attribute. To make this code work properly, just remove the @ sign. See this page for more details:

http://docs.jquery.com/Selectors

By: 30 excellentes ressources pour développer avec jQuery

30 excellentes ressources pour développer avec jQuery — Tue, 03 Mar 2009 13:01:45 +0000

[...] exemple de code pour changer la feuille de style [...]

By: 40?????jQuery???? - Code Index

40?????jQuery???? - Code Index — Mon, 23 Feb 2009 08:07:45 +0000

[...] Tutorial Link: Click Here [...]

By: 40+ Excellent jQuery Tutorials | instantShift

40+ Excellent jQuery Tutorials | instantShift — Mon, 09 Feb 2009 18:54:26 +0000

[...] Tutorial Link: Click Here [...]

By: Sean

Sean — Thu, 15 Jan 2009 20:42:55 +0000

I have a very irritating problem, I cannot add a ‘title’ attribute to a . When I do, the stylesheet isn’t loaded at all. I have tried switchin doctypes, checked the validator, but not luck

Any idea what it could be?

By: Dave Artz

Dave Artz — Mon, 08 Sep 2008 20:34:35 +0000

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.

By: buy valium onli

buy valium onli — Mon, 18 Aug 2008 23:12:33 +0000

Hi webmaster!

By: Aleksey

Aleksey — Fri, 30 May 2008 12:59:06 +0000

It’s all based on an attribute in the body tag…

By: Mike

Mike — Thu, 26 Apr 2007 16:42:12 +0000

Oops, forgot to mention one thing. In the line that generates the random number:

var randNum = Math.floor(Math.random() * 4);

Change the number you are multiplying by, in this case 4, to the number of alternate stylesheets you have listed, or one more than the last ‘title’ number. In my case I have 4 alternate stylesheets numbered 0 through 3, so I multiply by 4.

By: nic

nic — Wed, 04 Apr 2007 23:32:47 +0000

Jack,

Thanks for the example, that’s exactly what I needed.

I’ve been doing the tutorials on jQuery and I literally know 200% more than when I wrote that first question. The problem I’m trying to solve is that we want to have an individual style for multiple users on the same set of pages.

For example two people visit page Cranberry, if user A came from page Apple they would have the Apple style loaded, and if user B came from page Banana they would have the Banana style loaded.

If someone visited Cranberry straight up they would see the default theme.

We already had this system in place using an onLoad script, but I wanted to switch over to jQuery.

By: Jack

Jack — Wed, 04 Apr 2007 15:49:22 +0000

Should be easy enough, just grab the class or attribute of the body tag, and pop that into the mix.

This is an untested quickie based on an id:

$(’body’).each(function(){
switchStylestyle(this.id);
});

But I also think that you can perform the same or similar without the use of javascript by putting a class name and/or id in the body tag of your document, and then putting the appropriate rules in your css

body#one p { color: black; }
body#two p { color: red;}

By: nic

nic — Tue, 03 Apr 2007 23:51:26 +0000

it’s supposed to say… based on an attribute in the body tag.

By: nic

nic — Tue, 03 Apr 2007 23:50:42 +0000

How would you modify this code to load a specific style sheet based on an attribute in the ? I’ve been mucking around in the code and I’ve gotten totally confused.

Thanks for all the tutorials, you’ve gotten me hooked on jquery.

By: joon

joon — Mon, 23 Oct 2006 15:30:15 +0000

Is $(document).ready(function().. absolutely necessary in this case? In Safari the default style sheet is rendered for a split second then the chosen style is loaded on each page load.

If it’s possible, let the browser execute as it’s being read. Me (big noob) has to test it out.

Thanks for the tutorials.!

By: v

Mon, 19 Jun 2006 23:53:44 +0000

Doesn’t work in Safari.

By: Sam

Sam — Sun, 18 Jun 2006 22:51:24 +0000

Thanks for taking time to post these examples. Here’s my 2-cents on further code reduction:

Replace
this.disabled = true;
if (this.getAttribute(’title’) == styleName) this.disabled = false;

With

this.disabled = this.getAttribute(’title’) != styleName;