...

View Full Version : collapsible panel



angiras
09-28-2003, 07:43 PM
do you know a collapsible panel (div display : block/none) which keeps its state even when the page is refreshed ?

thank you

me'
09-28-2003, 10:14 PM
You'll need to edit the cookie.

Eg:



function foo() {
if (document.cookie.indexOf('state=1') >= 0)
document.getElementById('thediv').style.display = 'none'
else
document.getElementById('thediv').style.display = 'block';
}

onload = foo;

And then:


<a href="#" onclick="document.cookie='state=1'; foo()">Collapse Div</a>


(untested, should work but I'm a little tired at the moment, probably buggy)

me'
09-28-2003, 10:20 PM
Sorry, I'm using DOM during loading. Err... I'll have to rethink.

edit: rethought :)

You could handle onfocus instead of onload, but that isn't exactly neat and there's no guarentees that it'll work... apart from that you could deliberately use the code I already posted and handle onerror, but that's twisted, contorted, errorful and hard to program.

Err... The only other way I can think of is asking the viewer to click a link once the page is viewed, and that's not exactly great either.

glenngv
09-29-2003, 03:20 AM
save the display state in a cookie as you hide or show them. Have different cookie name for each panel. Then when you load the page, document.write the panel using the cookie value as the display property

<script>
var display1 = //get cookie for panel1
//set default value if no cookie

document.write('<div id="panel1" style="display:' + display1 + "></div>');

var display2 = //get cookie for panel2
//set default value if no cookie

document.write('<div id="panel2" style="display:' + display2 + "></div>');

</script>

angiras
09-29-2003, 08:42 AM
it is not really working


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>CollExp</title>
<script language="javascript">
function foo(id) {
if (document.cookie.indexOf(id + '=Collapse') >= 0)
document.getElementById(id).style.display = 'none';
else
document.getElementById(id).style.display = 'block';
}
//onload = foo(id);
</script>
</head>
<body>
<form id="MainForm">
<a href="#" onclick="document.cookie='Div1=Collapse'; foo('Div1')">write : Collapse (or Expand) Div1</a>
<div id ="Div1" style="display:block;">Div1 content</div>
<br />
<a href="#" onclick="document.cookie='Div2=Collapse'; foo('Div2')">write : Collapse (or Expand) Div2</a>
<div id ="Div2" style="display:block;">Div2 content</div>
</form>
</body>
</html>



I get an error if I use : onload = foo(id);

and it doesn't keep the state, I cannot, as says glenngv, write the full div because in my DIV I have server controls, like a searchbox

and how to inverse the state ? : if cookie = collapse then write link=invert and set the cookie to invert .... and the contrary ....

thanks for helping

glenngv
09-29-2003, 11:05 AM
<html>
<head>
<script type="text/javascript">

// The Cookie Jar
////// Standard functions for Setting, Getting, and Deleting Cookies
////// john@xcentrixlc.com

// To set a cookie pass in the name, value, and persist type
// SetCookie("name", "value", 1) set the persist type to 1 to store your cookie
// or to 0 to last for this browser session only. By default the storage time is for one year.
// You can add another argument to hold the length of time you want to store the cookie:
// SetCookie("name", "value",1,15768000000) would store the cookie for 6 months.
// the time is calcutaled in miliseconds so for one month of milliseconds you calculate:
// 31 * 24 * 60 * 60 * 1000=2678400000
// To get or delete a cookie simply pass in the name of the cookie you want to effect
// GetCookie("name") DeleteCookie("name")
// if you ask for a cookie that does not exist it will return null.

function getCookieVal(offset) {
endstr = document.cookie.indexOf (";", offset)
if(endstr == -1) endstr = document.cookie.length
return unescape(document.cookie.substring(offset, endstr))
}

function GetCookie(name) {
arg = name + "="
alen = arg.length
clen = document.cookie.length
var i = 0
while (i < clen) {
j = i + alen
if(document.cookie.substring(i, j) == arg) return getCookieVal(j)
i = document.cookie.indexOf(" ", i) + 1
if(i == 0) break
}
return null
}

function SetCookie (name, value, per, exp) {
cstr = name + "=" + escape(value) + ";"
if(per){
addtime=(exp>0) ? exp : 31536000000
expdate = new Date()
expdate.setTime(expdate.getTime() + addtime)
expdate = expdate.toGMTString()
cstr+=" expires=" + expdate
}
document.cookie = cstr
}

function DeleteCookie(name) {
exp = new Date()
exp.setTime (exp.getTime() - 1)
cval = GetCookie(name)
if(cval != null)
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString()
}

function expandCollapse(id){
var div = document.getElementById(id);
if (div.style.display=='none'){
div.style.display='block';
SetCookie(id,'block');
}
else {
div.style.display='none';
SetCookie(id,'none');
}
}

function setDisplay(div,disp){
if (disp!=null) div.style.display=disp;
}

function setState(){
var div;
var i=1;
while (div=document.getElementById('Div'+(i++))) {
setDisplay(div,GetCookie(div.id));
}
}
</script>
</head>
<body onload="setState()">
<p>
<a href="#" onclick="expandCollapse('Div1')">Expand/Collapse</a>
<div id ="Div1" style="display:block;">Div1 content</div>
</p>
<p>
<a href="#" onclick="expandCollapse('Div2')">Expand/Collapse</a>
<div id ="Div2" style="display:block;">Div2 content</div>
</p>
<p>
<a href="#" onclick="expandCollapse('Div3')">Expand/Collapse</a>
<div id ="Div3" style="display:block;">Div3 content</div>
</p>
</body>
</html>


you can use your own cookie script if you have one.

angiras
09-29-2003, 11:30 AM
genial !!!

and just a very very small detail :-)) ?

how can you write the contrary of the state ?

I mean :
if it is expand then write collapse
if it is collapse write expand

or any image with + and - which show the contrary of the state

thanks again

if you need any help for .NET coding just ask !!!

glenngv
09-29-2003, 11:37 AM
I have told you how to do it, haven't I?

http://www.codingforums.com/showthread.php?s=&threadid=26682#post137583

angiras
09-29-2003, 11:40 AM
oups ! sorry !

thanks again

angiras
09-29-2003, 11:59 AM
This time it works but it seems that mozilla doesn't recognize innerText , it works for IE and OPera

your function

function expandCollapse(id,img, sp){
var div = document.getElementById(id);
if (div.style.display=='none'){
div.style.display='block';
SetCookie(id,'block');
document.images[img].src='cmdCollapse.gif';
document.getElementById(sp).innerText = 'Collapse';
}
else {
div.style.display='none';
SetCookie(id,'none');
document.images[img].src='cmdExpand.gif';
document.getElementById(sp).innerText = 'Expand';
}
}

and any line :

<a href="#" onclick="expandCollapse('Div1','Img1','sp1')"><img src="cmdCollapse.gif" id="Img1" alt="" /><span id="sp1">Collapse</span></a>
<div id ="Div1" style="display:block;">Div1 content</div>


thank you

angiras
09-29-2003, 03:20 PM
is there anyway to avoid : <body onload="setState()">


I am building Dynamicly my pages and I must do a property specialy the body tag

thank you

glenngv
09-29-2003, 04:42 PM
innerText only works with IE, use innerHTML instead.

window.onload = setState;

angiras
09-29-2003, 04:53 PM
all works now ! thank you !

angiras
09-29-2003, 08:19 PM
I don't get it I loose the state of the images, if I refresh the page the boxes are ok but the images come back to the original values



<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<style type="text/css">
a{text-decoration:none; color:#000099;}
img{border:0px;margin-right:4px;margin-left:4px}
.Boxes
{border:1px solid #000099;height:auto;width:100px;margin:4px;background-color:tan;}
.Content
{height:100px;width:100px;overflow:auto;background-color:ivory;padding:2px;}
</style>
<script type="text/javascript">

// The Cookie Jar
////// Standard functions for Setting, Getting, and Deleting Cookies
////// john@xcentrixlc.com

// To set a cookie pass in the name, value, and persist type
// SetCookie("name", "value", 1) set the persist type to 1 to store your cookie
// or to 0 to last for this browser session only. By default the storage time is for one year.
// You can add another argument to hold the length of time you want to store the cookie:
// SetCookie("name", "value",1,15768000000) would store the cookie for 6 months.
// the time is calcutaled in miliseconds so for one month of milliseconds you calculate:
// 31 * 24 * 60 * 60 * 1000=2678400000
// To get or delete a cookie simply pass in the name of the cookie you want to effect
// GetCookie("name") DeleteCookie("name")
// if you ask for a cookie that does not exist it will return null.

function getCookieVal(offset) {
endstr = document.cookie.indexOf (";", offset)
if(endstr == -1) endstr = document.cookie.length
return unescape(document.cookie.substring(offset, endstr))
}

function GetCookie(name) {
arg = name + "="
alen = arg.length
clen = document.cookie.length
var i = 0
while (i < clen) {
j = i + alen
if(document.cookie.substring(i, j) == arg) return getCookieVal(j)
i = document.cookie.indexOf(" ", i) + 1
if(i == 0) break
}
return null
}

function SetCookie (name, value, per, exp) {
cstr = name + "=" + escape(value) + ";"
if(per){
addtime=(exp>0) ? exp : 31536000000
expdate = new Date()
expdate.setTime(expdate.getTime() + addtime)
expdate = expdate.toGMTString()
cstr+=" expires=" + expdate
}
document.cookie = cstr
}

function DeleteCookie(name) {
exp = new Date()
exp.setTime (exp.getTime() - 1)
cval = GetCookie(name)
if(cval != null)
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString()
}

function expandCollapse(id,img){
var div = document.getElementById(id);
if (div.style.display=='none'){
div.style.display='block';
document.images[img].src='cmdCollapse.gif';
SetCookie(id,'block');
}
else {
div.style.display='none';
document.images[img].src='cmdExpand.gif';
SetCookie(id,'none');
}
}

function setDisplay(div,disp){
if (disp!=null) div.style.display=disp;
}

function setState(){
var div;
var i=1;
while (div=document.getElementById('Div'+(i++))) {
setDisplay(div,GetCookie(div.id));
}
while (div=document.getElementById('Img'+(i++))) {
setDisplay(div,GetCookie(div.id));
}
}

window.onload = setState;
</script>
</head>
<body >

<a href="#" onclick="expandCollapse('Div1','Img1')"><img src="cmdCollapse.gif" id="Img1" alt="" /><span>DIV 1 title</span></a>
<div id ="Div1" style="display:block;" class="Content">Div1 content<br />blah<br />blah<br />blah<br />blah<br />blah<br />blah<br /></div>


<br /><br />

<a href="#" onclick="expandCollapse('Div2','Img2')"><img src="cmdExpand.gif" id="Img2" alt="" /><span >DIV 2 title</span></a>
<div id ="Div2" style="display:none;" class="Content">Div2 content<br />blah<br />blah<br />blah<br />blah<br />blah<br />blah<br />
</div>


</body>
</html>

thanks for helping

glenngv
09-29-2003, 10:58 PM
function setDisplay(div,disp,img){
if (disp!=null) {
div.style.display=disp;
document.images[img].src=(disp=='none')?'cmdExpand.gif':'cmdCollapse.gif';
}
}

function setState(){
var div;
var i=1;
while (div=document.getElementById('Div'+i)) {
setDisplay(div,GetCookie(div.id),'Img'+i);
i++;
}
}

angiras
09-30-2003, 06:05 AM
it works !

thanks a ton !

glenngv
09-30-2003, 07:36 AM
glad to help you again. :)

cchaptini
06-26-2009, 03:34 AM
first thanks for the wonderful post it got me so interested that i registered for codingforums.com
and i have applied the collapsible panel and it works fine as far as saving the state between the asp menu

i should probably talk first about the structure since i have 2 navigational menus
one css menu wiht asp:Hyperlinks and the other is asp:menu
the collapsible panels are working great when i navigate through my asp menu but it doesnt save the state when i use the asp:Hyperlinks.
Another thing to note, the first hyperlink go to several pages and each page has the different asp:menu in it.
I have about 80pages so all of the asp menu would keep the state but if i go through the navigateurl of the hyperlink the state would reset....
PLease Help i will post the code if needed

Thank You again great article :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum