How to use cookies to store background color choices

**shinystar** · 04-26-2009, 01: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?

HTML Code:

<!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, 02:12 PM

The cookie code is from Quirksmode. Notice that I've moved the stylesheet link to before the script and gotten rid of the local drive stylesheet link:

Code:

<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, 02: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, 03:00 PM

Nothing. I made a typo, leaving out a closing parenthesis, it should be (the line above is wrong as well):

Code:

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, 05: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, 06: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.

**si1** · 03-09-2012, 09:58 AM

Hello I have a simular problem with storing color in the individual cells using cookies. I would like the user to be able to edit each cell and be able to save or store it so that everyone can see the changes when visiting my website. Thank you in advance.

Code:

 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css"></style>
<script type="text/javascript"></script>
</head>
<body>


<!-- Body Code -->



<!-- HTML frag_2 -->


<div style="position:absolute; left:0px; top:0px; width:192px; height:192px; " >

    <div id="frag_2" style="text-align:left; " >
<table id="table_1" cellspacing="0" cellpadding="0" style="background-color:#ffffff; border-collapse: collapse; position:absolute; left:100px; top:439px; width:211px; height:136px; " >

<tr id="table_1_R01">

<td id="table_1_R01C01" style="width:14%; height:16%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C">Su</span></p>
</td>


<td id="table_1_R01C02" style="width:15%; height:16%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C">Mo</span></p>
</td>


<td id="table_1_R01C03" style="width:14%; height:16%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C">Tu</span></p>
</td>


<td id="table_1_R01C04" style="width:16%; height:16%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C">We</span></p>
</td>


<td id="table_1_R01C05" style="width:14%; height:16%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C">Th</span></p>
</td>


<td id="table_1_R01C06" style="width:14%; height:16%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C">Fr</span></p>
</td>


<td id="table_1_R01C07" style="width:14%; height:16%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C">Sa</span></p>
</td>

</tr>
<tr id="table_1_R02">

<td id="table_1_R02C01" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">&nbsp;</span></p>
</td>


<td id="table_1_R02C02" style="width:15%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">&nbsp;</span></p>
</td>


<td id="table_1_R02C03" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">&nbsp;</span></p>
</td>


<td id="table_1_R02C04" style="width:16%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">&nbsp;</span></p>
</td>


<td id="table_1_R02C05" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">1</span></p>
</td>


<td id="table_1_R02C06" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">2</span></p>
</td>


<td id="table_1_R02C07" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">3</span></p>
</td>

</tr>
<tr id="table_1_R03">

<td id="table_1_R03C01" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">4</span></p>
</td>


<td id="table_1_R03C02" style="width:15%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">5</span></p>
</td>


<td id="table_1_R03C03" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">6</span></p>
</td>


<td id="table_1_R03C04" style="width:16%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">7</span></p>
</td>


<td id="table_1_R03C05" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">8</span></p>
</td>


<td id="table_1_R03C06" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">9</span></p>
</td>


<td id="table_1_R03C07" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">10</span></p>
</td>

</tr>
<tr id="table_1_R04">

<td id="table_1_R04C01" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">11</span></p>
</td>


<td id="table_1_R04C02" style="width:15%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">12</span></p>
</td>


<td id="table_1_R04C03" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">13</span></p>
</td>


<td id="table_1_R04C04" style="width:16%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">14</span></p>
</td>


<td id="table_1_R04C05" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">15</span></p>
</td>


<td id="table_1_R04C06" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">16</span></p>
</td>


<td id="table_1_R04C07" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">17</span></p>
</td>

</tr>
<tr id="table_1_R05">

<td id="table_1_R05C01" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">18</span></p>
</td>


<td id="table_1_R05C02" style="width:15%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">19</span></p>
</td>


<td id="table_1_R05C03" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">20</span></p>
</td>


<td id="table_1_R05C04" style="width:16%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">21</span></p>
</td>


<td id="table_1_R05C05" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">22</span></p>
</td>


<td id="table_1_R05C06" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">23</span></p>
</td>


<td id="table_1_R05C07" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">24</span></p>
</td>

</tr>
<tr id="table_1_R06">

<td id="table_1_R06C01" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">25</span></p>
</td>


<td id="table_1_R06C02" style="width:15%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">26</span></p>
</td>


<td id="table_1_R06C03" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">27</span></p>
</td>


<td id="table_1_R06C04" style="width:16%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">28</span></p>
</td>


<td id="table_1_R06C06" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; " >
<p class="Normal-P"><span class="Normal-C0">30</span></p>
</td>


<td id="table_1_R06C07" style="width:14%; height:17%; vertical-align:top; padding:1px 4px 1px 4px; border:1px solid #000000; "onclick="this.style.color='#000000'; this.style.backgroundColor = '#00FFFF'; "onclick="changeColor(table_1_R06C07); "onclick="this.style.backgroundColor = '#FF0000'">
<p class="Normal-P"><span class="Normal-C0">31</span></p>
</td>

</tr>

</table>
    </div></div>
<script type="text/javascript">
var tdOA = document.getElementById('table_1').getElementsByTagName('td');
var cellColours = ['white','grey','red','blue'];
 //assign the initial cell colour to each cell and the onclicks
for(i=0; i < tdOA.length; i++){
tdOA[i].curCol = 0;
tdOA[i].style.backgroundColor = cellColours[tdOA[i].curCol];
tdOA[i].onclick=function(){
this.curCol = (++this.curCol == cellColours.length)? 0 : this.curCol;
this.style.backgroundColor = cellColours[this.curCol];
}
}
</script>
</body>

</html>

**jscheuer1** · 03-09-2012, 01:23 PM

Since this is an old thread, please start a new thread for a new question.

You can refer back to this thread if you like.

However, javascript alone cannot:

I would like the user to be able to edit each cell and be able to save or store it so that everyone can see the changes

You'd need server side code for that.

Thread: How to use cookies to store background color choices

Thread Tools

Search Thread

How to use cookies to store background color choices

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions