PDA

View Full Version : Smart folding menu tree persistance



kmclaurin
10-02-2005, 03:06 AM
Script : Smart folding menu tree script
http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

Hello,
The only problem I have with the script is the persistence feature.
I have included the code as outlined in Step 4. I have enabled cookies in my browser (IE6). If I reload the page in question. The open/closed state of each folder is returned correctly, but the image reverts to the 'fold.gif', ie closed. Sorry, I only know enough about javascript to be dangerous....
.
Any ideas what the problem might be?
TIA

jscheuer1
10-02-2005, 05:04 AM
That's the only browser that this script, in that regard, is 100% reliable. Have you modified the markup or styling at all, or contained the script's html in an absolutely or relatively positioned element? One with a set height or width?

kmclaurin
10-02-2005, 09:10 PM
Thanks for your quick reply. No, I have changed anything as you described.
I am incorporating PHP script. IE, I am pulling up foldingmenu.php in my browser. All code for the menu is in an .htm file that is called as template from the foldingmenu.php...perhaps an error somewhere in my PHP??? Not terminating an <li properly or something....any other ideas greatly appreciated.

kmclaurin
10-02-2005, 11:09 PM
Hello,
I've been playing around with the html to try and figure this out.
When I put all of the code in "Step 3" from the website example under the <body , everything works A-OK. When I edit the code, eliminating everything down to the "Nested example", the persistance feature seems to stop working. When I do this, everytime I refresh the page, every folder fully opens, regardless of the 'state' before refresh. I know this is a different 'symptom' than what I originally described, but it makes me think I am misunderstanding something fundamental here. The code, that stops working :
<body>
<font face="Verdana">

<ul>
<li id="foldheader">Nested Example</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.dynamicdrive.com">outer 1</a></li>
<li><a href="http://www.dynamicdrive.com">outer 2</a></li>
<li id="foldheader">Nested</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.dynamicdrive.com">nested 1</a></li>
<li><a href="http://www.dynamicdrive.com">nested 2</a></li>
</ul>
<li><a href="http://www.dynamicdrive.com">outer 3</a></li>
<li><a href="http://www.dynamicdrive.com">outer 4</a></li>
</ul>
</ul>

</font>

Immediately below this is the persistance javascript. Nothing else has changed.
Can someone tell me what is wrong with the above? Or duplicate it?
thanks!

jscheuer1
10-03-2005, 03:29 AM
I'm a novice when it comes to PHP however, the unorthodox use of:

style=&{head};

might not be to PHP's liking.

Here is a modified demo of this script I was working on for a different reason. See if you have any better luck with it. It does not rely upon that convention, it requires at least the doctype used, a stricter one should be OK:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Smart Fold Demo - III - Opera8, IE6 - Functional in: NS7, FF1.0.6</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#foldheader{
cursor:pointer;cursor:hand;
font-weight:bold;
list-style-image:url('fold.gif'); /*set to closed folder image*/
}
#foldinglist{
list-style-image:url('list.gif'); /*set to sub items image*/
font-weight:normal;
}
-->
</style>
<script type="text/javascript">
<!--
//Smart Folding Menu tree - By Dynamic Drive (rewritten 9/15/2005 by jscheuer1)
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use
//Modified by jscheuer1 in http://www.dynamicdrive.com/forums
//for wider compatibility.

img1=new Image()
img1.src="fold.gif" //configure closed folder image
img2=new Image()
img2.src="open.gif" //configure open folder image

opWidth=16 //set to width of closed folder image (Affects Opera Only)

/////////////////// No Need to Edit Below Here /////////////

var Op8=window.opera
var ns6Op8=(document.getElementById&&!document.all)||Op8
var ie4=document.all&&!Op8

document.write('\n<style type="text/css">\n')
if (Op8)
document.write("#foldheader, #foldinglist{visibility:hidden;list-style-position:inside;position:relative;right:"+opWidth+"px;}\n")
document.write("#foldheader{list-style-image:url('"+img2.src+"')}\n</style>\n")

function checkcontained(e){
var iscontained=0
cur=ns6Op8? e.target : event.srcElement
i_item=0
if (cur.id=="foldheader")
iscontained=1
else
while (ns6Op8&&cur.parentNode||(ie4&&cur.parentElement)){
if (cur.id=="foldheader"||cur.id=="foldinglist"){
iscontained=(cur.id=="foldheader")? 1 : 0
break
}
cur=ns6Op8? cur.parentNode : cur.parentElement
}

if (iscontained){
var foldercontent=ns6Op8? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
if (foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage="url('"+img2.src+"')"
}
else{
foldercontent.style.display="none"
cur.style.listStyleImage="url('"+img1.src+"')"
}
}
if (Op8&&typeof c_item!=='undefined')
checkit();
}

if (ie4||ns6Op8)
document.onclick=checkcontained

onload=function(){
var ulis=document.getElementsByTagName? document.getElementsByTagName('ul') : document.all.tags('ul')
for (var i_tem = 0; i_tem < ulis.length; i_tem++)
if (ulis[i_tem].id=='foldinglist'){
if (Op8)
ulis[i_tem].style.visibility='visible'
ulis[i_tem].style.display="none"
}
var lis=document.getElementsByTagName? document.getElementsByTagName('li') : document.all.tags('li')
for (var i_tem = 0; i_tem < lis.length; i_tem++)
if (lis[i_tem].id=='foldheader'){
if (Op8)
lis[i_tem].style.visibility='visible'
lis[i_tem].style.listStyleImage="url('"+img1.src+"')"
}
}

//-->
</script>
</head>
<body>
<!-- Set Height and Width of containing division to avoid 'jumping' -->
<!--[if gte IE 6]>
<div style="height:400px;width:300px;">
<![endif]-->
<script type="text/javascript">
if (ns6Op8)
document.write('<div style="height:400px;width:300px;">')
</script>
<font face="Verdana">

<ul><!-- Set below image to closed folder image -->
<li id="foldheader" style="list-style-image:url('fold.gif');">News</li>
<ul id="foldinglist">
<li><a href="http://www.cnn.com">CNN</a></li>
<li><a href="http://www.abcnews.com">ABC News</a></li>
<li><a href="http://www.news.bbc.co.uk">BBC News</a></li>
</ul>

<li id="foldheader">Webmaster</li>
<ul id="foldinglist">
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.freewarejava.com">Freewarejava.com</a></li>
</ul>

<li id="foldheader">Nested Example</li>
<ul id="foldinglist">
<li><a href="http://www.dynamicdrive.com">outer 1</a></li>
<li><a href="http://www.dynamicdrive.com">outer 2</a></li>
<li id="foldheader">Nested</li>
<ul id="foldinglist">
<li><a href="http://www.dynamicdrive.com">nested 1</a></li>
<li><a href="http://www.dynamicdrive.com">nested 2</a></li>
</ul>
<li><a href="http://www.dynamicdrive.com">outer 3</a></li>
<li><a href="http://www.dynamicdrive.com">outer 4</a></li>
</ul>
</ul>

</font>
<!--[if gte IE 6]>
</div>
<![endif]-->
<script type="text/javascript">
if (ns6Op8)
document.write('</div>')
</script>


<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>
<script type="text/javascript">
<!--

//optional persistence feature

function get_cookie(Name) {
//Get cookie routine by Shelley Powers
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
// if cookie exists
if (offset != -1) {
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

var foldercontentarray=new Array()
var c_item=0

if (ns6Op8){
for (i_item=0;i_item<document.getElementsByTagName("UL").length;i_item++){
if (document.getElementsByTagName("UL")[i_item].id=="foldinglist"){
foldercontentarray[c_item]=document.getElementsByTagName("UL")[i_item]
c_item++
}
}
}

if (get_cookie(window.location.pathname) != '')
onload=function(){
var ulis=document.getElementsByTagName? document.getElementsByTagName('ul') : document.all.tags('ul')
for (var i_tem = 0; i_tem < ulis.length; i_tem++)
if (ulis[i_tem].id=='foldinglist'){
if (Op8)
ulis[i_tem].style.visibility='visible'
ulis[i_tem].style.display="none"
}
var lis=document.getElementsByTagName? document.getElementsByTagName('li') : document.all.tags('li')
for (var i_tem = 0; i_tem < lis.length; i_tem++)
if (lis[i_tem].id=='foldheader'){
if (Op8)
lis[i_tem].style.visibility='visible'
lis[i_tem].style.listStyleImage="url('"+img1.src+"')"
}
openresults=get_cookie(window.location.pathname).split(" ")
for (j_item=0 ; j_item < openresults.length ; j_item++){
if (ns6Op8){
foldercontentarray[openresults[j_item]].style.display=''
if (!Op8)
setTimeout('openThem(j_item);', 0)
else
foldercontentarray[openresults[j_item]].previousSibling.previousSibling.style.listStyleImage="url('"+img2.src+"')"
}
else{
foldinglist[openresults[j_item]].style.display=''
document.all[foldinglist[openresults[j_item]].sourceIndex -1].style.listStyleImage="url('"+img2.src+"')"
}
}
}

function openThem(ul){
while (ul){
foldercontentarray[openresults[ul-1]].previousSibling.previousSibling.style.listStyleImage="url('"+img2.src+"')"
ul--
}
}

if (ns6Op8||ie4){
var nodelength=ns6Op8? c_item-1 : foldinglist.length-1
var nodes=new Array(nodelength)
}


function checkit(){
var openones=''
for (i_item=0 ; i_item <= nodelength ; i_item++){
if ((ns6Op8&&foldercontentarray[i_item].style.display=='')||(ie4&&foldinglist[i_item].style.display==''))
openones+= " " + i_item
}
document.cookie=window.location.pathname+"="+openones
}

if (ns6Op8||ie4)
window.onunload=checkit
//-->
</script>
</body>
</html>

kmclaurin
10-03-2005, 05:10 AM
Thanks much John...I'll take a look ;)

kmclaurin
10-03-2005, 03:33 PM
John, thanks much for your help....the error was mine.
In my PHP script, I discovered an unmatched </a> in one of my menu items.
Fixing that corrected all incorrectly displayed .gifs except the top level...(why, I don't know.)
Thanks again and I apoligize for not finding my mistake sooner....love your script!