PDA

View Full Version : Resolved Adding persistance cookie to code



bigalo
02-25-2008, 05:01 PM
Hello,

I am a novice at Javascript and am considering using a Collapsible 2-Column Layout on my site where the left nav column is callapsable by clicking on the black rectangle box. It is perfect for what I am trying to do, but I wanted to code it so that it remembers the position it was set at when the page refreshes. Could someone help me add cookies to this code?

Here is the code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type='text/javascript'>

var enabled = false;
var alphaVisible = true;
var betaVisible = true;

window.onload = function()
{
var e = xGetElementById('navAlpha');
if (e && xDef(e.style) && document.getElementsByTagName) {
enabled = true;
}
}

function toggleAlpha()
{
if (!enabled) return;
var d, m, e, a, i, b;
if (alphaVisible) { //Content position
d = 'none';
m = '10px';
}
else {
d = 'block';
m = '190px';
}
e = xGetElementById('navAlpha');
e.style.display = d;
a = xGetElementsByClassName('content');
for (i = 0; i < a.length; ++i) {
a[i].style.marginLeft = m;
}


if (alphaVisible) { //Footer position
d = 'none';
m = '0px';
}
else {
d = 'block';
m = '180px';
}
e = xGetElementById('navAlpha');
e.style.display = d;
b = xGetElementsByClassName('footer');
for (i = 0; i < b.length; ++i) {
b[i].style.marginLeft = m;
}
alphaVisible = !alphaVisible;

}

function xDef()
{
for(var i=0; i<arguments.length; ++i){if(typeof(arguments[i])=='undefined') return false;}
return true;
}

function xGetElementById(e)
{
if(typeof(e)=='string') {
if(document.getElementById) e=document.getElementById(e);
else if(document.all) e=document.all[e];
else e=null;
}
return e;
}

function xGetElementsByClassName(c,p,t,f)
{
var r = new Array();
var re = new RegExp("(^|\\s)"+c+"(\\s|$)");
// var e = p.getElementsByTagName(t);
var e = xGetElementsByTagName(t,p); // See xml comments.
for (var i = 0; i < e.length; ++i) {
if (re.test(e[i].className)) {
r[r.length] = e[i];
if (f) f(e[i]);
}
}
return r;
}

function xGetElementsByTagName(t,p)
{
var list = null;
t = t || '*';
p = xGetElementById(p) || document;
if (typeof p.getElementsByTagName != 'undefined') { // DOM1
list = p.getElementsByTagName(t);
if (t=='*' && (!list || !list.length)) list = p.all; // IE5 '*' bug
}
else { // IE4 object model
if (t=='*') list = p.all;
else if (p.all && p.all.tags) list = p.all.tags(t);
}
return list || [];
}


//Toggle panel opener image
cc=0;
function changeimage()
{
if (cc==0)
{
cc=1;
document.getElementById('myimage').src="images/openPanel.gif";
}
else
{
cc=0;
document.getElementById('myimage').src="images/closePanel.gif";
}
}

</script>
<style>

/* 3 col flanking menus */
html, body {
background-color:#ffffff;
height: 100%;
margin:0px;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
scrollbar-3dlight-color:#6688A4;
scrollbar-arrow-color:#6688A4;
scrollbar-base-color:#6688A4;
scrollbar-face-color:#E2EBF3;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#6688A4;
scrollbar-darkshadow-color:#ffffff;
scrollbar-track-color:#f3f3f3;
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:28px;
font-weight:900;
color:#ccc;
}
h2 {
font:bold 12px/14px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}
p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
.Content>p {margin:0px;}
.Content>p+p {text-indent:30px;}

a {
color:#09c;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}
/* All the content boxes belong to the content class. */
.content {
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;
min-width:120px;
margin:0px 0px 0px 190px;
/*border:1px solid #eeeeee;*/
background-color:white;
padding:10px;
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
height:auto;
}

.footer {
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;
min-width:120px;
margin:30px 10px 0px 180px;
border-top:1px solid #eeeeee;
background-color:white;
/*background-image:url(../images/footerbk.png);
background-repeat:repeat-x;*/
padding:10px;
z-index:4; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
height:22px;
}

/* All the content boxes belong to the content class. */
.panelCloser {
position:absolute;
width:7px;
top:20%;
left:-21px;
z-index:2;
cursor:pointer;
}

#navAlpha {
position:absolute;
width:160px;
top:0px;
left:0px;
background-color:#C5D7EB;
background-image:url(../images/laftnavBack.png);
background-repeat:repeat-y;
padding:10px;
margin-right:10px;
margin-top:0px;
margin-left:0px;
z-index:1;
height:100%;

/*IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. */
voice-family: "\"}\"";
voice-family:inherit;
width:160px;
}

</style>
</head>
<body>
<!--Top Shadow-->
<!-- Absolutely Positioned Left Columns -->
<div id="navAlpha">
<!--Left Shadow-->
<div style="position:absolute; top:0px; left:0px; height:7px; width:180px; z-index:9; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/shadow2.png', sizingMethod='scale');"></div>
<!--Left Shadow-->
<br>
Left Nav Links<br>
Left Nav Links<br>
Left Nav Links<br>
Left Nav Links<br>
Left Nav Links<br>
Left Nav Links<br>
</div>
<!-- Absolutely Positioned Left Columns -->
<!-- Center Column -->
<div class="content">
<!--Closer-->
<div class="panelCloser"> <img id="myimage" onclick="changeimage(), toggleAlpha()" border="0" src="images/closePanel.gif" width="7" height="81" alt="Click to Hide/Show Navigation Panel" style="padding:30px 10px 30px 0px; background:#000000" /></div>
<!--Closer-->
<!--Right Shadow-->
<div style="position:absolute; top:0px; left:-20px; height:7px; width:2024px; z-index:9; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/shadow.png', sizingMethod='scale');"></div>
<!--Right Shadow-->
Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. <br>
</div>
<!-- Center Column -->
<!-- Footer -->
<div class="footer"></div>
<!-- Footer -->
</body>
</html>



Any help would be greatly appreciated!

Thanks!

jscheuer1
02-26-2008, 04:53 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type='text/javascript'>

var enabled = false;
var alphaVisible = true;
var betaVisible = true;

window.onload = function()
{
var e = xGetElementById('navAlpha');
if (e && xDef(e.style) && document.getElementsByTagName) {
enabled = true;
}
if(enabled&&readCookie('alphaVisible')&&readCookie('alphaVisible')=='no')
toggleAlpha();
}

function toggleAlpha()
{
if (!enabled) return;
var d, m, e, a, i, b;
if (alphaVisible) { //Content position
d = 'none';
m = '10px';
}
else {
d = 'block';
m = '190px';
}
e = xGetElementById('navAlpha');
e.style.display = d;
a = xGetElementsByClassName('content');
for (i = 0; i < a.length; ++i) {
a[i].style.marginLeft = m;
}


if (alphaVisible) { //Footer position
d = 'none';
m = '0px';
}
else {
d = 'block';
m = '180px';
}
e = xGetElementById('navAlpha');
e.style.display = d;
b = xGetElementsByClassName('footer');
for (i = 0; i < b.length; ++i) {
b[i].style.marginLeft = m;
}
alphaVisible = !alphaVisible;
if(alphaVisible)
createCookie('alphaVisible', 'yes');
else
createCookie('alphaVisible', 'no');
}

function xDef()
{
for(var i=0; i<arguments.length; ++i){if(typeof(arguments[i])=='undefined') return false;}
return true;
}

function xGetElementById(e)
{
if(typeof(e)=='string') {
if(document.getElementById) e=document.getElementById(e);
else if(document.all) e=document.all[e];
else e=null;
}
return e;
}

function xGetElementsByClassName(c,p,t,f)
{
var r = new Array();
var re = new RegExp("(^|\\s)"+c+"(\\s|$)");
// var e = p.getElementsByTagName(t);
var e = xGetElementsByTagName(t,p); // See xml comments.
for (var i = 0; i < e.length; ++i) {
if (re.test(e[i].className)) {
r[r.length] = e[i];
if (f) f(e[i]);
}
}
return r;
}

function xGetElementsByTagName(t,p)
{
var list = null;
t = t || '*';
p = xGetElementById(p) || document;
if (typeof p.getElementsByTagName != 'undefined') { // DOM1
list = p.getElementsByTagName(t);
if (t=='*' && (!list || !list.length)) list = p.all; // IE5 '*' bug
}
else { // IE4 object model
if (t=='*') list = p.all;
else if (p.all && p.all.tags) list = p.all.tags(t);
}
return list || [];
}


//Toggle panel opener image
cc=0;
function changeimage()
{
if (cc==0)
{
cc=1;
document.getElementById('myimage').src="images/openPanel.gif";
}
else
{
cc=0;
document.getElementById('myimage').src="images/closePanel.gif";
}
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}
</script>
<style>

/* 3 col flanking menus */
html, body {
background-color:#ffffff;
height: 100%;
margin:0px;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
scrollbar-3dlight-color:#6688A4;
scrollbar-arrow-color:#6688A4;
scrollbar-base-color:#6688A4;
scrollbar-face-color:#E2EBF3;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#6688A4;
scrollbar-darkshadow-color:#ffffff;
scrollbar-track-color:#f3f3f3;
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:28px;
font-weight:900;
color:#ccc;
}
h2 {
font:bold 12px/14px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}
p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
.Content>p {margin:0px;}
.Content>p+p {text-indent:30px;}

a {
color:#09c;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}
/* All the content boxes belong to the content class. */
.content {
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;
min-width:120px;
margin:0px 0px 0px 190px;
/*border:1px solid #eeeeee;*/
background-color:white;
padding:10px;
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
height:auto;
}

.footer {
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;
min-width:120px;
margin:30px 10px 0px 180px;
border-top:1px solid #eeeeee;
background-color:white;
/*background-image:url(../images/footerbk.png);
background-repeat:repeat-x;*/
padding:10px;
z-index:4; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
height:22px;
}

/* All the content boxes belong to the content class. */
.panelCloser {
position:absolute;
width:7px;
top:20%;
left:-21px;
z-index:2;
cursor:pointer;
}

#navAlpha {
position:absolute;
width:160px;
top:0px;
left:0px;
background-color:#C5D7EB;
background-image:url(../images/laftnavBack.png);
background-repeat:repeat-y;
padding:10px;
margin-right:10px;
margin-top:0px;
margin-left:0px;
z-index:1;
height:100%;

/*IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. */
voice-family: "\"}\"";
voice-family:inherit;
width:160px;
}

</style>
</head>
<body>
<!--Top Shadow-->
<!-- Absolutely Positioned Left Columns -->
<div id="navAlpha">
<!--Left Shadow-->
<div style="position:absolute; top:0px; left:0px; height:7px; width:180px; z-index:9; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/shadow2.png', sizingMethod='scale');"></div>
<!--Left Shadow-->
<br>
Left Nav Links<br>
Left Nav Links<br>
Left Nav Links<br>
Left Nav Links<br>
Left Nav Links<br>
Left Nav Links<br>
</div>
<!-- Absolutely Positioned Left Columns -->
<!-- Center Column -->
<div class="content">
<!--Closer-->
<div class="panelCloser"> <img id="myimage" onclick="changeimage(), toggleAlpha()" border="0" src="images/closePanel.gif" width="7" height="81" alt="Click to Hide/Show Navigation Panel" style="padding:30px 10px 30px 0px; background:#000000" /></div>
<!--Closer-->
<!--Right Shadow-->
<div style="position:absolute; top:0px; left:-20px; height:7px; width:2024px; z-index:9; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/shadow.png', sizingMethod='scale');"></div>
<!--Right Shadow-->
Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. Body content goes here. <br>
</div>
<!-- Center Column -->
<!-- Footer -->
<div class="footer"></div>
<!-- Footer -->
</body>
</html>

bigalo
02-26-2008, 06:06 PM
Thank you so very much jscheuer1! The script works exacly like I wanted it to. You are truly the MAN!!!!

bigalo
02-26-2008, 06:18 PM
One other question jscheuer1...I'm currently using an image with an arrow pointing in(closePanel.gif) and another pointing out(openPanel.gif) that toggles in place of the black box. Right now, it changes when the nav is callapsed and I refresh. Is there a way to add the persistance to that toggle as well.

jscheuer1
02-27-2008, 02:30 AM
One other question jscheuer1...I'm currently using an image with an arrow pointing in(closePanel.gif) and another pointing out(openPanel.gif) that toggles in place of the black box. Right now, it changes when the nav is callapsed and I refresh. Is there a way to add the persistance to that toggle as well.

Hmm, the principle is the same. I think you should be able to see what is happening and apply it to your code. But we can't all always see the obvious, I know I often cannot. So, if you are still having trouble:

Please post a link to the page on your site that contains the problematic code so we can check it out.

bigalo
02-27-2008, 03:23 PM
Hmm, the principle is the same. I think you should be able to see what is happening and apply it to your code. But we can't all always see the obvious, I know I often cannot. So, if you are still having trouble:

Please post a link to the page on your site that contains the problematic code so we can check it out.
jscheuer1,

You were absolutely right, it was obvious once I looked at it again. I was able to make the adjustment to the code very easily by adding the changeimage() function to the toggleAlpha() function. It works beautifully now! Thanks again for the help and guidance!