Code not reading cookies in Chrome

Saymos · 01-13-2013, 06:08 PM

I have a bit of a problem... I have found javascript-code that is suppose to work for changing style sheets and then remember them by creating cookies. The problem for me I'm very new to javascript so I don't understand most of the code. The problem is that I don't really know how to call the functions in the code in a way so that it will work for me. The code I have is:

HTML-code

Code:

<head>
<link href="default.css" title="default" rel="stylesheet" type="text/css" />
<link href="theme1.css" title="theme1" rel="stylesheet" type="text/css" />
<link href="theme2.css" title="theme2" rel="stylesheet" type="text/css" />
<link href="theme3.css" title="theme3" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="javascript.js"></script>
</head>

<body>

Theme
<ul id="dropdown">
	<li> Choose theme
		<ul> 
			<li id="stylesheet1" > <a href="#"> Default </a></li>
		    <li id="stylesheet2" > <a href="#"> Theme 1 </a></li>
			<li id="stylesheet3" > <a href="#"> Theme 2 </a></li>
		    <li id="stylesheet4" > <a href="#"> Theme 3 </a></li>
		</ul>
	</li>
</ul> 

</body>

The javascript code is all in a separate document and the code is this:

Code:

// JavaScript Document

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;
    }
	createCookie("style", title, 365);
  } 
}

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


function initate()
{


document.getElementById("stylesheet1").onclick = function() {
   setActiveStyleSheet("default");
   return false
};
document.getElementById("stylesheet2").onclick = function() {
   setActiveStyleSheet("theme1");
   return false
};
document.getElementById("stylesheet3").onclick = function() {
   setActiveStyleSheet("theme2");
   return false
};
document.getElementById("stylesheet4").onclick = function() {
   setActiveStyleSheet("theme3");
   return false
};
	          
}

window.onload = initate;

I don't want to use any libraries and I don't want to have my eventhandlers in the HTML-document, therefor I created the function initiate. I got it to work for changing style sheets but I'm not sure how to get it to work to create and read cookies as well. I would love some help on this matter!

UPDATE:

Edited the code and now it works great in Firefox and IE but it doesn't work in Chrome for some reason. The code writes the cookie like it is suppose to but it doesn't read it when I reload the page or reopen it.