Results 1 to 5 of 5

Thread: Smart Folding Menu Tree Script & Firefox bug

  1. #1
    Join Date
    Oct 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Smart Folding Menu Tree Script & Firefox bug

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,939
    Thanks
    43
    Thanked 3,193 Times in 3,156 Posts
    Blog Entries
    12

    Default

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

    Code:
    <!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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Oct 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #5
    Join Date
    Sep 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default About firefox issues

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •