PDA

View Full Version : Smart Folding Menu Tree Script & Firefox bug



ferdinand_paris
10-22-2005, 07:19 AM
I have been looking to use the Smart Folding Menu Tree Script, but found an odd bug in FireFox. If I expand a branch that was not initially expanded, move to another page, and then come back, the branch that I expanded remains open, but the wrong image is displayed for that or any other open branches.

You can see this easily on http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

Click for example on "Webmaster" to expand that branch, and then press reload to reload the page. The reloaded page has the wrong image for "Webmaster", even though the branch is still expanded.

I assume that the problem is because the following line in the script that gives persistence, designed for NS, does not work in FF:
foldercontentarray[openresults[i]].previousSibling.previousSibling.style.listStyleImage="url(open.gif)"

Problem is, I'm not sure what the correct syntax is for FF. Is it something like parentNode?

F_P

jscheuer1
10-23-2005, 04:15 PM
Actually, that line doesn't work in NS7 either. It was designed for NS6 and may or may not work in that browser. To make things more interesting, it does work sometimes, at least in a modified version I came up with. I tinkered with this script some more and found that it could be made to 'work all the time' by giving it additional opportunities. This requires (at least in my current working version) a soft reload of the page [window.location.reload(false)]. This still does not take care of another problem in FF, that of the folder images somtimes not showing up at all (being replaced with an empty or sometimes a filled disc symbol). These facts and other work I've done on this script incline me to think that the css property:

list-style-image:

Is simply not well supported in FF, especially its javascript implementation as:

object.listStyleImage="url('image.gif')"

If you would like to try out this script to see if you can live with it for your purposes, here it is (I am including the entire page, as the markup and style differ from the original too):


<!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
var openAlso='count'

Object.prototype.getNum=function (){
var count=0
var foldH=document.getElementsByTagName('li')
for (var i_tem = 0; i_tem < foldH.length; i_tem++){
if (foldH[i_tem]==this)
openAlso=count
if (foldH[i_tem].id=='foldheader')
count++
}
}

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
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(!document.all&&!foldercontent){
cur.getNum()
window.location.reload( false );
return;
}
if (foldercontent&&foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage="url('"+img2.src+"')"
}
else if (foldercontent){
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 (var 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){
if (!document.all&&typeof foldercontentarray[openresults[ul-1]].previousSibling.previousSibling.style=='undefined'){
window.location.reload( false );
return;
}
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 (var i_item=0 ; i_item <= nodelength ; i_item++){
if ((ns6Op8&&foldercontentarray[i_item].style.display=='')||(ie4&&foldinglist[i_item].style.display==''))
openones+= " " + i_item
}
if (openAlso!=='count')
openones+= " " + openAlso
document.cookie=window.location.pathname+"="+openones
}

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

ferdinand_paris
10-24-2005, 12:17 PM
Thanks. Much appreciated. I'll try it out when my current workload clears and will report back. I haven't had any problems with that list-style-image property in FF before using JS.

F_P

ferdinand_paris
11-02-2005, 12:30 PM
Thanks for that coding. It worked well for me in FireFox.

But I've managed to introduce a similar problem in MSIE6.

The way I use the script, I need to place hotlinks on the {li id="foldheader"}xxx{/li} lines. (There is a long story why.)

Now if I (i) open a page with the smart folding menu on it (ii) open a branch of the menu that was not originally opened (iii) more to another page; (iv) return; then all looks to be alright. The last tree structure is preserved.

BUT if I click on the folder image of the branch I opened up in order to close it up, sure it closes, but the folder image doesn't change. I can open and close it as much as I like, but the image for the branch that was open when I surfed away will not change.

To fix this, FIRST I must close that branch, and THEN hit reload, and then the image will change correctly again as I open and close that branch.

This will happen for any {li id="foldheader"}{a href="yyy"}xxx{/a}{/li} line, i.e. that has hotlinks on it.

As I understand it, the implied style for hotlinks {a ....} is causing problems for the display of the object.listStyleImage.

I've had problems like this before when I have tried to apply a style format for hotlinks in the smart folding tree menu. It can be done, but must be done carefully using styles. I suspect that this was the cause of some of your past problems with the folder images sometimes not showing up at all (being replaced with an empty or sometimes a filled disc symbol). This was exactly the symptom that I had when I had too much formatting applying to the foldheader in the wrong manner.

As a fix to my current problem, I took a leaf from your book and added a soft reload at the end of the checkcontained function. What this means is that there is soft reload each time someone clicks to open or close the tree.

This is a real kludge. It works, but there must be a better way.

Ferdinand

balaji
09-22-2008, 01:04 PM
Hi,
this is balaji,

recently i developed one web based tree.it's work in IE's but it is not working in Mozilla firefox,netscape and remaining web browsers.i found that the other browsers are not allowing to execute "document.all" statement.can any one help me to overcome from this problem.
the code actually i wrote is given below.



<body onload="document.all.treeSlot1.innerhtml=aa0;
document.close();">



in the above code treeSlot1 is id of "<div>" tag and aa0 is the object of tree class.

this is urgent,so kindly reply me as early as possible to overcome this problem.....