PDA

View Full Version : 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:


<!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*:

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

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!