I have a main stylesheet with two groups of alternate stylesheets. The alternate two groups of stylesheets are all disable when one is activated. The main stylesheet is persistent and never disabled. The alternate stylesheets only contain different elements taken out of the main stylesheet and only implemented when activated. I added the class with the two groups to see if I could accomplish activating one inside a group and deactivating the others in that group but not any in the other group. Ive tried many other styler switchers and jquery methods and I have not got anywhere, this is the best result yet. Im really new to all this and would appreciate any help.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="/files/theme/mainstyle.css" rel="stylesheet "type="text/css"/>
<link href="/files/theme/body1.css" rel="stylesheet" type="text/css" class="group1" title="body1" />
<link href="/files/theme/body2.css" rel="stylesheet" type="text/css" class="group1" title="body2" />
<link href="/files/theme/body3.css" rel="stylesheet" type="text/css" class="group1" title="body3" />
<link href="/files/theme/para1.css" rel="stylesheet" type="text/css" class="group2" title="para1" />
<link href="/files/theme/para2.css" rel="stylesheet" type="text/css" class="group2" title="para2" />
<link href="/files/theme/para3.css" rel="stylesheet" type="text/css" class="group2" title="para3" />
<script type="text/javascript" src="/files/theme/styleswitcher.js"></script>
</head>
the styleswitcher.js file from http://www.alistapart.com/articles/alternate/
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
Crude stylesheet selector
<ul>
<li> <a href="#"
onclick="setActiveStyleSheet('body1');
return false;">body1</a></li>
<li> <a href="#"
onclick="setActiveStyleSheet('body2');
return false;">body1</a></li>
<li> <a href="#"
onclick="setActiveStyleSheet('body3');
return false;">body3</a></li>
<li> <a href="#"
onclick="setActiveStyleSheet('para1');
return false;">para1</a></li>
<li> <a href="#"
onclick="setActiveStyleSheet('para2');
return false;">para2</a></li>
<li> <a href="#"
onclick="setActiveStyleSheet('para3');
return false;">para3</a></li>
</ul>
If its possible to go about this in another way that considered the correct way, I would love to be pointed in that direction to figure it out. If not, I would still love to know if this is possible with what I have , learning lesson I guess. Thanks.
UPDATE
It sounds like you want to be able to have 1 stylesheet active from each group at a time. And since you’re using cookies, you’ll want to be able to save each stylesheet per group so a user will have all of their settings correct. I didn’t understand what your
getPreferredStyleSheet()function was for, because it just returns the first<link>that is a stylesheet. If you are starting with some links already turned on, it seems like you don’t need that function at all. I figured that when you are creating your cookie, you could just callgetActiveStyleSheets()instead because it’s safe to assume that when the person is leaving the page, that they set it up the way they like it.Anyways I edited your functions to allow multiple stylesheets to get set from a cookie, and to save multiple stylesheets to get saved in a cookie. You’ll have to update your calls because I added an
sto the function names.JavaScript
HTML
Here is a quick fix for you. I didn’t spend any time optimizing or thinking of another solution since it’s late so there’s probably a better way of doing this but it’s late and I thought I’d at least give you something.
HTML – Change your
hrefattributes toswitchand yourtitleattributes toidJavaScript – Change your
setActiveStyleSheetfunction to this:If the
<link>is not pointed to the stylesheet, then you can’t have the styling. When you click on a<li>item, it passes the id to this function and this function checks if the<link>has theswitchattribute and if it does, it makes sure there thehrefattribute is set to nothing. Now I couldn’t quite tell if you wanted to allow a<link>from each class to be activated. If you do, just remove the/* */from the second part of the if statement. If not, then you can just delete that part. Anyways, after all of the linkshrefattributes are removed, the<link>with the corresponding id has it’shrefattribute set to it’sswitchattribute. So it is active while all of the rest are not.Like I said I’m sure there’s a better way to do this, but this was easy and it’s late and I’m going to bed. Hope this helps.