DaniWeb IT Discussion Community - save and load font and background setting using cookies

hi

i am new to javascript and i try to play around with it but i am stuck at the moment lol
hope that someone can help me check my code and tell me what is wrong with it

in the page the user can change the background color and the font family so when they open the website, the background and the font they selected is load back



<html>



<head>



<!--background color function-->

<script type="text/javascript">

function changeBackgroundColor(elem, dropper) {

  document.getElementById(elem).style.backgroundColor = dropper.options[dropper.selectedIndex].value;

}

</script>



<!--font family function-->

<script type="text/javascript">

function changeFontFamily(elem, dropper) {

  document.getElementById(elem).style.fontFamily = dropper.options[dropper.selectedIndex].value;

}

</script>











<!--cookie script-->

<script language="JavaScript">

var expDays = 100;

var exp = new Date(); 

exp.setTime(exp.getTime() + (expDays*24*60*60*1000));



function getCookieVal (offset) {  

        var endstr = document.cookie.indexOf (";", offset);  

        if (endstr == -1) { endstr = document.cookie.length; }

        return unescape(document.cookie.substring(offset, endstr));

}



function GetCookie (name) {  

        var arg = name + "=";  

        var alen = arg.length;  

        var clen = document.cookie.length;  

        var i = 0;  

        while (i < clen) {    

                var j = i + alen;    

                if (document.cookie.substring(i, j) == arg) return getCookieVal (j);    

                i = document.cookie.indexOf(" ", i) + 1;    

                if (i == 0) break;   

        }  

        return null;

}



function SetCookie (name, value) {  

        var argv = SetCookie.arguments;  

        var argc = SetCookie.arguments.length;  

        var expires = (argc > 2) ? argv[2] : null;  

        var path = (argc > 3) ? argv[3] : null;  

        var domain = (argc > 4) ? argv[4] : null;  

        var secure = (argc > 5) ? argv[5] : false;  

        document.cookie = name + "=" + escape (value) + 

        ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + 

        ((path == null) ? "" : ("; path=" + path)) +  

        ((domain == null) ? "" : ("; domain=" + domain)) +    

        ((secure == true) ? "; secure" : "");

}



function cookieForms() {  

        var mode = cookieForms.arguments[0];

        for(f=1; f<cookieForms.arguments.length; f++) {

                formName = cookieForms.arguments[f];

                if(mode == 'open') {        

                        cookieValue = GetCookie('saved_'+formName);

                        if(cookieValue != null) {

                                var cookieArray = cookieValue.split('#cf#');

                                if(cookieArray.length == document[formName].elements.length) {

                                        for(i=0; i<document[formName].elements.length; i++) {

                                                if(cookieArray[i].substring(0,6) == 'select') { document[formName].elements[i].options.selectedIndex = cookieArray[i].substring(7, cookieArray[i].length-1); }

                                                else if((cookieArray[i] == 'cbtrue') || (cookieArray[i] == 'rbtrue')) { document[formName].elements[i].checked = true; }

                                                else if((cookieArray[i] == 'cbfalse') || (cookieArray[i] == 'rbfalse')) { document[formName].elements[i].checked = false; }

                                                else { document[formName].elements[i].value = (cookieArray[i]) ? cookieArray[i] : ''; }

                                        }

                                }

                        }

                }



                if(mode == 'save') {        

                        cookieValue = '';

                        for(i=0; i<document[formName].elements.length; i++) {

                                fieldType = document[formName].elements[i].type;

                                if(fieldType == 'password') { passValue = ''; }

                                else if(fieldType == 'checkbox') { passValue = 'cb'+document[formName].elements[i].checked; }

                                else if(fieldType == 'radio') { passValue = 'rb'+document[formName].elements[i].checked; }

                                else if(fieldType == 'select-one') { passValue = 'select'+document[formName].elements[i].options.selectedIndex; }

                                else if(fieldType == 'select-one') { passValue = 'select'+document[formName].elements[i].options.selectedIndex; }

                                else { passValue = document[formName].elements[i].value; }

                                cookieValue = cookieValue + passValue + '#cf#';

                        }

                        cookieValue = cookieValue.substring(0, cookieValue.length-4); 

SetCookie('saved_'+formName, cookieValue, exp);                

                }        

        }

}

</script>



</head>



<body onload="cookieForms('open', 'yourform')" onunload="cookieForms('save', 'yourform')">



<form name="yourform" bgcolor = "yellow">



<div id="hey">



<center>



<td>

<select onchange="changeBackgroundColor('hey', this);">

<option value="">Background Color</option>

<option value="Blue">Blue</option>

<option value="Green">Green</option>

<option value="Orange">Orange</option>

<option value="Red">Red</option>

<option value="Violet">Violet</option>

<option value="Yellow">Yellow</option>

</select>

</td>



</br>

</br>





<td>

<select onchange="changeFontFamily('hey', this);">

<option value="">Font Family</option>

<option value="Arial">Arial</option>

<option value="Helvetica">Helvetica</option>

<option value="Tahoma">Tahoma</option>

<option value="Times New Roman">Times New Roman</option>

<option value="Verdana">Verdana</option>

</select>

</td>





</br>

</br>

<a onClick=document.getElementById('hey').style.backgroundColor='red'> Make it Red!</a> ----

<a onClick=document.getElementById('hey').style.backgroundColor='#99FFCC'> Make it Sort of Green!!!</a>



</br>

</br>

<a onClick=document.getElementById('hey').style.fontSize='10'> Make it Tiny!</a> ----

<a onClick=document.getElementById('hey').style.fontSize='24'> Make it HUGE!!!</a>



</br>

</br>

<a onClick=document.getElementById('hey').style.fontFamily='courier'> Make it COURIER!</a> ----

<a onClick=document.getElementById('hey').style.fontFamily='verdana'> Make it VERDANA!!!</a>



</br>

</br>





<p>Text Fields: 

  <input type="text" name="1" value="">

 </p>

 <p>Passwords: 

  <input type="password" name="2" value="">

  <br>

  (won't be saved)</p>

 <p>TextAreas: 

  <textarea name="3"></textarea>

 </p>

 <p>Dropdowns: 

  <!--<select name="4">-->

 <td>

<select onchange="changeBackgroundColor('hey', this);">

<option value="">Background Color</option>

<option value="Blue">Blue</option>

<option value="Green">Green</option>

<option value="Orange">Orange</option>

<option value="Red">Red</option>

<option value="Violet">Violet</option>

<option value="Yellow">Yellow</option>

</select>

</td>

  

 <p>Checkboxes: 

  <input type="checkbox" name="5" value="ummm">

 </p>

 

 <p>Radio Buttons: 

  <input type="radio" name="6" value="snuh">

  <input type="radio" name="6" value="whuf">

 </p>

 

 </div>





</form>

















<!--not yet implemented-->

</br>

</br>

<input type=button value="Save Cookie!" onClick="javascript:changeBG(this)">



<!--not yet implemented-->

</br>

</br>

<input type=button value="Reset to Default!" onClick="javascript:changeBG(this)">











</body>

</html>

try copy and paste my code first

if someone select the value in the background color to red, when they reload the page the value in the list box still red
but the page color is not red, it is back to white again
i dont know how to make the page red

can you guys help me please.

thank you

regards,

ayi

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="#inline" media="all"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Essential's Demo</title>
<style id="inline" type="text/css" media="all">
body { background-color: #00F; color: #FFF; }
</style>

<script type="text/javascript">
/* (c) Copyright 2008-2009 Essential Works. All rights reserved. ~

Permission granted for the use of this script, as long as all credits ramain as is.

This code has been tested and before released and working 100% with OP8 and IE */

function setCookie(name, value, expires, path, domain, secure) {
expires = expires ? '; expires=' + expires.toGMTString() : '';
path = path ? '; path=' + path : '';
domain = domain ? '; domain=' + domain : '';
secure = secure ? '; secure' : '';
var cookies = name + '=' + escape(value) + expires + path + domain + secure;
document.cookie = cookies;
}

function getCookie(name) {
var thisName = name + '=';
var firstIndex = document.cookie.indexOf(thisName);
if (firstIndex == -1) { return null; }
var lastIndex = document.cookie.indexOf(';',firstIndex + thisName.length);
if (lastIndex == -1) { lastIndex = document.cookie.length;
return unescape(document.cookie.substring(firstIndex + thisName.length, lastIndex)); }
}

function deleteCookie(name, path, domain) {
if (getCookie(name)) {
document.cookie = name +"=" + path + domain +
"; expires=Thu, 01-Jan-10 00:00:01 GMT"
} }
function cookieDate(date) {
var thisDate = new Date(0);
var refDate = thisDate.getTime();

if ( refDate > 0 ) { date.setTime(date.getTime() - refDate); }
}

function saved() {
var now = new Date();
cookieDate(now)

var lists = document.all ? document.all.frm : document.forms['frm'];

now.setTime(now.getTime() + (31 * 24 * 60 * 60 * 1000));
var name = getCookie('name');
name = lists.lst.options[lists.lst.selectedIndex].value;
setCookie('name', name, now);
}
function themes() {

var loadStyle = document.all ? document.all.inline : document.getElementById('inline');

/* There are alot of ways to this, just keep those mind workin. Here's the basic of it and i hope you appreciate this. */

var form = document.all ? document.all.frm : document.forms['frm'];

/* Ok, let's say (for example you have this two style sheets, named as "black.css" and the other one is "white.css")
Now all you need to do is to - apply specific rules on this css documents, which is the "black.css" and "white.css"
*/

switch(getCookie(name)) {
case 'black.css' : form.lst.selectedIndex = 1; break;
case 'white.css' : form.lst.selectedIndex = 2; break;
default : alert('Please select a theme on the list!'); }
loadStyle.innerHTML = '@import "' + getCookie(name) + '";'; }

if (window.addEventListener)
window.addEventListener('load',themes,false);
else if (window.attachEvent)
window.attachEvent('onload',themes);
else if (document.getElementById)
window.onload = theme;

</script>
</head>
<body>
<h1>Essential Works</h1>
<form id="frm" action="javascript:void(0);">
<div>
<select name="lst" size="1" onchange="saved();">
<option value="none" selected="selected">Select Your Theme</option>



<option value="black.css">Black Theme</option>

<option value="white.css">White Theme</option>
</select>
</div>
</form>
</body>
</html>

<html>
<head>

<title>None</title>


<script type="text/javascript">
function changeFontFamily(elem, dropper) {
document.getElementById(elem).style.fontFamily = dropper.options[dropper.selectedIndex].value;
}
</script>


<script type="text/javascript">
function changeFontColor(elem, dropper) {
document.getElementById(elem).style.color = dropper.options[dropper.selectedIndex].value;
}
</script>


<script type="text/javascript">
function changeBackgroundColor(elem, dropper) {
document.getElementById(elem).style.backgroundColor = dropper.options[dropper.selectedIndex].value;
}
</script>


<script type="text/javascript">
function changeFontSize(elem, dropper) {
document.getElementById(elem).style.fontSize = dropper.options[dropper.selectedIndex].value;
}
</script>







</head>
<body>

<form>


<div id="test">This is supposed to be a nice little navbar. Select a new font to change this one's</div>

</br>
</br>
<div id="position" style="visibility:visible;position:absolute;bottom:0px; right:0px">
<center>
<table width="100%" border ="4" background="raindrop.jpg" >

<td>
<select onchange="changeFontFamily('test', this);">
<option value="">Font Family</option>
<option value="Arial">Arial</option>
<option value="Helvetica">Helvetica</option>
<option value="Tahoma">Tahoma</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</option>
</select>
</td>

<td>
<select onchange="changeFontColor('test', this);">
<option value="">Font Color</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Orange">Orange</option>
<option value="red">Red</option>
<option value="Violet">Violet</option>
<option value="Yellow">Yellow</option>
</select>
</td>

<td>
<select onchange="changeBackgroundColor('test', this);">
<option value="">Background Color</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Orange">Orange</option>
<option value="Red">Red</option>
<option value="Violet">Violet</option>
<option value="Yellow">Yellow</option>
</select>
</td>

<td>
<select onchange="changeFontSize('test', this);">
<option value="">Font Size</option>
<option value="x-small">X-Small</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="x-large">X-Large</option>
<option value="xx-Large">XX-Large</option>
</select>
</td>
</table>
</center>
</div>





</body>
</html>

<html>

<head>

<script type="text/javascript">
function bakeCookie(name,value){
args=arguments;argc=args.length;
expires=(argc>2) ? args[2] : null;
path=(argc>3) ? args[3] : null;
domain=(argc>4) ? args[4] : null;
secure=(argc>5) ? args[5] : false;
expDate=new Date();day=24*60*60*1000;
if(expires){expDate.setTime(expDate.getTime()+expires*day);}
document.cookie=name+"="+escape(value)+
((expires===null) ? "" : ("; expires="+expDate.toUTCString()))+
((path===null) ? "" : ("; path="+path))+
((domain===null) ? "" : ("; domain="+domain))+
((secure===true) ? "; secure" : "");
}
</script>

<script type="text/javascript">
function eatCookieVal(name) {
endstr=document.cookie.indexOf(";",name);
if(endstr===-1) {endstr=document.cookie.length;}
return unescape(document.cookie.substring(name,endstr));
}
function eatCookie(name) {
arg=name+"="; alen=arg.length;
clen=document.cookie.length; i=0;
while (i<clen) {
j=i+alen;
if(document.cookie.substring(i,j)===arg){
return eatCookieVal(j);
}
i=document.cookie.indexOf(" ",i)+1;
if(i===0){break;}
}
}
</script>

<script type="text/javascript">
function newColor2(entry,areaID){ // use DOM method
bakeCookie("colorSet",entry,7); // save for a week
if (!areaID){areaID="body";} // default to whole body
document.getElementById(areaID).style.background=entry;
}
</script>

<script type="text/javascript">
function newFont(entry,areaID){ // use DOM method
bakeCookie("fontSet",entry,7); // save for a week
if (!areaID){areaID="body";} // default to whole body
document.getElementById(areaID).style.fontFamily=entry;
}
</script>

<script type="text/javascript">
function isColorSet(areaID) { // points at color element

colorSet=null;
if(!(colorSet=eatCookie("colorSet"))){colorSet=null;}
if(colorSet!==null){newColor2(colorSet,areaID);}

fontSet=null;
if(!(fontSet=eatCookie("fontSet"))){fontSet=null;}
if(fontSet!==null){newFont(fontSet,areaID);}

}
</script>

</head>


<body id="body" onload="isColorSet()">
<form action="" onsubmit="return false;">

<fieldset>
<legend>Radio Background Color Selector</legend>
<label>Aquamarine:<input name="radCol" type="radio"
onclick="newColor2('Aquamarine');"/></label>
<label>Burlywood:<input name="radCol" type="radio"
onclick="newColor2('Burlywood');"/></label>
<label>Floralwhite:<input name="radCol" type="radio"
onclick="newColor2('Floralwhite');"/></label><br>
<label>Goldenrod:<input name="radCol" type="radio"
onclick="newColor2('Goldenrod');"/></label>
<label>Peachpuff:<input name="radCol" type="radio"
onclick="newColor2('Peachpuff');"/></label>
</fieldset>

</br>
</br>

<fieldset>
<legend>Radio Background Font Selector</legend>
<label>Verdana:<input name="radCol" type="radio"
onclick="newFont('Verdana');"/></label>
<label>Arial:<input name="radCol" type="radio"
onclick="newFont('Arial');"/></label>
<label>Tahoma:<input name="radCol" type="radio"
onclick="newFont('Tahoma');"/></label>
</fieldset>

</br>
</br>

<fieldset>
<legend>Listbox Color Selector</legend>
<select onchange="newColor2('body', this);">
<option value="">Background Color</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Orange">Orange</option>
<option value="Red">Red</option>
<option value="Violet">Violet</option>
<option value="Yellow">Yellow</option>
</select>
</fieldset>

</br>
</br>

BLA BLA BLA BLA BLABLA BLA BLA BLA

</form>

</body>

</html>