CSS Codes
CSS Layouts
Results 1 to 6 of 6

Thread: Adding persistance cookie to code

  1. 02-25-2008, 05:01 PM #1
    bigalo
    bigalo is offline Junior Coders
    Join Date
    Feb 2008
    Posts
    74
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default Adding persistance cookie to code

    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:

    HTML 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!
    Last edited by Snookerman; 04-23-2009 at 05:31 PM. Reason: added “Resolved” prefix
    Reply With Quote Reply With Quote
  2. 02-26-2008, 04:53 PM #2
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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;
  }
  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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    bigalo (02-26-2008)
  4. 02-26-2008, 06:06 PM #3
    bigalo
    bigalo is offline Junior Coders
    Join Date
    Feb 2008
    Posts
    74
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Thumbs up

    Thank you so very much jscheuer1! The script works exacly like I wanted it to. You are truly the MAN!!!!
    Reply With Quote Reply With Quote
  5. 02-26-2008, 06:18 PM #4
    bigalo
    bigalo is offline Junior Coders
    Join Date
    Feb 2008
    Posts
    74
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    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.
    Reply With Quote Reply With Quote
  6. 02-27-2008, 02:30 AM #5
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by bigalo View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
  7. 02-27-2008, 03:23 PM #6
    bigalo
    bigalo is offline Junior Coders
    Join Date
    Feb 2008
    Posts
    74
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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!
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules