PDA

View Full Version : How to use cookies to store background color choices

shinystar
04-26-2009, 02:49 PM
hi i need a cookie to store the background colour which the user chooses. here is my code. how would i put a cookie into it?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="file:///C|/Users/Amanda/Documents/Compaction/amandastyle.css" rel="stylesheet" type="text/css" />
<script language="JavaScript">
<!--

var backColor = new Array();

backColor[0] = '#FFCCFF';
backColor[1] = '#CCFFFF';
backColor[2] = '#99FFCC';
backColor[3] = '#CCCCFF';
backColor[4] = '#FFFFFF';
backColor[5] = '#CCCCCC';


function changeBG(whichColor){
document.bgColor = backColor[whichColor];
}

-->
</script>
<link href="amandastyle.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">Content for id "container" Goes Here
<div id="links">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>&nbsp;</h3>
<p><a href="index.html">Home </a></p>
<p><a href="login.html">Log In</a></p>
<p><a href="tc.html">Text Compaction</a></p>
<p><a href="info.html">Info</a></p>
<p><a href="links.html">Links</a></p>
</div>
<div id="text">
<p align="center"> Click a colour to change background</p>
<p align="center"><a href="javascript:changeBG(0)">pink</a></p>
<p align="center"><a href="javascript:changeBG(1)">blue</a></p>
<p align="center"><a href="javascript:changeBG(2)">green</a></p>
<p align="center"><a href="javascript:changeBG(3)">purple</a></p>
<p align="center"><a href="javascript:changeBG(4)">white</a></p>
<p align="center"><a href="javascript:changeBG(5)">gray</a></p></div>
<div class="titles" id="webbanner"><span class="cstitles">Home</span> </div>
</div>
</body>
</html>
jscheuer1
04-26-2009, 03:12 PM
The cookie code is from Quirksmode (http://www.quirksmode.org/js/cookies.html#script). Notice that I've moved the stylesheet link to before the script and gotten rid of the local drive stylesheet link:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="amandastyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--

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 var 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;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}

var backColor = new Array();

backColor[0] = '#FFCCFF';
backColor[1] = '#CCFFFF';
backColor[2] = '#99FFCC';
backColor[3] = '#CCCCFF';
backColor[4] = '#FFFFFF';
backColor[5] = '#CCCCCC';


function changeBG(whichColor){
document.body.style.backgroundColor = backColor[whichColor];
createCookie('backColor', whichColor);
}

if(readCookie('backColor'))
document.write('<style type="text/css">body {background-color: ' + backColor[readCookie("backColor")] + ';}<\/style>');

-->
</script>
</head>

I've also changed the "document.bgColor" to "document.body.style.backgroundColor" which will work better with any background color already set for the body, whether set by the cookie or in the stylesheet.
shinystar
04-26-2009, 03:29 PM
Hi, thanks very much for your quick reply. I posted it in my dreamweaver and it says there is a syntax error on this line:

document.write('<style type="text/css">body {background-color: ' + backColor[readCookie("backColor"] + ';}<\/style>'); (line 52)

What am i doing wrong?
jscheuer1
04-26-2009, 04:00 PM
Nothing. I made a typo, leaving out a closing parenthesis, it should be (the line above is wrong as well):

if(readCookie('backColor'))
document.write('<style type="text/css">body {background-color: ' + backColor[readCookie("backColor")] + ';}<\/style>');

I will fix it in my original post, as well.
shinystar
04-26-2009, 06:41 PM
Hi that works great thanks. I have 4 other pages in the site too. Is it possible to keep the background colour choice throughout the site?
jscheuer1
04-27-2009, 07:19 AM
If you put the script on all 4 pages, or make it external and link it to all 4 pages, it should work for all 4 pages, as the cookie is a site wide cookie.