PDA

View Full Version : Help with a function.



MrSheen
05-23-2007, 09:13 PM
Okay i have made a function to collapse a table.



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:



<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:



<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.


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:



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



<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:

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


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

<body onload="do_onload()">

OR - add this inside your js

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