Reading cookies working in Firefox/IE, NOT Chrome

Question

I've got a code that works to change style sheets and saving them in cookies in Firefox and IE but it doesn't work in Chrome.

This is the code I'm using:

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

And the javascript.js contains this:

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


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;

It does work to change the style sheet in Chrome but when I reload the page it doesn't keep the chosen style sheet like it does in IE and Firefox. I can't figure why it doesn't work in Chrome. I'm new to javascript and most of the code used is not written by me but taken from different places so I don't really understand most of it.

Just so that you are aware, your massive blob of JavaScript could be about half that length if you used jQuery or any other DOM-manipulating JS library. — user229044, Jan 14 '13 at 19:31
@meagar I am aware of that but I want to have regular JS code for this — Benji, Jan 14 '13 at 19:33
In having "regular JS code" for this, you've produced a huge amount of code which is very broken. — user229044, Jan 14 '13 at 19:41
@meagar Like I said, I'm new to this and I want to use regular javascript for this one. I'd love if you could point out the code that makes this not working in Chrome. — Benji, Jan 14 '13 at 19:49
have a look at this other stackoverflow question http://stackoverflow.com/questions/7968621/simple-persistent-stylesheet-switcher?rq=1 it has a link to a style switcher. it's very similar to yours, just a couple of tweaks — Rachel Gallen, Jan 14 '13 at 19:44
I have looked a lot on that code but when I tried it, it didn't work in Chrome either. — Benji, Jan 14 '13 at 19:50
:( oh well i don't think i deserved a downvote for trying though — Rachel Gallen, Jan 14 '13 at 19:52
my stylesheets work on vicchesnuttrelief.com in chrome. have a look at the source. — Rachel Gallen, Jan 14 '13 at 19:56
@RachelGallen If I try using your code it is still the same problem as with mine. It works in Firefox but doesn't read the cookie in Chrome. It does save the value of it but it doesn't read it. — Benji, Jan 14 '13 at 20:14
that's odd. what version of chrome do you have? do you import both stylesheets when you try to enlarge the text? — Rachel Gallen, Jan 14 '13 at 20:15
@RachelGallen I have Version 23.0.1271.97m version of Chrome. I think the only difference I can see between our codes is that you use `rel="alternate style sheet"` on some of your style sheets while I don't. I'm going to experiment if this is the issue. — Benji, Jan 14 '13 at 20:25
@RachelGallen Doesn't make any change if I keep them the same way you do. — Benji, Jan 14 '13 at 20:31
check out this http://stackoverflow.com/questions/3084892/less-js-not-working-in-chrome/11378914#11378914 — Rachel Gallen, Jan 14 '13 at 20:38
@RachelGallen I've tried around with changing a bit like above but I can't figure out how to get it to work. — Benji, Jan 14 '13 at 21:03
OK, I found an extension that can access alternate style sheets: https://chrome.google.com/webstore/detail/daodklicmmjhcacgkjpianadkdkbkbce?hl=en# — Rachel Gallen, Jan 14 '13 at 21:12
@RachelGallen Thanks, but sadly I can't count that every user is going to download this extension to be able to change the style sheets. — Benji, Jan 14 '13 at 21:16
apparently chrome won't allow alternate stylesheets unless they are hosted on a secure server. mine is secure. i read it here http://www.wufoo.com/forums/discussion/5138/custom-css-doesnt-load-in-chrome/p1 — Rachel Gallen, Jan 14 '13 at 21:25
@RachelGallen But it does work to change the style sheets but it just doesn't read the function from the cookie. — Benji, Jan 14 '13 at 21:45

user229044 · Answer 1 · 2013-01-14T19:44:57.127

0

You're overwriting your previous onclick handler, only the second one is being executed:

document.getElementById("stylesheet1").onclick = function() {
    createCookie(T1, style, 7);
};

...

var style1 = document.getElementById("stylesheet1");

style1.onclick = function () { 
  setActiveStyleSheet("default"); 
  return false;
};

To put my comments about using jQuery into perspective, your entire initiate function, currently about 50 lines, could be rewritten this way, in about 7 lines:

$("li a").click(function () {
   # Turn our text ("Theme 1") into the name of the sheet ("theme1")
   var sheetName = $(this).text().toLowerCase().replace(/ /g, "");

   createCookie(T1, sheetName, 7)
   setActiveStyleSheet(sheetName); 
});

edited Jan 14 '13 at 19:44

answered Jan 14 '13 at 19:39

user229044

232,980
40
330
338

I just noticed the same thing.. I removed the first one as it doesn't seem to work. I updated the question as well. But it's still the same problem in Chrome though. – Benji Jan 14 '13 at 19:46
Made the first one work properly and then removed the second one now. It's a bit less code now even if it's not really as with jQuery. But I don't want to use library as mentioned before. – Benji Jan 14 '13 at 20:04
Do you have any solution to the script not working in Chrome? – Benji Jan 14 '13 at 22:08

Reading cookies working in Firefox/IE, NOT Chrome

1 Answers1