Help with a function.

**MrSheen** · 05-23-2007, 09:13 PM

Okay i have made a function to collapse a table.

Code:

function showHide(inID) {
     if (document.getElementById(inID).style.display == 'none') {
          document.getElementById(inID).style.display = 'block';
     } else {
          document.getElementById(inID).style.display = 'none';
     }
}

It works perfect and closes the table when i use:

Code:

<a href="#" onclick="showHide ( 1 )">Show/hide table</a>

But when i refresh the page, all the tables open again. Is there a way to like save the tables which are collapsed or open so when i refresh, all the tables that were close stay close, ones that were open, stay open.

Thanks in advance.

BTW the tables look like this:

Code:

<table id="1" style="display:block">

I am also using PHP Language to code my site, if that helps.

Thanks

**blm126** · 05-23-2007, 09:16 PM

You'll need to use cookies.Try these functions they could be of some help.

Code:

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

**thetestingsite** · 05-23-2007, 09:18 PM

Also; being that you are using PHP, you can then access the cookies for those tables and choose whether or not to display or hide the item. Something like this would be for the PHP:

Code:

if ($_COOKIE['collapsed'] == '1') {
$style = "display: none;";
}

else {
$style = "display: block;";
}

echo '<table id="1" style="'.$style.'">';

Hope this helps.

//EDIT: Sorry Brady, cross posted.

**MrSheen** · 05-23-2007, 09:21 PM

ok thanks, ill give it a try

Thanks for you help

**MrSheen** · 05-23-2007, 09:44 PM

Im stuck with this function

Code:

<a href="#" onclick="showHide (' .$cate_data['id']. ', 'col_' .$cate_data['id']. '', 7)">

Is this correct :S

**StarrRider** · 05-24-2007, 06:55 AM

MrSheen
Your last has post left me puzzled. What do you mean by "Im stuck with this function"? Further - I don't see how you went from your first <a> tag to your last. That <a> tag sort of looks like your trying to mix php and js together inside the onclick - and the quotes don't make sense (at least - not to me).

I believe what blm126 was suggesting (please forgive me if I get this wrong) was for you to change your original function to look something like this:

Code:

function showHide(inID) {
     if (document.getElementById(inID).style.display == 'none') {
          document.getElementById(inID).style.display = 'block';
          createCookie('ShoHid'+inID,'block',1);
     } else {
          document.getElementById(inID).style.display = 'none';
          createCookie('ShoHid'+inID,'none',1);
     }
}

and then add

Code:

function do_onload() {
  var vis = readCookie('ShoHid1'); // cookie for element id='1'
  document.getElementById('1').style.display = vis;
}

NOTE: You will need to repeat those two lines for every ID you want to maintain

Leave the <a> tag as it was

Now a fast decision - you can either change the <body> tag to look like this

Code:

<body onload="do_onload()">

OR - add this inside your js

Code:

if (window.addEventListener) window.addEventListener("load", do_onload, false)
  else if (window.attachEvent) window.attachEvent("onload", do_onload)
  else if (document.getElementById) window.onload=do_onload

// Stolen from DD Contractible Header Script

All of which is assuming that your JS is either located or pulled into the head section from an external js file.

PS - This might not be an issue anymore - but some of the older browsers didn't like numerical IDs like you used in your table. Alpha/Numeric IDs are fine - as long as they starts with the Alpha part. (id="abc1234567890")

Hope this helps
Lee

Thread: Help with a function.

Thread Tools

Search Thread

Help with a function.

Bookmarks

Bookmarks

Posting Permissions