Multiple style sheets - only disable specific group

Question

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.

Aust · Accepted Answer · 2012-10-24 17:17:59Z

4

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.

edited Oct 24, 2012 at 17:17

answered Oct 24, 2012 at 5:26

Aust

11.6k13 gold badges48 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Anderson Over a year ago

Thanks for the effort. I woke up in the middle of the night to try this out and again this morning. Just had to. Now the main stylesheet stills stays active/persistant. None of the two groups load on page load, one should from each. The

Anderson Over a year ago

--- The group 1's switch correctly but the group 2's dont make the "hook" for linking to respected alternate stylesheets. Group 2 does not disable group1, which is correct. Nothing disable main stylesheet which is also correct. This is seems to be so tricky but very interesting. Any more thoughts?

Aust Over a year ago

@user1770110 - Oh I didn't realize you wanted one to load from each group on page load as well. Whichever ones you want to load, also add an href attribute with the appropriate link in the code. i.e.

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

Anderson Over a year ago

Thanks, on it now works for each group on top of the main stylesheet. Its just still not working switching group1 sheets independently from group2 sheets. Neither group disabling the other while one from both groups remains active. For example, group1 switches between background images in the body and group two switches between .paragraph stylings. One from both needs to be persistent at all times. Maybe a separate switcher for each group running? Leaving the main stylesheet as the only persistant?

Anderson Over a year ago

Works flawless across all browsers, Firefox, Opera, IE, Safari, Chrome. Amazing what this enables one to do now. I searched extensively and tried many philosophies/examples and always came up short. Pretty much alternating only varieties of one set style switching stylesheet. Also with this the expansion of even more is possible but Im still not sure its fundamentally correct but its seems its rock solid code with rock solid code built upon it, its got the 5 9s. Thanks again for all your help.

Collectives™ on Stack Overflow

Multiple style sheets - only disable specific group

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related