473,473 Members | 1,881 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

menu tree that expands and contracts

I am trying to have an expandable menu each time it's clicked expands, and
if it's clicked again, if it is already expanded contracts, and if
contracted expands, following this example
http://www.dynamicdrive.com/dynamicindex1/navigate1.htm, I notice the
example works in each sub folder and folder, it contracts and expands if it
is already contracted/expanded, what do I add to this: <a
href="javascript:ddtreemenu.flatten('treemenu1serv ices', 'expand') ?
ddtreemenu.flatten('treemenu1services', 'contact')" to cause the same
effect?

Mar 26 '07 #1
1 2845

"Nospam" <no****@home.comwrote in message
news:YU*******************@newsfe6-gui.ntli.net...
I am trying to have an expandable menu each time it's clicked expands, and
if it's clicked again, if it is already expanded contracts, and if
contracted expands, following this example
http://www.dynamicdrive.com/dynamicindex1/navigate1.htm, I notice the
example works in each sub folder and folder, it contracts and expands if
it
is already contracted/expanded, what do I add to this: <a
href="javascript:ddtreemenu.flatten('treemenu1serv ices', 'expand') ?
ddtreemenu.flatten('treemenu1services', 'contact')" to cause the same
effect?
The javascript in simpletreemenu is:

var persisteduls=new Object()
var ddtreemenu=new Object()

ddtreemenu.closefolder="/includes/closed.gif" //set image path to "closed"
folder image
ddtreemenu.openfolder="/includes/open.gif" //set image path to "open" folder
image

//////////No need to edit beyond here///////////////////////////

ddtreemenu.createTree=function(treeid, enablepersist, persistdays){
var ultags=document.getElementById(treeid).getElements ByTagName("ul")
if (typeof persisteduls[treeid]=="undefined")
persisteduls[treeid]=(enablepersist==true &&
ddtreemenu.getCookie(treeid)!="")? ddtreemenu.getCookie(treeid).split(",") :
""
for (var i=0; i<ultags.length; i++)
ddtreemenu.buildSubTree(treeid, ultags[i], i)
if (enablepersist==true){ //if enable persist feature
var durationdays=(typeof persistdays=="undefined")? 1 :
parseInt(persistdays)
ddtreemenu.dotask(window, function(){ddtreemenu.rememberstate(treeid,
durationdays)}, "unload") //save opened UL indexes on body unload
}
}

ddtreemenu.buildSubTree=function(treeid, ulelement, index){
ulelement.parentNode.className="submenu"
if (typeof persisteduls[treeid]=="object"){ //if cookie exists
(persisteduls[treeid] is an array versus "" string)
if (ddtreemenu.searcharray(persisteduls[treeid], index)){
ulelement.setAttribute("rel", "open")
ulelement.style.display="block"
ulelement.parentNode.style.backgroundImage="url("+ ddtreemenu.openfolder+")"
}
else
ulelement.setAttribute("rel", "closed")
} //end cookie persist code
else if (ulelement.getAttribute("rel")==null ||
ulelement.getAttribute("rel")==false) //if no cookie and UL has NO rel
attribute explicted added by user
ulelement.setAttribute("rel", "closed")
else if (ulelement.getAttribute("rel")=="open") //else if no cookie and this
UL has an explicit rel value of "open"
ddtreemenu.expandSubTree(treeid, ulelement) //expand this UL plus all parent
ULs (so the most inner UL is revealed!)
ulelement.parentNode.onclick=function(e){
var submenu=this.getElementsByTagName("ul")[0]
if (submenu.getAttribute("rel")=="closed"){
submenu.style.display="block"
submenu.setAttribute("rel", "open")
ulelement.parentNode.style.backgroundImage="url("+ ddtreemenu.openfolder+")"
}
else if (submenu.getAttribute("rel")=="open"){
submenu.style.display="none"
submenu.setAttribute("rel", "closed")
ulelement.parentNode.style.backgroundImage="url("+ ddtreemenu.closefolder+")"
}
ddtreemenu.preventpropagate(e)
}
ulelement.onclick=function(e){
ddtreemenu.preventpropagate(e)
}
}

ddtreemenu.expandSubTree=function(treeid, ulelement){ //expand a UL element
and any of its parent ULs
var rootnode=document.getElementById(treeid)
var currentnode=ulelement
currentnode.style.display="block"
currentnode.parentNode.style.backgroundImage="url( "+ddtreemenu.openfolder+")
"
while (currentnode!=rootnode){
if (currentnode.tagName=="UL"){ //if parent node is a UL, expand it too
currentnode.style.display="block"
currentnode.setAttribute("rel", "open") //indicate it's open
currentnode.parentNode.style.backgroundImage="url( "+ddtreemenu.openfolder+")
"
}
currentnode=currentnode.parentNode
}
}

ddtreemenu.flatten=function(treeid, action){ //expand or contract all UL
elements
var ultags=document.getElementById(treeid).getElements ByTagName("ul")
for (var i=0; i<ultags.length; i++){
ultags[i].style.display=(action=="expand")? "block" : "none"
var relvalue=(action=="expand")? "open" : "closed"
ultags[i].setAttribute("rel", relvalue)
ultags[i].parentNode.style.backgroundImage=(action=="expand ")?
"url("+ddtreemenu.openfolder+")" : "url("+ddtreemenu.closefolder+")"
}
}

ddtreemenu.rememberstate=function(treeid, durationdays){ //store index of
opened ULs relative to other ULs in Tree into cookie
var ultags=document.getElementById(treeid).getElements ByTagName("ul")
var openuls=new Array()
for (var i=0; i<ultags.length; i++){
if (ultags[i].getAttribute("rel")=="open")
openuls[openuls.length]=i //save the index of the opened UL (relative to the
entire list of ULs) as an array element
}
if (openuls.length==0) //if there are no opened ULs to save/persist
openuls[0]="none open" //set array value to string to simply indicate all
ULs should persist with state being closed
ddtreemenu.setCookie(treeid, openuls.join(","), durationdays) //populate
cookie with value treeid=1,2,3 etc (where 1,2... are the indexes of the
opened ULs)
}

////A few utility functions below//////////////////////

ddtreemenu.getCookie=function(Name){ //get cookie value
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target
name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

ddtreemenu.setCookie=function(name, value, days){ //set cookei value
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie,
respectively
var expstring=expireDate.setDate(expireDate.getDate()+ parseInt(days))
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+";
path=/";
}

ddtreemenu.searcharray=function(thearray, value){ //searches an array for
the entered value. If found, delete value from array
var isfound=false
for (var i=0; i<thearray.length; i++){
if (thearray[i]==value){
isfound=true
thearray.shift() //delete this element from array for efficiency sake
break
}
}
return isfound
}

ddtreemenu.preventpropagate=function(e){ //prevent action from bubbling
upwards
if (typeof e!="undefined")
e.stopPropagation()
else
event.cancelBubble=true
}

ddtreemenu.dotask=function(target, functionref, tasktype){ //assign a
function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}
Jun 13 '07 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Angelos | last post by:
Hello there, I am trying to write a script that will create dynamically a menu from MySQL database. The database table is a product categories table and it has the folowing filed: category_id,...
3
by: Karthik.S | last post by:
I have a smart folding menu tree as pictured below Home Why What How Who What's Next The "Why" "What" "How" etc are links to Why.asp, What.asp, How.asp etc.
2
by: Jo | last post by:
I don't know if this can be done.. But here is what i am trying to do... I have a tree menu on a frameless page. I have the menu on the right hand side and a CGI web form post on the left....
7
by: johkar | last post by:
I am confused on childNodes or children. When you have nested lists, I would think it would all be one list in the Dom, this doesn't seem to be the case. So how do you traverse an unordered list?...
4
by: erikd | last post by:
I'm using an expanding tree menu based on the design from Dieter Bungers GMD (www.gmd.de) and infovation (www.infovation.de) named displayToc.js. The problem is that the script isn't working...
0
by: Tree menu using XML | last post by:
I have one XML file that has nodes and sub node and each and every node has the attribute call visible if its value is true then diplay this node else don't display thid node, but this condition i...
4
by: David W. Simmonds | last post by:
Outside of building a custom ActiveX control that would need to run on the user's machine and have security attributes set to allow such, does anyone have any code that will allow a combobox to...
0
by: EvilProject | last post by:
Hi im writing a class of a context menu where each menu item is linked to a Tree Node. I have a click event (that belongs to the context menu class ,not the menu item class) that it's event...
2
by: MOS1 | last post by:
Folks Please help this is driving me insane The + expands but the minus fails Error src is null or not an object function Win_onLoad() { GetNameAndLink(0); } function GetNameAndLink(pkId)
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
1
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
0
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
1
muto222
php
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.