Results 1 to 6 of 6

Thread: Smart Folding Menu Tree Script - OPERA

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

    Default Smart Folding Menu Tree Script - OPERA

    Hallo,

    I'm using Opera 7.54 under linux.

    I included the Smart Folding Menu Tree Script

    http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

    Now I got a problem under Opera. The Script works fine under IE, Konqueror and NS, but not under Opera. It only shows the toplevel, but no structure.

    I hope, anyone can help me out, even with a little rewriting.

    -ody

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Yes, the script currently doesn't work in Opera 7. This will be part of our to-do list, though I don't have a time frame yet on when the changes will be made.

  3. #3
    Join Date
    Sep 2005
    Location
    Finland
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Any news on this one?

    I'm using the Smart Folding Menu Tree Script with dynamic content and just realised that it doesn't support Opera. Well I should have read the description more carefully of course but I'd hate to start the tree building java code all over again with some other tree script.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Well, here is a version that works in Opera8 and still works in FF1.0.6 and IE6. The persistence feature does not work in Opera though, at least not locally:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Opera8 Smart Fold - Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    <!--
    #foldheader{cursor:pointer;cursor:hand ; font-weight:bold ;
    list-style-image:url('open.gif');list-style-position:inside;}
    #foldinglist{list-style-image:url('list.gif');}
    //-->
    </style>
    <script language="JavaScript1.2">
    <!--
    
    //Smart Folding Menu tree- By Dynamic Drive (rewritten 03/03/02)
    //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
    //This credit MUST stay intact for use
    
    var head="display:''"
    img1=new Image()
    img1.src="fold.gif"
    img2=new Image()
    img2.src="open.gif"
    
    var ns6=(document.getElementById&&!document.all)||window.opera
    var ie4=document.all&&!window.opera
    var open=1
    
    function checkcontained(e){
    var iscontained=0
    cur=ns6? e.target : event.srcElement
    //alert(cur.style.listStyleImage)
    i=0
    if (cur.id=="foldheader")
    iscontained=1
    else
    while (ns6&&cur.parentNode||(ie4&&cur.parentElement)){
    if (cur.id=="foldheader"||cur.id=="foldinglist"){
    iscontained=(cur.id=="foldheader")? 1 : 0
    break
    }
    cur=ns6? cur.parentNode : cur.parentElement
    }
    
    if (iscontained){
    var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
    if (foldercontent.style.display=="none"){
    foldercontent.style.display=""
    cur.style.listStyleImage="url('open.gif')"
    }
    else{
    foldercontent.style.display="none"
    cur.style.listStyleImage="url('fold.gif')"
    }
    }
    }
    
    if (ie4||ns6)
    document.onclick=checkcontained
    
    onload=function(){
    if (open){
    var lis=document.getElementsByTagName('li')
    for (var i_tem = 0; i_tem < lis.length; i_tem++)
    if (lis[i_tem].id=='foldheader')
    lis[i_tem].style.listStyleImage="url('fold.gif')"
    }
    }
    
    //-->
    </script>
    </head>
    <body>
    <font face="Verdana">
    
    <ul>
       <li id="foldheader" style="list-style-image:url('fold.gif');">News</li>
       <ul id="foldinglist" style="display:none" style=&{head};>
          <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" style="display:none" style=&{head};>
          <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" 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>
    
    <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 language="JavaScript1.2">
    <!--
    
    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=0
    
    if (ns6){
    for (i=0;i<document.getElementsByTagName("UL").length;i++){
    if (document.getElementsByTagName("UL")[i].id=="foldinglist"){
    foldercontentarray[c]=document.getElementsByTagName("UL")[i]
    c++
    }
    }
    }
    
    if (get_cookie(window.location.pathname) != '')
    onload=function(){
      open=0
      var lis=document.getElementsByTagName('li')
      for (var i_tem = 0; i_tem < lis.length; i_tem++)
      if (lis[i_tem].id=='foldheader')
      lis[i_tem].style.listStyleImage="url('fold.gif')"
      var openresults=get_cookie(window.location.pathname).split(" ")
      for (i=0 ; i < openresults.length ; i++){
        if (ns6){
        foldercontentarray[openresults[i]].style.display=''
        foldercontentarray[openresults[i]].previousSibling.previousSibling.style.listStyleImage="url(open.gif)"
        }
        else{
        foldinglist[openresults[i]].style.display=''
        document.all[foldinglist[openresults[i]].sourceIndex -1].style.listStyleImage="url(open.gif)"
        }
      }
    }
    
    if (ns6||ie4){
    var nodelength=ns6? c-1 : foldinglist.length-1
    var nodes=new Array(nodelength)
    var openones=''
    }
    
    
    function checkit(){
      for (i=0 ; i <= nodelength ; i++){
        if ((ns6&&foldercontentarray[i].style.display=='')||(ie4&&foldinglist[i].style.display==''))
           openones=openones + " " + i
      }
      document.cookie=window.location.pathname+"="+openones
    }
    
    if (ns6||ie4)
    window.onunload=checkit
    //-->
    </script>
    </body>
    </html>
    There is very little change to the markup (one style attribute added to the first LI) but, there are quite a few changes to the code and some to the style section.
    - John
    ________________________

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

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Even better, this version works with persistence in Oprea8 as well as still working in IE6 and FF1.0.6*:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Opera8 Smart Fold - Demo - II</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    <!--
    #foldheader{cursor:pointer;cursor:hand ; font-weight:bold ;
    list-style-image:url('open.gif');list-style-position:inside;}
    #foldinglist{list-style-image:url('list.gif');}
    //-->
    </style>
    <script type="text/javascript">
    <!--
    
    //Smart Folding Menu tree- By Dynamic Drive (rewritten 03/03/02)
    //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
    //This credit MUST stay intact for use
    
    var head="display:''"
    img1=new Image()
    img1.src="fold.gif"
    img2=new Image()
    img2.src="open.gif"
    
    var ns6=(document.getElementById&&!document.all)||window.opera
    var ie4=document.all&&!window.opera
    var open=1
    
    function checkcontained(e){
    var iscontained=0
    cur=ns6? e.target : event.srcElement
    //alert(cur.style.listStyleImage)
    i=0
    if (cur.id=="foldheader")
    iscontained=1
    else
    while (ns6&&cur.parentNode||(ie4&&cur.parentElement)){
    if (cur.id=="foldheader"||cur.id=="foldinglist"){
    iscontained=(cur.id=="foldheader")? 1 : 0
    break
    }
    cur=ns6? cur.parentNode : cur.parentElement
    }
    
    if (iscontained){
    var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
    if (foldercontent.style.display=="none"){
    foldercontent.style.display=""
    cur.style.listStyleImage="url('open.gif')"
    }
    else{
    foldercontent.style.display="none"
    cur.style.listStyleImage="url('fold.gif')"
    }
    }
    if (window.opera&&typeof c!=='undefined')
    checkit();
    }
    
    if (ie4||ns6)
    document.onclick=checkcontained
    
    onload=function(){
    if (open){
    var lis=document.getElementsByTagName('li')
    for (var i_tem = 0; i_tem < lis.length; i_tem++)
    if (lis[i_tem].id=='foldheader')
    lis[i_tem].style.listStyleImage="url('fold.gif')"
    }
    }
    
    //-->
    </script>
    </head>
    <body>
    <font face="Verdana">
    
    <ul>
       <li id="foldheader" style="list-style-image:url('fold.gif');">News</li>
       <ul id="foldinglist" style="display:none" style=&{head};>
          <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" style="display:none" style=&{head};>
          <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" 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>
    
    <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">
    <!--
    
    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=0
    
    if (ns6){
    for (i=0;i<document.getElementsByTagName("UL").length;i++){
    if (document.getElementsByTagName("UL")[i].id=="foldinglist"){
    foldercontentarray[c]=document.getElementsByTagName("UL")[i]
    c++
    }
    }
    }
    
    if (get_cookie(window.location.pathname) != '')
    onload=function(){
      open=0
      var lis=document.getElementsByTagName('li')
      for (var i_tem = 0; i_tem < lis.length; i_tem++)
      if (lis[i_tem].id=='foldheader')
      lis[i_tem].style.listStyleImage="url('fold.gif')"
      var openresults=get_cookie(window.location.pathname).split(" ")
      for (i=0 ; i < openresults.length ; i++){
        if (ns6){
        foldercontentarray[openresults[i]].style.display=''
        foldercontentarray[openresults[i]].previousSibling.previousSibling.style.listStyleImage="url(open.gif)"
        }
        else{
        foldinglist[openresults[i]].style.display=''
        document.all[foldinglist[openresults[i]].sourceIndex -1].style.listStyleImage="url(open.gif)"
        }
      }
    }
    
    if (ns6||ie4){
    var nodelength=ns6? c-1 : foldinglist.length-1
    var nodes=new Array(nodelength)
    var openones=''
    }
    
    
    function checkit(){
    if (window.opera)
      openones=''
      for (i=0 ; i <= nodelength ; i++){
        if ((ns6&&foldercontentarray[i].style.display=='')||(ie4&&foldinglist[i].style.display==''))
           openones=openones + " " + i
      }
      document.cookie=window.location.pathname+"="+openones
    }
    
    if (ns6||ie4)
    window.onunload=checkit
    //-->
    </script>
    </body>
    </html>
    * NOTE: The original script had some minor problems in FF with the persistence feature. These have been inadvertently improved in both of these new versions but, not entirely resolved. What happened in the original script in FF was that on reload, no open folder images were restored to their previous state, now, only nested one's have that problem. There was never any problem in FF about maintaining the open or closed state of the menu items themselves, just the images.

    Added Later:

    BTW, does anybody know what:
    Code:
     style=&{head};
    means in this markup? What browser(s) uses it?
    Last edited by jscheuer1; 09-15-2005 at 01:51 AM.
    - John
    ________________________

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

  6. #6
    Join Date
    Sep 2005
    Location
    Finland
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Thank You!

    Thanks John!

    Seems to work allright. Needs a bit of tampering with my java code, but a lot less than implementing a whole new script!

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
  •