I have pieced together some code that i've tested and everything works great except one thing.
The script takes and stores the name of the cookie, which in this case is "ColorTheme" and stores the given value of either blue, red, or yellow. Then reloads the page. The next part of the script fetches the value of the cookie stored and depending on that value, whether it be blue, red, or yellow, loads different style sheets.
Now if i create a function that just retrieves the value of the cookie then alerts to the user what the value is, then have a button that is clicked on that calls for that function, it works fine. But when I call that function to run automatically at a certain point in the script, the value comes back undefined.
Im going to leave brief comments on certain parts of my code.
Code:
<script type="text/javascript">
<!--
// Cookie function to create the actual cookie
var Cookies = {
init: function () {
var allCookies = document.cookie.split('; ');
for (var i=0;i<allCookies.length;i++) {
var cookiePair = allCookies[i].split('=');
this[cookiePair[0]] = cookiePair[1];
}
},
create: function (name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
this[name] = value;
},
erase: function (name) {
this.create(name,'',-1);
this[name] = undefined;
}
};
Cookies.init();
// function to create a cookie with the value blue
function saveItb(name) {
var b = 'blue';
if (b) {
eraseIt();
Cookies.create(name,b,365);
location.reload(true);
}
}
// function to create a cookie with the value red
function saveItr(name) {
var r = 'red';
if (r) {
eraseIt();
Cookies.create(name,r,365);
location.reload(true);
}
}
// function to create a cookie with the value yellow
function saveIty(name) {
var y = 'yellow';
if (y) {
eraseIt(name);
Cookies.create(name,y,365);
location.reload(true);
}
}
// function to erase the old cookie
function eraseIt(name) {
Cookies.erase(name);
}
//function to load the value of the cookie and depending on the value loads a series of style sheets
function readIt(name) {
var color = Cookies[name]; // this is the part that is not working
alert(color); // this returns the above value as undefined
// everything below this works
if (color=="blue") {
var browser = navigator.appName
if (browser=="Opera")
{
document.write('<link rel="StyleSheet" type="text/css" href="ddsmoothmenuop.css">');
document.write('<link rel="StyleSheet" type="text/css" href="operab.css">');
}
else if (browser=="Microsoft Internet Explorer")
{
document.write('<link rel="StyleSheet" type="text/css" href="ieb.css">');
document.write('<style type="text/css">\n'+
'html .ddsmoothmenu{height: 1%;}\n'+
'</style>');
document.write('<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />');
}
else
{
document.write('<link rel="StyleSheet" type="text/css" href="styleblue.css">');
document.write('<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />');
}
}
else if (color=="red") {
var browser = navigator.appName
if (browser=="Opera")
{
document.write('<link rel="StyleSheet" type="text/css" href="ddsmoothmenuop.css">');
document.write('<link rel="StyleSheet" type="text/css" href="operar.css">');
}
else if (browser=="Microsoft Internet Explorer")
{
document.write('<link rel="StyleSheet" type="text/css" href="ier.css">');
document.write('<style type="text/css">\n'+
'html .ddsmoothmenu{height: 1%;}\n'+
'</style>');
document.write('<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />');
}
else
{
document.write('<link rel="StyleSheet" type="text/css" href="stylered.css">');
document.write('<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />');
}
}
else if (color=="yellow") {
var browser = navigator.appName
if (browser=="Opera")
{
document.write('<link rel="StyleSheet" type="text/css" href="ddsmoothmenuop.css">');
document.write('<link rel="StyleSheet" type="text/css" href="operay.css">');
}
else if (browser=="Microsoft Internet Explorer")
{
document.write('<link rel="StyleSheet" type="text/css" href="iey.css">');
document.write('<style type="text/css">\n'+
'html .ddsmoothmenu{height: 1%;}\n'+
'</style>');
document.write('<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />');
}
else
{
document.write('<link rel="StyleSheet" type="text/css" href="styleyellow.css">');
document.write('<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />');
}
}
else {
var browser = navigator.appName
if (browser=="Opera")
{
document.write('<link rel="StyleSheet" type="text/css" href="ddsmoothmenuop.css">');
document.write('<link rel="StyleSheet" type="text/css" href="operab.css">');
}
else if (browser=="Microsoft Internet Explorer")
{
document.write('<link rel="StyleSheet" type="text/css" href="ieb.css">');
document.write('<style type="text/css">\n'+
'html .ddsmoothmenu{height: 1%;}\n'+
'</style>');
document.write('<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />');
}
else
{
document.write('<link rel="StyleSheet" type="text/css" href="styleblue.css">');
document.write('<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />');
}
}
}
readIt(name);
// -->
</script>