Smart Folding Menu Tree Script - OPERA

**ody13** · 10-05-2004, 09:31 AM

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

**ddadmin** · 10-06-2004, 07:20 PM

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.

**HanduMan** · 09-14-2005, 02:02 PM

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.

**jscheuer1** · 09-14-2005, 08:43 PM

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.

**jscheuer1** · 09-15-2005, 01:07 AM

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?

**HanduMan** · 09-15-2005, 07:14 AM

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!

Thread: Smart Folding Menu Tree Script - OPERA

Thread Tools

Search Thread

Smart Folding Menu Tree Script - OPERA

Thank You!

Bookmarks

Bookmarks

Posting Permissions