Style Switcher problems.

M@ster · #1 (**permalink**) 01-03-08, 01:57 PM

OK, I'm trying to get a style switcher to work on my site but I'm having difficulties with it.

I uploaded this file into my main directory:

Code:

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);

Then I'm using this between the <html><head> part of my document:

Code:

<link rel="stylesheet" type="text/css" href="defaultstyle.css">
<link rel="stylesheet" type="text/css" href="style1.css" title="StyleTitle">
<link rel="stylesheet" type="text/css" href="style2.css" title="StyleTitle2">
<script type="text/javascript" src="styleswitcher.js"></script>

I changed to titles and "href" link around to fit my site and then I uploaded my two css files and then added this to where I wanted the links to show up.

Code:

<a href="#" onclick="setActiveStyleSheet('StyleTitle'); return false;">Text to change style</a> 

<a href="#" onclick="setActiveStyleSheet('StyleTitle2'); return false;">Text to change style</a>

Once again changed that stuff around, and got it all nice how it was supposed to be but when I go to my site its all weird. Like one of the css style sheet is almost fine but with a couple of the <div id="h1"></div> are not the right color there supposed to be, and when I click on the link to switch my css style sheet it doesn't work its all messed up.

Can anybody explain to me an easier way to make or get my existing style switcher to work right.