Alternate Stylesheets and JavaScript problem

[SilverLining]

I have one default stylesheet and two alternate stylesheets and am using JavaScript to choose between the three. It also makes use of cookies.

It's been working fine for a few days and all of a sudden now no longer works. I have sometimes noticed that it stops working, but then a quick refresh sorted it all out.

I have not changed the JS. The page loads perfectly and then suddenly "unloads" the default CSS. When selecting CSS > Select Styles from the Firefox dev toolbar, I can see that all three styles are disabled.

Any ideas why this is happening?

html

<link rel="stylesheet" media="all" type="text/css" href="default.css" title="default" />
<link rel="alternate stylesheet" media="all" type="text/css" href="sml.css" title="small" />
<link rel="alternate stylesheet" media="all" type="text/css" href="bg.css" title="large" />

JavaScript

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

[Fotiman]

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

It looks like you first try to get the cookie and title, and set the active stylesheet as the page is still loading, then then you try again when the window.onload method fires. Also, I'm guessing that the window.onunload method might not be reliable. That is, there is probably a timing issue where memory has already been cleaned up, so perhaps when it calls getActiveStyleSheet(), it gets a null or something, which creates the cookie, but that doesn't get picked up until your window.onload event tries to get it. I would remove the onunload method.

[SilverLining]

Thanks Fotiman, I'll check that out of Monday.

I did forget to post this yesterday:

html

<a id="small" href="#" onclick="setActiveStyleSheet('small'); return false;"><span>small</span></a>
<a id="default" href="#" onclick="setActiveStyleSheet('default'); return false;"><span>default</span></a>
<a id="large" href="#" onclick="setActiveStyleSheet('large'); return false;"><span>large</span></a>

[SilverLining]

To add to this, I have at least five other stylesheets listed before these three stylesheets, though none of them contain titles.

e.g.

<link rel="stylesheet" media="all" type="text/css" href="*.css" />

Would it help to move the JS up to be the first JS file loaded?

[SilverLining]

Hi Fotiman. This seems to now only be happening in IE.

I have removed

window.onunload 

. The problem here is that if one sets a syle it does not get carried through to the following pages.

[Fotiman]

You should change your setActiveStyleSheet method to create the cookie. Then it should work.