As the title suggests, this works everywhere except in Chrome, and I would like to fix it, if possible. The user can select a colour from the drop down box and it is saved in a cookie, for next load. But in Chrome the drop down box isn’t working. The code passed the Validator text.
Anyway, if you could help, that would be great.
<html>
<head>
<meta http-equiv="Content-Language" content=en-us>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Background Color selection</title>
</head>
<body>
<form onsubmit="return false;" action="">
<p><select name="color_select" size="1" onchange="return setColor(this, global_name)">
<option style="background-color: aliceblue;" value="aliceblue">aliceblue (#F0F8FF)</option>
<option style="background-color: antiquewhite;" value="antiquewhite">antiquewhite (#FAEBD7)</option>
<option style="background-color: aqua;" value="aqua">aqua (#00FFFF)</option>
<option style="background-color: aquamarine;" value="aquamarine">aquamarine (#7FFFD4)</option>
<option style="background-color: azure;" value="azure">azure (#F0FFFF)</option>
<option style="background-color: beige;" value="beige">beige (#F5F5DC)</option>
</select>
<input type="button" value="Delete Cookie"
onclick="delCookie(global_name); return getColor(color_select, global_name)"></p>
</form>
<script type="text/javascript">
<!--//
var global_name = 'color';
//
function getColor(sel, cookie_name) {
var cookie_value = getCookie(cookie_name);
if (!cookie_value) cookie_value = 'white';
document.body.style.backgroundColor = cookie_value;
var opt = sel.options;
var x, len = sel.length;
for (x=0; x<len; x++) {
if (opt[x].value == cookie_value) {
opt[x].selected = true;
break;
}
}
return true;
}
getColor(document.forms[0].color_select, global_name);
//
function setColor(sel, cookie_name) {
var opt = sel.options[sel.selectedIndex].value;
var oneDay = 24 * 60 * 60 * 1000;
var oneYear = 365 * oneDay;
var expDate = new Date();
expDate.setTime(expDate.getTime() + oneYear);
setCookie(cookie_name, opt, expDate);
return getColor(sel, cookie_name);
}
// ---------------------------------------- //
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 getCookieVal(offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
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 delCookie(name) {
exp = new Date();
exp.setTime(exp.getTime() - (24*60*60*1000));
var cval = getCookie(name);
cval = (cval == null) ? "" : cval;
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
//-->
</script>
</body>
</html>
As demonstrated by Germán Enríquez’s jsfiddle, the code works in Google Chrome (at least in version 24.0 beta).
I can suggest two things:
Also, you said that the code had passed the validation. For starters, an HTML page requires a doctype, so sorry, but it doesn’t pass. You can try it yourself here: http://validator.w3.org/#validate_by_input
Also, try linting your JavaScript code at http://www.jslint.com/ you will be surprised how many troubles it will find in your code. For example,
var argv = setCookie.arguments;is not the best way to access the function’s arguments and will surely break under strict mode. Also, yourexp = new Date();statement leaks theexpvariable into the global scope.If this doesn’t help, please provide more details about the issue and we will answer accordingly.
UPDATE
I’ve just noticed that you mentioned in the comments that you’re copying the HTML into a file and opening it in the browser. Are you accessing your file with
file://? If so, that could be the reason why Chrome is causing you problems. Actually, Google Chrome:That’s a WontFix issue 535 in Chrome since 2008, see http://code.google.com/p/chromium/issues/detail?id=535
Try running a local server and opening the file via
http://localhost/orhttp://127.0.0.1/