PDA

View Full Version : 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?


<!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 (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, 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):


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.



<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.