1

I'm using code I found for a jquery style sheet switcher.

From here: http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/

Now I'm running into a problem using this switcher.

I’m trying to us this to load a theme css file while keeping my main css file loaded.

My main css file contains my sites structure, and I'd like to keep this file loaded no matter what.

Now I'm trying to use this switcher to load alternate color themes for the site. The only problem is that my main css file is being unloaded and replaced by the color themes.

How can I go about having one main css file that doesn’t change and have this switcher only effect my theme css files?

thanks

Improve this question

3 Answers 3

Reset to default
2

The first script in that article replaces the stylesheet in all <link> elements. You'll want to specify which <link> to change (as in the second example in that article which uses a class to differentiate).

For example:

<link rel="stylesheet" type="text/css" href="main.css" /> <link class="theme" rel="stylesheet" type="text/css" href="theme1.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript"> if($.cookie("css")) { $("link.theme").attr("href",$.cookie("css")); } $(document).ready(function() { $("#nav li a").click(function() { $("link.theme").attr("href",$(this).attr('rel')); $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'}); return false; }); }); </script>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

you want to use the alternate attribute on the node. not change hrefs around. see my answer.
0

You need to change the Javascript file/code of the stylesheet switcher and your markup a bit

include these lines in the portion of your html file

<link rel="stylesheet" type="text/css" href="main-stylesheet.css"/> <link rel="stylesheet" type="text/css" id="alt_style" href=""/>

Replace main-stylesheet.css by your main stylesheet . The other empty link tag would be used for the alternate stylesheet. Use this Javascript function instead :

$(document).ready(function() { $("#nav li a").click(function() { $("link#alt_style").attr("href",$(this).attr('rel')); return false; }); });

This should do the trick. :)

Improve this answer

Comments

0

Stylesheets come with a default way to do this. So you don't want to be adding/removing style nodes from the dom, or messing with the href. This default way is rel="alternate stylesheet". Anything with "alternate" is downloaded by the client, and not applied. All browsers support this and its been out there for a long time.

You can add a class, or other html attribute (I have used group="foo", group="bar") to denote logical grouping of which only one stylesheet can be applied. The way to turn a stylesheet off is to change the disabled attribute of the stylesheet node to 'true'. And the way to turn it on, is disabled=False. Don't change "alternate" in the rel attribute.

Improve this answer

1 Comment

I've tried this approach at jsfiddle.net/dQBQ3 (if I can get it to work, I agree that it's the better approach), but not having any luck. Any thoughts on what might be wrong there?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.