asked on

Show hide to stay open

The following code opens/closes a div (changes it's visibility), works great as is...what I'm wondering is...

When I click to open (show) a div, and then navigate to another page, the div closes (hides), how can I make it stay open?

I assume cookies, however I am unsure of how I can add cookies into this code...

imgout=new Image(11,11);
imgin=new Image(11,11);
	imgout.src="/imgs/u.gif";
	imgin.src="/imgs/d.gif";
//this switches expand collapse icons
function filter(imagename,objectsrc){
	if (document.images){
		document.images[imagename].src=eval(objectsrc+".src");
	}
}
//show OR hide funtion depends on if element is shown or hidden
function shoh(id) { 
	if (document.getElementById) { // DOM3 = IE5, NS6
		if (document.getElementById(id).style.display == "none"){
			document.getElementById(id).style.display = 'block';
			filter(("img"+id),'imgin');			
		} else {
			filter(("img"+id),'imgout');
			document.getElementById(id).style.display = 'none';			
		}	
	} else { 
		if (document.layers) {	
			if (document.id.display == "none"){
				document.id.display = 'block';
				filter(("img"+id),'imgin');
			} else {
				filter(("img"+id),'imgout');	
				document.id.display = 'none';
			}
		} else {
			if (document.all.id.style.visibility == "none"){
				document.all.id.style.display = 'block';
			} else {
				filter(("img"+id),'imgout');
				document.all.id.style.display = 'none';
			}
		}
	}
}

Open in new window

Joe Wu

hi kevp75,

i am pretty sure this can be done using some very simple PHP code and session variable, which is probably the most effectivve, if you are willing to try?
But you have not given me enough code, so you will need to supply more code in order for me to attempt it.

kevp75

ASKER

sorry. it's a classic asp site. I know how to do it server side, but something like this does not need to be done server side...

kevp75

ASKER

ok, so i figure "use cookies", but I think I am off somewhere....

no errors, it just does not stay open

updated code to follow:

imgout=new Image(11,11);
imgin=new Image(11,11);
	imgout.src="/imgs/u.gif";
	imgin.src="/imgs/d.gif";
//this switches expand collapse icons
function filter(imagename,objectsrc){
	if (document.images){
		document.images[imagename].src=eval(objectsrc+".src");
	}
}
//show OR hide funtion depends on if element is shown or hidden
function shoh(id) { 
	if (document.getElementById) { // DOM3 = IE5, NS6
		if (document.getElementById(id).style.display == "none" || readCookie("sh") == "closed"){
			document.getElementById(id).style.display = 'block';
			createCookie("sh","open",Date+1);
			filter(("img"+id),'imgin');			
		} else {
			filter(("img"+id),'imgout');
			document.getElementById(id).style.display = 'none';	
			createCookie("sh","closed",Date+1);
		}	
	} else { 
		if (document.layers) {	
			if (document.id.display == "none" || readCookie("sh") == "closed"){
				document.id.display = 'block';
				createCookie("sh","open",Date+1);
				filter(("img"+id),'imgin');
			} else {
				filter(("img"+id),'imgout');	
				document.id.display = 'none';
				createCookie("sh","closed",Date+1);
			}
		} else {
			if (document.all.id.style.visibility == "none" || readCookie("sh") == "closed"){
				document.all.id.style.display = 'block';
				createCookie("sh","open",Date+1);
			} else {
				filter(("img"+id),'imgout');
				document.all.id.style.display = 'none';
				createCookie("sh","closed",Date+1);
			}
		}
	}
}

Open in new window

kevp75

ASKER

and the 2 helper functions:

//set cookie
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=/";
	}
//get cookie
function readCookie(name)
	{
	var ca = document.cookie.split(';');
	var nameEQ = name + "=";
	for(var i=0;i < ca.length;i++) 
		{
			var c = ca[i];
			while (c.charAt(0)=='') c = c.substring(1,c.length);//delete spaces
			if (c.indexOf(nameEQ)==0) return c.substring(nameEQ.length,c.length);
		}
		return null;
	}

Open in new window

yossi_intlock

i guess your problem starts when you hit the back button on your browser and you need to save the state of what was open and what closed. to save the document state you can indeed use cookie.
here is a good arcitcle about cookies and javascript: http://www.quirksmode.org/js/cookies.html

kevp75

ASKER

hitting the back button is irrelevant, the issue is as you state, I need to remember the state of the div (open or closed). i think my logic for the code is off, as it doesnt' save the element state...

imgout=new Image(11,11);
imgin=new Image(11,11);
	imgout.src="/imgs/u.gif";
	imgin.src="/imgs/d.gif";
//this switches expand collapse icons
function filter(imagename,objectsrc){
	if (document.images){
		document.images[imagename].src=eval(objectsrc+".src");
	}
}
//show OR hide funtion depends on if element is shown or hidden
function shoh(id) { 
	if (document.getElementById) { // DOM3 = IE5, NS6
		if (document.getElementById(id).style.display == "none" || document.cookie == "sh=closed;"){
			document.getElementById(id).style.display = 'block';
				document.cookie = 'sh=open; expires=; path=/';
			filter(("img"+id),'imgin');			
		} else {
			filter(("img"+id),'imgout');
			document.getElementById(id).style.display = 'none';	
				document.cookie = 'sh=closed; expires=; path=/';
		}	
	} else { 
		if (document.layers) {	
			if (document.id.display == "none" || document.cookie == "sh=closed;"){
				document.id.display = 'block';
				document.cookie = 'sh=open; expires=; path=/';
				filter(("img"+id),'imgin');
			} else {
				filter(("img"+id),'imgout');	
				document.id.display = 'none';
				document.cookie = 'sh=closed; expires=; path=/';
			}
		} else {
			if (document.all.id.style.visibility == "none" || document.cookie == "sh=closed;"){
				document.all.id.style.display = 'block';
				document.cookie = 'sh=open; expires=; path=/';
			} else {
				filter(("img"+id),'imgout');
				document.all.id.style.display = 'none';
				document.cookie = 'sh=closed; expires=; path=/';
			}
		}
	}
}

Open in new window

kevp75

ASKER

my guess is that I am off when I am trying to retrieve the cookie...if you look in the .style.display == "none" lines, I am trying to:

if the style = none OR the cookie name "sh" = closed, etc...

and then I'm not even so sure that will work as I am thinking it should...

kevp75

ASKER

I apologize....it looks like the cookie is not getting set. I did it manually setting a cookie, and then retrieving it and I was able to do that...

kevp75

ASKER

code update....when I alert(document.cookie); I see all my cookies, and the one for this is also included, however when I try to read just that cookie....alert = null

imgout=new Image(11,11);
imgin=new Image(11,11);
	imgout.src="/imgs/u.gif";
	imgin.src="/imgs/d.gif";
//this switches expand collapse icons
function filter(imagename,objectsrc){
	if (document.images){
		document.images[imagename].src=eval(objectsrc+".src");
	}
}
//show OR hide funtion depends on if element is shown or hidden
function shoh(id) { 
	if (document.getElementById) { // DOM3 = IE5, NS6
		if (document.getElementById(id).style.display == "none" || readCookie('sh') == "closed"){
			document.getElementById(id).style.display = 'block';
			Set_Cookie('sh', 'open', 1, '', '', '');
			filter(("img"+id),'imgin');			
		} else {
			filter(("img"+id),'imgout');
			document.getElementById(id).style.display = 'none';	
			Set_Cookie('sh', 'closed', 1, '', '', '');
		}	
	} else { 
		if (document.layers) {	
			if (document.id.display == "none" || readCookie('sh') == "closed"){
				document.id.display = 'block';
				Set_Cookie('sh', 'open', 1, '', '', '');
				filter(("img"+id),'imgin');
			} else {
				filter(("img"+id),'imgout');	
				document.id.display = 'none';
				Set_Cookie('sh', 'closed', 1, '', '', '');
			}
		} else {
			if (document.all.id.style.visibility == "none" || readCookie('sh') == "closed"){
				document.all.id.style.display = 'block';
				Set_Cookie('sh', 'open', 1, '', '', '');
			} else {
				filter(("img"+id),'imgout');
				document.all.id.style.display = 'none';
				Set_Cookie('sh', 'closed', 1, '', '', '');
			}
		}
	}
}
 
//set cookie
function Set_Cookie( name, value, expires, path, domain, secure ) 
{
// set time, it's in milliseconds
var today = new Date();
today.setTime( today.getTime() );
 
if ( expires )
{
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires) );
 
document.cookie = name + "=" +escape( value ) +
( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) + 
( ( path ) ? ";path=" + path : "" ) + 
( ( domain ) ? ";domain=" + domain : "" ) +
( ( secure ) ? ";secure" : "" );
}
//get cookie
function readCookie(name)
	{
	var ca = document.cookie.split(';');
	var nameEQ = name + "=";
	for(var i=0;i < ca.length;i++) 
		{
			var c = ca[i];
			while (c.charAt(0)=='') c = c.substring(1,c.length);//delete spaces
			if (c.indexOf(nameEQ)==0) return c.substring(nameEQ.length,c.length);
		}
		return null;
	}

Open in new window

kevp75

ASKER

so...my cookie is getting written and read correctly, however the display state does not change when I navigate to another page

kevp75

ASKER

darn it...

back to square 1. here's a test page, and the updated code

//set cookie
function Set_Cookie( name, value, expires, path, domain, secure ) 
{
// set time, it's in milliseconds
var today = new Date();
today.setTime( today.getTime() );
 
if ( expires )
{
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires) );
 
document.cookie = name + "=" +escape( value ) +
( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) + 
( ( path ) ? ";path=" + path : "" ) + 
( ( domain ) ? ";domain=" + domain : "" ) +
( ( secure ) ? ";secure" : "" );
}
//get cookie
function readCookie(name)
	{
	var ca = document.cookie.split(';');
	var nameEQ = name + "=";
	for(var i=0;i < ca.length;i++) 
		{
			var c = ca[i];
			while (c.charAt(0)=='') c = c.substring(1,c.length);//delete spaces
			if (c.indexOf(nameEQ)==0) return c.substring(nameEQ.length,c.length);
		}
		return null;
	}
 
imgout=new Image(11,11);
imgin=new Image(11,11);
	imgout.src="/imgs/u.gif";
	imgin.src="/imgs/d.gif";
//this switches expand collapse icons
function filter(imagename,objectsrc){
	if (document.images){
		document.images[imagename].src=eval(objectsrc+".src");
	}
}
//show OR hide funtion depends on if element is shown or hidden
function shoh(id) { 
	if (document.getElementById) { // DOM3 = IE5, NS6
		if (document.getElementById(id).style.display == "none"){
			document.getElementById(id).style.display = 'block';
			Set_Cookie('sh'+id, 'open', 1, '', '', '');
			alert(readCookie('sh'+id));
			filter(("img"+id),'imgin');			
		} else {
			filter(("img"+id),'imgout');
			document.getElementById(id).style.display = 'none';	
			Set_Cookie('sh'+id, 'closed', 1, '', '', '');
			alert(readCookie('sh'+id));
		}	
	} else { 
		if (document.layers) {	
			if (document.id.display == "none"){
				document.id.display = 'block';
				Set_Cookie('sh'+id, 'open', 1, '', '', '');
				alert(readCookie('sh'+id));
				filter(("img"+id),'imgin');
			} else {
				filter(("img"+id),'imgout');	
				document.id.display = 'none';
				Set_Cookie('sh'+id, 'closed', 1, '', '', '');
				alert(readCookie('sh'+id));
			}
		} else {
			if (document.all.id.style.visibility == "none"){
				document.all.id.style.display = 'block';
				Set_Cookie('sh'+id, 'open', 1, '', '', '');
				alert(readCookie('sh'+id));
			} else {
				filter(("img"+id),'imgout');
				document.all.id.style.display = 'none';
				Set_Cookie('sh'+id, 'closed', 1, '', '', '');
				alert(readCookie('sh'+id));
			}
		}
	}
}

Open in new window

ASKER CERTIFIED SOLUTION

yossi_intlock

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

kevp75

ASKER

i am curious...I copied/pasted your code to another page....and it looks like it works right. What I am wondering is where in the code you are processing the saveState?

kevp75

ASKER

ok. it's not working...

test page: http://invoice.07th.com/untitled.asp

code to follow:

'untitled.asp
<h1>Test Page 1</h1>
	<div class="pCont">
		<div class="pHdr"><a href='#' onclick="shoh('n1',true);return false;" style="color:#FFF;text-decoration:none;"><img style='float:right;margin:3px 5px 0 0;' src='/imgs/u.gif' alt='expand' name='imgn1' width='11' height='11' border='0' /> Invoicing</a></div>
		<div class="pc" id="n1" style="display:none;">
			<div class="userNav"><a href="/untitled2.asp">Test Page 2</a></div>
			<div class="userNav"><a href="#">Archive</a></div>
			<div class="userNav"><a href="#">Reports</a></div>
		</div>
		<script>
			if(readCookie('shn1') == 'closed' ) {
			shoh('shn1',false);
			}
		</script>
	</div>
	<div class="pCont">
		<div class="pHdr"><a href='#' onclick="shoh('n2',true);return false;" style="color:#FFF;text-decoration:none;"><img style='float:right;margin:3px 5px 0 0;' src='/imgs/u.gif' alt='expand' name='imgn2' width='11' height='11' border='0' /> Invoicing</a></div>
		<div class="pc" id="n2" style="display:none;">
			<div class="userNav"><a href="#">Your Invoices</a></div>
			<div class="userNav"><a href="#">Archive</a></div>
			<div class="userNav"><a href="#">Reports</a></div>
		</div>
		<script>
			if(readCookie('shn2') == 'closed' ) {
			shoh('shn2',false);
			}
		</script>
	</div>
	<div class="pCont">
		<div class="pHdr"><a href='#' onclick="shoh('n3',true);return false;" style="color:#FFF;text-decoration:none;"><img style='float:right;margin:3px 5px 0 0;' src='/imgs/u.gif' alt='expand' name='imgn3' width='11' height='11' border='0' /> Invoicing</a></div>
		<div class="pc" id="n3" style="display:none;">
			<div class="userNav"><a href="#">Your Invoices</a></div>
			<div class="userNav"><a href="#">Archive</a></div>
			<div class="userNav"><a href="#">Reports</a></div>
		</div>
		<script>
			if(readCookie('shn3') == 'closed' ) {
			shoh('shn3',false);
			}
		</script>
	</div>
 
'untitled2.asp
<h1>Test Page 2</h1>
	<div class="pCont">
		<div class="pHdr"><a href='#' onclick="shoh('n1',true);return false;" style="color:#FFF;text-decoration:none;"><img style='float:right;margin:3px 5px 0 0;' src='/imgs/u.gif' alt='expand' name='imgn1' width='11' height='11' border='0' /> Invoicing</a></div>
		<div class="pc" id="n1" style="display:none;">
			<div class="userNav"><a href="/untitled.asp">Test Page</a></div>
			<div class="userNav"><a href="#">Archive</a></div>
			<div class="userNav"><a href="#">Reports</a></div>
		</div>
		<script>
			if(readCookie('shn1') == 'closed' )
			shoh('shn1',false);
		</script>
	</div>
	<div class="pCont">
		<div class="pHdr"><a href='#' onclick="shoh('n2',true);return false;" style="color:#FFF;text-decoration:none;"><img style='float:right;margin:3px 5px 0 0;' src='/imgs/u.gif' alt='expand' name='imgn2' width='11' height='11' border='0' /> Invoicing</a></div>
		<div class="pc" id="n2" style="display:none;">
			<div class="userNav"><a href="#">Your Invoices</a></div>
			<div class="userNav"><a href="#">Archive</a></div>
			<div class="userNav"><a href="#">Reports</a></div>
		</div>
		<script>
			if(readCookie('shn2') == 'closed' )
			shoh('shn2',false);
		</script>
	</div>
	<div class="pCont">
		<div class="pHdr"><a href='#' onclick="shoh('n3',true);return false;" style="color:#FFF;text-decoration:none;"><img style='float:right;margin:3px 5px 0 0;' src='/imgs/u.gif' alt='expand' name='imgn3' width='11' height='11' border='0' /> Invoicing</a></div>
		<div class="pc" id="n3" style="display:none;">
			<div class="userNav"><a href="#">Your Invoices</a></div>
			<div class="userNav"><a href="#">Archive</a></div>
			<div class="userNav"><a href="#">Reports</a></div>
		</div>
		<script>
			if(readCookie('shn3') == 'closed' )
			shoh('shn3',false);
		</script>
	</div>
 
'include.js
//set cookie
function Set_Cookie( name, value, expires, path, domain, secure ) 
{
// set time, it's in milliseconds
var today = new Date();
today.setTime( today.getTime() );
 
if ( expires )
{
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires) );
 
document.cookie = name + "=" +escape( value ) +
( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) + 
( ( path ) ? ";path=" + path : "" ) + 
( ( domain ) ? ";domain=" + domain : "" ) +
( ( secure ) ? ";secure" : "" );
}
//get cookie
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;
}
 
imgout=new Image(11,11);
imgin=new Image(11,11);
	imgout.src="/imgs/u.gif";
	imgin.src="/imgs/d.gif";
//this switches expand collapse icons
function filter(imagename,objectsrc){
	if (false){
		document.images[imagename].src=eval(objectsrc+".src");
	}
}
//show OR hide funtion depends on if element is shown or hidden
function shoh(id,saveState) { 
	if (document.getElementById) { // DOM3 = IE5, NS6
		if (document.getElementById(id).style.display == "none"){
			document.getElementById(id).style.display = 'block';
			Set_Cookie('sh'+id, 'open', 1, '', '', '');
			alert(readCookie('sh'+id));
			filter(("img"+id),'imgin');			
		} else {
			filter(("img"+id),'imgout');
			document.getElementById(id).style.display = 'none';	
			Set_Cookie('sh'+id, 'closed', 1, '', '', '');
			alert(readCookie('sh'+id));
		}	
	} else { 
		if (document.layers) {	
			if (document.id.display == "none"){
				document.id.display = 'block';
				Set_Cookie('sh'+id, 'open', 1, '', '', '');
				alert(readCookie('sh'+id));
				filter(("img"+id),'imgin');
			} else {
				filter(("img"+id),'imgout');	
				document.id.display = 'none';
				Set_Cookie('sh'+id, 'closed', 1, '', '', '');
				alert(readCookie('sh'+id));
			}
		} else {
			if (document.all.id.style.visibility == "none"){
				document.all.id.style.display = 'block';
				Set_Cookie('sh'+id, 'open', 1, '', '', '');
				alert(readCookie('sh'+id));
			} else {
				filter(("img"+id),'imgout');
				document.all.id.style.display = 'none';
				Set_Cookie('sh'+id, 'closed', 1, '', '', '');
				alert(readCookie('sh'+id));
			}
		}
	}
}

Open in new window

yossi_intlock

i put it just below the 'bla' div element so i wouldnt have to use window.onload or document.addeEventListener. this code will check on window first load if the cookie state is set to closed and will call your showHide method.with saveState = false in that case