javascript color picker cookies, help needed

[AMADH]

Hello,

I have created a javascript script to select a color for the css theme. I have it working great for picking, but the problem is when I refesh it goes back to the default. I was wondering if somone might know why my cookies are not saving?

from html page

<link href="css/b2.css"  type="text/css" media="all" rel="stylesheet" rev="stylesheet" title="default" />
<link href="css/red.css" rel="alternate stylesheet" rev="alternate stylesheet" title="red" />
<link href="css/green.css" rel="alternate stylesheet" rev="alternate stylesheet" title="green" />
	<script src="javascript/styleSwitcher.js" language="javascript1.5" type="text/javascript"></script>
</head>

then in the html body

<form action="#">
	<input type="button" id="typeBtn" value=" " onclick="setActiveStylesheet('default')" />&nbsp;&nbsp;
	<input type="button" id="typeBtn2" value=" " onclick="setActiveStylesheet('red')" />&nbsp;&nbsp;
    	<input type="button" id="typeBtn3" value=" " onclick="setActiveStylesheet('green')" />
</form>

and last my styleswitcher

window.onload = initStyle;
window.onunload = unloadStyle;

function initStyle() {
	thisCookie = cookieVal("style");
	var title;
	if (thisCookie) {
		title = thisCookie
	}
	else {
		title = getPreferredStylesheet();
	}
	setActiveStylesheet(title);
	var allButtons = document.getElementsByClassName("input");
	for (i=0;i<allButtons.length;i++){
		if(allButtons[i].type == "button"){
			allButton[i].onclick = setActiveStylesheet;
		}
	}
}


 function unloadStyle() {
	expireDate = new Date();
	expireDate.setYear(expireDate.getYear()+1)
	document.cookie = "style="+getActiveStylesheet() +
	"; path=/; expires="+expireDate.toGMTString();
}

function getPreferredStylesheet() {
	var thisLink, relAttribute;
	var linksFound = document.getElementsByTagName("link");
	for (i=0; i<linksFound.length; i++) {
		thisLink = linksFound[i];
		relAttribute = thisLink.getAttribute("rel");
		if (thisLink.getAttribute("rel").indexOf("style") > -1 && thisLink.getAttribute("rel").indexOf("alt") == -1 && thisLink.getAttribute("title")) {
		 	return thisLink.getAttribute("title");
		}
	}
	return "";
}




function getActiveStylesheet() {
	var thisLink;
	var linksFound = document.getElementsByTagName("link");
	for (var i=0; i<linksFound.length; i++) {
		thisLink = linksFound[i];
    	if (thisLink.getAttribute("rel").indexOf("style") > -1 && thisLink.getAttribute("title") && !thisLink.disabled) {
			return thisLink.getAttribute("title");
			
		}
	}
	return "";
}

function setActiveStylesheet(inVal) {
	var thisLink, title;
	var linksFound = document.getElementsByTagName("link");
	if(inVal){
		if(typeof inVal == "string"){
			title = inVal;
		}
		else{
			title = inVal.target.id;
		}
	}
	else{
	title = window.event.srcElement.id;
	}

for(var i=0; i<linksFound.length; i++){
	thisLink = linksFound[i];
	if(thisLink.getAttribute("rel").indexOf("style") > -1 && 
	thisLink.getAttribute("title")){
		thisLink.disabled = true;
		if(thisLink.getAttribute("title") == title){
			thisLink.disabled = false;
		}
	}
}
}
	



function cookieVal(cookieName) {
	var thisCookie = document.cookie.split("; ");
	for (var i=0; i<thisCookie.length; i++) {
		if (cookieName == thisCookie[i].split("=")[0]) {
			return thisCookie[i].split("=")[1];
		}
	}
	return ""
}

[Taywin]

Where do you set your cookie? You just read cookie -> set CSS -> display... You need to set cookie after you set the CSS too; otherwise, reading cookie will always return an empty string because no cookie is set.

[AMADH]

Hi Taywin,

Thanks for your help, I was having difficulty with my initStyle function. But I got it working so all's well.

Thanks again,

Aaron

Where do you set your cookie? You just read cookie -> set CSS -> display... You need to set cookie after you set the CSS too; otherwise, reading cookie will always return an empty string because no cookie is set.