save and load font and background setting using cookies

**ayi_102** · 01-14-2009, 11:17 PM

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

Code:

<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

**jscheuer1** · 01-16-2009, 10:10 AM

You may want to see:

http://www.dynamicdrive.com/dynamici...etswitcher.htm

**ayi_102** · 01-17-2009, 03:56 AM

This one is working example

but i want to change it into listbox instead of radio button

Code:

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

<!--Start the html body-->
<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>

it works with radio button but not with listbox
i dont know how to make the listbox works

hope that someone can help me

i try using the css stylesheet to change the background and it works

this is the real problem where i cannot use css to changethe background

assume that there are several option for user

background color = red, green, blue
font color = red, green, blue, black
font type = arial, times, verdana, tahoma
font size = small, medium, large, x-large, xx-large

lets assume that someone want to choose:
background color = red
font color = green
font type = verdana
font size = medium

that is mean that i have to make css page that can handle those requirements

what about if that person want to change the page like:
background color = green
font color = blue
font type = times
font size = xx-large

that is another page which is mean another css file, right

so there gonna be lots of css then to meet all the possibilities that can happens

this is why i cannot use css

and i kind of confuse now

thank you in advance

Thread: save and load font and background setting using cookies

Thread Tools

Search Thread

save and load font and background setting using cookies

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions