Multiple Style Sheets - Only Disable Specific Group

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 persisten

Solution 1:

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 call getActiveStyleSheets() 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 s to the function names.

JavaScript

​function setActiveStyleSheets(ids){
  ids = ids.split(',');
  var i, j, l, link;
  for(i=0; (link = document.getElementById(ids[i])); i++){
    for(j=0; (l = document.getElementsByTagName('link')[j]); j++){
      if(l.hasAttribute('switch') && l.className.indexOf(link.className) !== -1)
        l.removeAttribute('href');
    }
    link.href = link.getAttribute('switch');
  }
}

function getActiveStyleSheets(){
  var i, link, active = [];
  for(i=0; (link = document.getElementsByTagName('link')[i]); i++){
    if(link.hasAttribute('switch') && link.href){
      active.push(link.id);
    }
  }
  return active.join(',');
}

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 i, c, ca = document.cookie.split(';');
  for(i=0; (c = ca[i]); 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 || getActiveStyleSheets();
  setActiveStyleSheets(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheets();
  createCookie("style", title, 365);
}

HTML

<link href="/files/theme/body1.css" switch="/files/theme/body1.css" rel="stylesheet" type="text/css" class="group1" id="body1" />
<link switch="/files/theme/body2.css" rel="stylesheet" type="text/css" class="group1" id="body2" />
<link switch="/files/theme/body3.css" rel="stylesheet" type="text/css" class="group1" id="body3" />

<link href="/files/theme/para1.css" switch="/files/theme/para1.css" rel="stylesheet" type="text/css" class="group2" id="para1" />
<link switch="/files/theme/para2.css" rel="stylesheet" type="text/css" class="group2" id="para2" />
<link switch="/files/theme/para3.css" rel="stylesheet" type="text/css" class="group2" id="para3" />

...

<ul>
  <li> 
    <a href="#" onclick="setActiveStyleSheets('body1'); return false;">body1</a>
  </li>
  <li> 
    <a href="#" onclick="setActiveStyleSheets('body2'); return false;">body2</a>
  </li>
  <li> 
    <a href="#" onclick="setActiveStyleSheets('body3'); return false;">body3</a>
  </li>
  <li> 
    <a href="#" onclick="setActiveStyleSheets('para1'); return false;">para1</a>
  </li>
  <li> 
    <a href="#" onclick="setActiveStyleSheets('para2'); return false;">para2</a>
  </li>
  <li> 
    <a href="#" onclick="setActiveStyleSheets('para3'); return false;">para3</a>
  </li>
</ul>

---

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 href attributes to switch and your title attributes to id

<link switch="/files/theme/body1.css" rel="stylesheet" type="text/css" class="group1" id="body1" />
<link switch="/files/theme/body2.css" rel="stylesheet" type="text/css" class="group1" id="body2" />
<link switch="/files/theme/body3.css" rel="stylesheet" type="text/css" class="group1" id="body3" />

<link switch="/files/theme/para1.css" rel="stylesheet" type="text/css" class="group2" id="para1" />
<link switch="/files/theme/para2.css" rel="stylesheet" type="text/css" class="group2" id="para2" />
<link switch="/files/theme/para3.css" rel="stylesheet" type="text/css" class="group2" id="para3" />

JavaScript - Change your setActiveStyleSheet function to this:

function setActiveStyleSheet(id){
  var i, l;
  var link = document.getElementById(id);
    for(i=0; (l = document.getElementsByTagName('link')[i]); i++){
      if(l.hasAttribute('switch') /*&& l.className.indexOf(link.className) !== -1*/)
        l.removeAttribute('href');
    }
    link.href = link.getAttribute('switch');
}

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 the switch attribute and if it does, it makes sure there the href attribute 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 links href attributes are removed, the <link> with the corresponding id has it's href attribute set to it's switch attribute. 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.