473,788 Members | 2,898 Online
Bytes | Software Development & Data Engineering Community
+ 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="javascrip t:ddtreemenu.fl atten('treemenu 1services', 'expand') ?
ddtreemenu.flat ten('treemenu1s ervices', 'contact')" to cause the same
effect?

Mar 26 '07 #1
1 2866

"Nospam" <no****@home.co mwrote in message
news:YU******** ***********@new sfe6-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="javascrip t:ddtreemenu.fl atten('treemenu 1services', 'expand') ?
ddtreemenu.flat ten('treemenu1s ervices', 'contact')" to cause the same
effect?
The javascript in simpletreemenu is:

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

ddtreemenu.clos efolder="/includes/closed.gif" //set image path to "closed"
folder image
ddtreemenu.open folder="/includes/open.gif" //set image path to "open" folder
image

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

ddtreemenu.crea teTree=function (treeid, enablepersist, persistdays){
var ultags=document .getElementById (treeid).getEle mentsByTagName( "ul")
if (typeof persisteduls[treeid]=="undefined" )
persisteduls[treeid]=(enablepersist ==true &&
ddtreemenu.getC ookie(treeid)!= "")? ddtreemenu.getC ookie(treeid).s plit(",") :
""
for (var i=0; i<ultags.length ; i++)
ddtreemenu.buil dSubTree(treeid , ultags[i], i)
if (enablepersist= =true){ //if enable persist feature
var durationdays=(t ypeof persistdays=="u ndefined")? 1 :
parseInt(persis tdays)
ddtreemenu.dota sk(window, function(){ddtr eemenu.remember state(treeid,
durationdays)}, "unload") //save opened UL indexes on body unload
}
}

ddtreemenu.buil dSubTree=functi on(treeid, ulelement, index){
ulelement.paren tNode.className ="submenu"
if (typeof persisteduls[treeid]=="object"){ //if cookie exists
(persisteduls[treeid] is an array versus "" string)
if (ddtreemenu.sea rcharray(persis teduls[treeid], index)){
ulelement.setAt tribute("rel", "open")
ulelement.style .display="block "
ulelement.paren tNode.style.bac kgroundImage="u rl("+ddtreemenu .openfolder+")"
}
else
ulelement.setAt tribute("rel", "closed")
} //end cookie persist code
else if (ulelement.getA ttribute("rel") ==null ||
ulelement.getAt tribute("rel")= =false) //if no cookie and UL has NO rel
attribute explicted added by user
ulelement.setAt tribute("rel", "closed")
else if (ulelement.getA ttribute("rel") =="open") //else if no cookie and this
UL has an explicit rel value of "open"
ddtreemenu.expa ndSubTree(treei d, ulelement) //expand this UL plus all parent
ULs (so the most inner UL is revealed!)
ulelement.paren tNode.onclick=f unction(e){
var submenu=this.ge tElementsByTagN ame("ul")[0]
if (submenu.getAtt ribute("rel")== "closed"){
submenu.style.d isplay="block"
submenu.setAttr ibute("rel", "open")
ulelement.paren tNode.style.bac kgroundImage="u rl("+ddtreemenu .openfolder+")"
}
else if (submenu.getAtt ribute("rel")== "open"){
submenu.style.d isplay="none"
submenu.setAttr ibute("rel", "closed")
ulelement.paren tNode.style.bac kgroundImage="u rl("+ddtreemenu .closefolder+") "
}
ddtreemenu.prev entpropagate(e)
}
ulelement.oncli ck=function(e){
ddtreemenu.prev entpropagate(e)
}
}

ddtreemenu.expa ndSubTree=funct ion(treeid, ulelement){ //expand a UL element
and any of its parent ULs
var rootnode=docume nt.getElementBy Id(treeid)
var currentnode=ule lement
currentnode.sty le.display="blo ck"
currentnode.par entNode.style.b ackgroundImage= "url("+ddtreeme nu.openfolder+" )
"
while (currentnode!=r ootnode){
if (currentnode.ta gName=="UL"){ //if parent node is a UL, expand it too
currentnode.sty le.display="blo ck"
currentnode.set Attribute("rel" , "open") //indicate it's open
currentnode.par entNode.style.b ackgroundImage= "url("+ddtreeme nu.openfolder+" )
"
}
currentnode=cur rentnode.parent Node
}
}

ddtreemenu.flat ten=function(tr eeid, action){ //expand or contract all UL
elements
var ultags=document .getElementById (treeid).getEle mentsByTagName( "ul")
for (var i=0; i<ultags.length ; i++){
ultags[i].style.display= (action=="expan d")? "block" : "none"
var relvalue=(actio n=="expand")? "open" : "closed"
ultags[i].setAttribute(" rel", relvalue)
ultags[i].parentNode.sty le.backgroundIm age=(action=="e xpand")?
"url("+ddtreeme nu.openfolder+" )" : "url("+ddtreeme nu.closefolder+ ")"
}
}

ddtreemenu.reme mberstate=funct ion(treeid, durationdays){ //store index of
opened ULs relative to other ULs in Tree into cookie
var ultags=document .getElementById (treeid).getEle mentsByTagName( "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.setC ookie(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.getC ookie=function( Name){ //get cookie value
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target
name/value pair
if (document.cooki e.match(re)) //if cookie found
return document.cookie .match(re)[0].split("=")[1] //return its value
return ""
}

ddtreemenu.setC ookie=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=expir eDate.setDate(e xpireDate.getDa te()+parseInt(d ays))
document.cookie = name+"="+value+ "; expires="+expir eDate.toGMTStri ng()+";
path=/";
}

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

ddtreemenu.prev entpropagate=fu nction(e){ //prevent action from bubbling
upwards
if (typeof e!="undefined" )
e.stopPropagati on()
else
event.cancelBub ble=true
}

ddtreemenu.dota sk=function(tar get, functionref, tasktype){ //assign a
function to execute to an event handler (ie: onunload)
var tasktype=(windo w.addEventListe ner)? tasktype : "on"+taskty pe
if (target.addEven tListener)
target.addEvent Listener(taskty pe, functionref, false)
else if (target.attachE vent)
target.attachEv ent(tasktype, functionref)
}
Jun 13 '07 #2

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

Similar topics

3
12672
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, parent_category_id, category_name (some other fileds are there as well but these are enough to figure out the logic) I know that I have to store all the product_categories records in a temp array and then some how go through them and store the...
3
1487
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
5845
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. When i Post a form and it displays a new html page i would like to see a different branch expaned on the tree menu and close (who be a bonus) the other one that is open.
7
3000
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? Any help appreciated. John In the below script, I can expand and contract the nodes when clicked on, but I want the menu to close all other siblings to the node clicked so that only one sub menu option is expanded at one time. If the node...
4
2692
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 properly in Firefox, although it's working without problems in IE 5.5 & 6.0 In Firefox any file which isn't in the same directory isn't found, so the images are missing and the links don't launch. It may be something simple, but I don't have the...
0
2180
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 am able to check using xpath in asp.net 2.0 till MenuItem node. if i check visible attribute value till SubMenuLevel0 node then in tree it will not display the MenuItem Node at all Note: My tree Menu will start from MenuItem node and it will...
4
2582
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 display a tree of items? I could display a tree control, but that takes a lot of space on the page. I have seen comboboxes in non-web apps uses such a thing. I want to be able to display a tree in a compact fashion. Any ideas would be appreciated.
0
1176
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 arguments contains a reference to the tree node linked to the menu item that was clicked. in the case that no menu item was selected, i want to fire this event with a null refrenced tree node.i could have done so if the collapse event of the context menu...
2
1936
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
9656
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9498
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10172
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10110
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9967
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8993
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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
6750
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 then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5398
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 last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
4069
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 we have to send another system

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.