...

View Full Version : Need help expanding script (Cookies / divs)



Fizziwig
05-07-2009, 09:31 PM
Alright. I expanded upon a script a friend helped me write, to create a simple check box that hides / shows content, as shown HERE. (http://update.fizziwig.co.uk/test.html)

Unfortunately, I don't have a clue how to expand this, so that I can use more than one checkbox on the page, to open different sections.

Any help would be greatly appreciated, source code is available below:

<html>
<head>
<title>Title of page</title>
<script language="JavaScript">
function getCookie(NameOfCookie)
{ if (document.cookie.length > 0)
{ begin = document.cookie.indexOf(NameOfCookie+"=");
if (begin != -1)
{ begin += NameOfCookie.length+1;
end = document.cookie.indexOf(";", begin);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(begin, end)); }
}
return null;
}

function setCookie(NameOfCookie, value, expiredays)
{ var ExpireDate = new Date ();
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));
document.cookie = NameOfCookie + "=" + escape(value) +
((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString());
}

function delCookie (NameOfCookie)
{ if (getCookie(NameOfCookie)) {
document.cookie = NameOfCookie + "=" +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}

}

function showhidefield() {
if (document.frm.chkbox.checked)
{
document.getElementById("hideablearea").style.display = "block";
setCookie("fieldshown","true",31);
}
else
{
document.getElementById("hideablearea").style.display = "none";
setCookie("fieldshown","false",31);
}
}

window.onload = function () {
var c = getCookie("fieldshown");
if (c) {
document.frm.chkbox.checked = (c == "true");
}
showhidefield();
}
</script>
</head>
<body>

<form name='frm' action=''>
<input type="checkbox" name="chkbox" onClick="showhidefield()" checked="checked">
<div id='hideablearea' style='display:none'>
Hidden / displayed text...
</div>
</form>
</body>
</html>


Thanks a lot.

Old Pedant
05-07-2009, 10:39 PM
Like this?


<html>
<head>
<title>Title of page</title>
<script language="JavaScript">
function getCookie(NameOfCookie)
{
if (document.cookie.length > 0)
{
var begin = document.cookie.indexOf(NameOfCookie+"=");
if (begin != -1)
{
begin += NameOfCookie.length+1;
var end = document.cookie.indexOf(";", begin);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(begin, end));
}
}
return null;
}

function setCookie(NameOfCookie, value, expiredays)
{
var ExpireDate = new Date ();
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));
document.cookie = NameOfCookie + "=" + escape(value)
+ ( (expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString());
}

function showhide(which)
{
var name = which.name.substring(3); // lop off the CB_
var div = document.getElementById("DIV_"+name);
div.style.display = ( which.checked ? "block" : "none" );
setCookie( name, ""+which.checked, 31 );
}

function forminit( )
{
for ( var e = 0; e < document.frm.elements.length; ++e )
{
var elem = document.frm.elements[e];
if ( elem.name.substring(0,3) == "CB_" )
{
if ( getCookie(elem.name.substring(3)) == "true" )
{
elem.click();
}
}
}
}
</script>
<style>
.hide { display: none;
height: 200px; width: 200px;
border: solid red 2px;
background-color: pink;
}
</style>
</head>

<body onload="forminit();">
<form name="frm">
<input type="checkbox" name="CB_frammish" onClick="showhide(this)"> frammish
<input type="checkbox" name="CB_zamboni" onClick="showhide(this)"> zamboni
<div id="DIV_frammish" class="hide">
Hidden / display of frammish...
</div>
<div id="DIV_zamboni" class="hide" style="background-color: lightgrey;">
Hidden / display of zamboni...
</div>
</form>
</body>
</html>


If it's not obvious, notice the names of the checkboxes (must start with CB_ as code is written) and the IDs of the divs (must start with DIV_ and match a checkbox name). Obviously, you can change the prefixes as you like if you change the code appropriately.

Fizziwig
05-08-2009, 05:26 PM
Thank you so much :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum