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
