AJAX

save and load font and background setting using cookies

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Nov 2008

Posts: 27

Reputation: ayi_102 is an unknown quantity at this point

Solved Threads: 0

ayi_102

Offline

Light Poster

save and load font and background setting using cookies

Jan 14th, 2009

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

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
 
<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>
 
<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<b></b>:changeBG(this)">

<!--not yet implemented-->
</br>
</br>
<input type=button value="Reset to Default!" onClick="javascript<b></b>: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

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: save and load font and background setting using cookies

Jan 15th, 2009

Hi there! Heres the conclusion to your 1st query regarding changing the looks of your page.
This script wil load specific themes' using different style sheets depending on the selection being provided by the user and of course with the help of cookies. It's a compact script, hope youll enjoy this...

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<?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>
 
<!-- Path or filename of your CSS must be declared from the value of this OPTION ~
black.css is the default -->
 
<option value="black.css">Black Theme</option>
<!-- Same process must be applied on this OPTION ~
default is white.css -->
<option value="white.css">White Theme</option>
</select>
</div>
</form>
   </body>
</html>
<?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<b></b>:void(0);">
<div>
<select name="lst" size="1" onchange="saved();">
<option value="none" selected="selected">Select Your Theme</option>

<!-- Path or filename of your CSS must be declared from the value of this OPTION ~
black.css is the default -->

<option value="black.css">Black Theme</option>
<!-- Same process must be applied on this OPTION ~
default is white.css -->
<option value="white.css">White Theme</option>
</select>
</div>
</form>
   </body>
</html>

•

Join Date: Nov 2008

Posts: 27

Reputation: ayi_102 is an unknown quantity at this point

Solved Threads: 0

ayi_102

Offline

Light Poster

Re: save and load font and background setting using cookies

Jan 15th, 2009

if i have lots of option like change the background color : blue, red, black, green and fontfamily : tahoma, arial, verdana fontcolor: red,green, blue

that will be mean that i have to make css file for each possibility that will happen? like blue bgcolor, tahoma, red font then blue bgcolor, arial, green font

howdo you make one cookies with lots of different name?

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: save and load font and background setting using cookies

Jan 15th, 2009

Just a sets of theme so you dont have to choose for the font, font sizes, color, bgcolor and so on...
Ok assuming that i have the following rules in the "black.css"

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
body {
     borderd: none;
     backgroud-color: #000;
     color: #ccc;
     font: normal 12pt/105% Georgia, Arial, sans-serif;
}
body {
     borderd: none;
     backgroud-color: #000;
     color: #ccc;
     font: normal 12pt/105% Georgia, Arial, sans-serif;
}

You can provide themes as many as you want. The ones you use depends only on your design capabilities and imagination.

Dev.Opera — FOLLOW THE STANDARDS, BREAK THE RULES...

•

Join Date: Nov 2008

Posts: 27

Reputation: ayi_102 is an unknown quantity at this point

Solved Threads: 0

ayi_102

Offline

Light Poster

Re: save and load font and background setting using cookies

Jan 15th, 2009

this is my latest code

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

What do you think?

Oh, and thank you for the cookies code
it works perfect

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<html>
<head>
 
<title>None</title>
 
<!--font family function-->
<script type="text/javascript">
function changeFontFamily(elem, dropper) {
  document.getElementById(elem).style.fontFamily = dropper.options[dropper.selectedIndex].value;
}
</script>
 
<!--font color function-->
<script type="text/javascript">
function changeFontColor(elem, dropper) {
  document.getElementById(elem).style.color = dropper.options[dropper.selectedIndex].value;
}
</script>
 
<!--background color function-->
<script type="text/javascript">
function changeBackgroundColor(elem, dropper) {
  document.getElementById(elem).style.backgroundColor = dropper.options[dropper.selectedIndex].value;
}
</script>
 
<!--font size function-->
<script type="text/javascript">
function changeFontSize(elem, dropper) {
  document.getElementById(elem).style.fontSize = dropper.options[dropper.selectedIndex].value;
}
</script>
 
<!--create cookies function-->
<!--save cookies function-->
<!--delete cookies function-->
 
 
<!--cookies function-->
 
 
</head>
<body>
 
<form>
 
 
<!--This is where the changes happen-->
<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>
 
 
<!--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>
 
<html>
<head>

<title>None</title>

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

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

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

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

<!--create cookies function-->
<!--save cookies function-->
<!--delete cookies function-->


<!--cookies function-->


</head>
<body>

<form>


<!--This is where the changes happen-->
<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>


<!--not yet implemented
</br>
</br>
<input type=button value="Save Cookie!" onClick="javascript<b></b>:changeBG(this)">
-->

<!--not yet implemented
</br>
</br>
<input type=button value="Reset to Default!" onClick="javascript<b></b>:changeBG(this)">
-->



</body>
</html>

•

Join Date: Nov 2008

Posts: 27

Reputation: ayi_102 is an unknown quantity at this point

Solved Threads: 0

ayi_102

Offline

Light Poster

Re: save and load font and background setting using cookies

Jan 15th, 2009

This one is working example

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

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<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>
<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

thank you

Quick Reply to Thread

Show Printable Version

Other Threads in the JavaScript / DHTML / AJAX Forum

Previous Thread: Word press and javascript
Next Thread: Display iframe source in web browser's address bar

Thread Tools	Search this Thread
Show Printable Version Email this Page

DaniWeb Message

Cancel Changes