• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Jeanne Boyarsky
  • Liutauras Vilda
Sheriffs:
  • Rob Spoor
  • Bear Bibeault
  • Tim Cooke
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Piet Souris
Bartenders:
  • Frits Walraven
  • Himai Minh

Building trees using JavaScript

 
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
How can i buid a Tree structured menu using JavaScript
 
Ranch Hand
Posts: 38
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi there,
I am sending you the example for this, have a look at this...
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Family Tree Maker</title>
<link rel=stylesheet type ="text/css" href="../website.css">
<style type="text/css">
.level0 {position:relative; font:bold 12pt Arial; left:20; color:navy; display:block}
.level1 {position:relative; font:10pt Arial; left:40; color:teal; display:block}
.level2 {position:relative; font:10pt Arial; left:40; color:navy; display:none}
.level3 {position:relative; font:10pt Arial; left:40; color:teal; display:none}
.level4 {position:relative; font:10pt Arial; left:40; color:navy; display:none}
.level5 {position:relative; font:10pt Arial; left:40; color:teal; display:none}
.level6 {position:relative; font:10pt Arial; left:40; color:navy; display:none}
.level7 {position:relative; font:10pt Arial; left:40; color:teal; display:none}
.level8 {position:relative; font:10pt Arial; left:40; color:navy; display:none}
.level9 {position:relative; font:10pt Arial; left:40; color:teal; display:none}
</style>
<script type="text/javascript">
<!--
///////////////////////////////////////////////////////////////////////////
// Family Tree Maker by Patrick Brennan 10/12/2000 revised 20/12/2000 //
///////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
// Section 1 - creating the entries for the tree //
////////////////////////////////////////////////////////
function person(fullname, name, parent, children, level){
this.fullname = fullname
this.id = name
this.parent = parent
this.children = children
this.className = "level" + level
}
var TreeArray = new Array()
///////////////////////////////////////////////////////////////////////////////////////
// Each entry in the following array is in the following format: //
// Full name : Short name (this becomes the element id) : Parent ("root" for the //
// root element), children ( 0 if no, 1 if yes) : level (root = 0) //
///////////////////////////////////////////////////////////////////////////////////////
function makeArray(){
TreeArray[0] = new person("Parent", "parent", "root", "1", "0")
TreeArray[1] = new person("Child 1", "child1", "parent", "0", "1")
TreeArray[2] = new person("Child 2", "child2", "parent", "0", "1")
TreeArray[3] = new person("Child 3", "child3", "parent", "1", "1")
TreeArray[4] = new person("Grandchild 1", "gchild1", "child3", "0", "2")
TreeArray[5] = new person("Grandchild 2", "gchild2", "child3", "1", "2")
TreeArray[6] = new person("Great grandchild 1", "ggchild1", "gchild2", "1", "3")
TreeArray[7] = new person("Great-great grandchild 2", "gggchild2", "ggchild1", "0", "4")
TreeArray[8] = new person("Great grandchild 2", "ggchild2", "gchild2", "0", "3")
TreeArray[9] = new person("Grandchild 3", "gchild3", "child3", "0", "2")
TreeArray[10] = new person("Child 4", "child4", "parent", "0", "1")
TreeArray[11] = new person("Child 5", "child5", "parent", "2", "1")
TreeArray[12] = new person("Grandchild 4", "gchild4", "child5", "1", "2")
TreeArray[13] = new person("Great grandchild 3", "ggchild3", "gchild4", "0", "3")
for (i = 0; i <= TreeArray.length-1; i++){
TreeArray[i].index = i}
}
makeArray()
posbox = new Image
posbox.src = "images/posbox.gif"
negbox = new Image
negbox.src = "images/negbox.gif"
nullbox = new Image
nullbox.src = "images/nullbox.gif"
function swapImage(img){
if(img.src==nullbox.src)
{return false}
if(img.src==posbox.src)
{img.src=negbox.src}
else{img.src=posbox.src}
}

////////////////////////////////////////////////////////
// Section 2 - writing and displaying content //
////////////////////////////////////////////////////////

var content = ""
content += "<h1>Family Tree Maker</h1>"
content += "<span class='level0' id='parent'>" + TreeArray[0].fullname + "</span>"
document.write(content)
var newElem, newText, newImg
for (var i = 1; i <= TreeArray.length-1 ; i++){
newImg = document.createElement("img")
newImg.src = TreeArray[i].children == 0 ? "images/nullbox.gif" : "images/posbox.gif"
newElem = document.createElement("span")
newElem.id = TreeArray[i].id
newElem.className = TreeArray[i].className
newText = document.createTextNode(" " + TreeArray[i].fullname)
newElem.appendChild(newImg)
newElem.appendChild(newText)
document.getElementById(TreeArray[i].parent).appendChild(newElem)
navigator.appName == "Netscape" ? newImg.setAttribute("onclick", "swapImage(this); toggle(this)") : newImg.onclick = respond
}
function toggle(x){
for (var i = 2; i <= x.parentNode.childNodes.length-1; i++){
x.parentNode.childNodes[i].style.display == "block" ? x.parentNode.childNodes[i].style.display = "none" : x.parentNode.childNodes[i].style.display = "block"
}}
function respond(event){ // This function required for IE5
swapImage(window.event.srcElement)
toggle(window.event.srcElement)
}
// -->
</script>
</head>
<body>
<p class=main>This demo shows how the W3C Document Object Model can be used to create an
expanding family tree. The script is compatible with Internet Explorer 5 and Netscape 6,
with only three lines of cross-browser scripting. It is not compatible with Netscape 4.</p>
<p class=main>Clicking on a box will expand the level beneath. The script has up to 10 levels;
in this demo data has been entered in only the first five. Although presented here as a Family
Tree the script can be used for any type of folding-tree menu.</p>
<p class=main>Three images are used by this script - posbox.gif, negbox.gif and nullbox.gif.
The latter is transparent, of the same dimensions as the former, and is there simply for spacing.
They can be saved directly from the screen by right-clicking with the mouse.</p>
<p class=center>
<a href="../index.html">Home</a>
</p>
</body>
</html>

I this there are 3 images posbox.gif,nullbox.gif,negbox.gif replace it with your images. Cauze i cant send the files...
These files are like:
posbox.gif--- just like +ve sign near folder.
negbox.gif--- just like -ve sign near folder.
nullbox.gif--- just like nothing/noImage like a child/file in windows.

 
Greenhorn
Posts: 2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Opera 5 Browser does not support
x.parentNode.childNodes.length

what is the equivalent for this browser?

daksha
 
The only thing that kept the leeches off of me was this tiny ad:
Thread Boost feature
https://coderanch.com/t/674455/Thread-Boost-feature
reply
    Bookmark Topic Watch Topic
  • New Topic