File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
The moose likes HTML, CSS and JavaScript and the fly likes Building trees using JavaScript Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Building trees using JavaScript" Watch "Building trees using JavaScript" New topic

Building trees using JavaScript

Ashwathi Menon

Joined: Jun 01, 2001
Posts: 1
How can i buid a Tree structured menu using JavaScript

Suncertified Java Programmer
Sanjay Bahrani
Ranch Hand

Joined: Apr 17, 2001
Posts: 38
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">
<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}
<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 = 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}
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){
{return false}

// Section 2 - writing and displaying content //

var content = ""
content += "<h1>Family Tree Maker</h1>"
content += "<span class='level0' id='parent'>" + TreeArray[0].fullname + "</span>"
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") = TreeArray[i].id
newElem.className = TreeArray[i].className
newText = document.createTextNode(" " + TreeArray[i].fullname)
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
// -->
<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>

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.

Daksha Tulshikar

Joined: Jun 21, 2001
Posts: 2
Opera 5 Browser does not support

what is the equivalent for this browser?

Consider Paul's rocket mass heater.
subject: Building trees using JavaScript
Similar Threads
clear-cache after user logged-in
How to set focus to the last symbol in inputText?
To add a control in JSP
php to javascript
Dynamically changing class attribute of TD without Scriptlet