Multi CSS style sheets linked to the one page

[Heavensword]

Hi,

 

I am woundering if anyone can help me on solving my website which I am making for my gaming community. I want to have a XHTML page which has mutli CSS styles linked to it, so that people can log on and choice what style sheets they want to view. Plus also being able to store in a cookie format for them to see at a later date. Can someone answer this question as I have been trying to solve it my self for a good while now. My site is http//:www.bp-home.co.uk/indexv10.html.

 

Can some one please help me  :'(

[dbrimlow]

It is a little tricky. I use a javascript switcher.

 

in the head section I place the link to the css and jscript - note the "rel=" and "title=", these are crucial to call the switch later:

 

<link rel="stylesheet" type="text/css" href="css/css-burgandy.css" title="ahome"/>
<link rel="alternate stylesheet" type="text/css" href="css/css-bhome.css" title="bhome" />
<script language="JavaScript" type="text/javascript" src="/css/styleswitcher.js"></script>
[code]


in the body section I create a link to call the switch:

[code]
<a href="css/css-bhome.css" onclick="setActiveStyleSheet('bhome'); return false;">Blue style</a> | 
<a href="css/css-burgandy.css" onclick="setActiveStyleSheet('ahome'); return false;">Burgandy style</a>

 

Here is the jscript which I save as styleswitch.js in my css folder:

 

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

 

Here is a link to my page that uses it - the switch links are on top:

 

http://www.manhattanapts.com/indexp.html[/code][/code]

[Heavensword]

Success been able to use 2 syle sheets on the one page. But the cookies for some reason dont seem to work. Could you look at the http://www.bp-home.co.uk/indexv10.html source and tell me where I might be going wrong.

[Heavensword]

How come I cant link the 3 different CSS styles to this page?

 

Is this the correct coding to make it happen?

 

<link rel="stylesheet" type="text/css" href="/css/defaultcss.css" title="defaultcss"/>

<link rel="alternate stylesheet" type="text/css" href="/css/killzone.css" title="killzone" />

<link rel="alternate stylesheet" type="text/css" href="/css/MGS.css" title="killzone" />

<script language="JavaScript" type="text/javascript" src="/css/styleswitch.js"></script>

 

---------------------------------------------

 

<a href="css/killzone.css" onclick="setActiveStyleSheet('killzone'); return false;">Killzone</a>| 

<a href="css/MGS.css" onclick="setActiveStyleSheet('MGS'); return false;">MGS</a>

<a href="css/defaultcss.css" onclick="setActiveStyleSheet('defaultcss'); return false;">DEFAULT</a>

[dbrimlow]

<link rel="alternate stylesheet" type="text/css" href="/css/killzone.css" title="killzone" />

<link rel="alternate stylesheet" type="text/css" href="/css/MGS.css" title="killzone" />

 

You need a unique title for each css ... you are using killzone twice.