Web Tree Control

www.fortochka.com

Basic Web Tree Control
(Windows Explorer Style)

Windows Explorer is a well known navigation tool. These JavaScript codes allow the implementation of this type of tool on a web page (see the left frame as a demo) within minutes by complying with the following instructions:

Download "WebTree.zip" file.

Open "Left.htm" with any text editor.

At the beginning of the document find the code lines with the names of the root directory, directories, files and linked URLs and replace them with the required ones.
Show the codes:

//=============================================================

var root = 'Root Directory'

dir[0] = 'Directory 1'
dir0[0] = new list("File 1","File1.htm")
dir0[1] = new list("File 2","File2.htm")
dir0[2] = new list("File 3","File3.htm")
dir0[3] = new list("File 4","File4.htm")

dir[1] = 'Directory 2'
dir1[0] = new list("File 5","File5.htm")
dir1[1] = new list("File 6","File6.htm")
dir1[2] = new list("File 7","File7.htm")

dir[2] = 'Directory 3'
dir2[0] = new list("File 8","File8.htm")
dir2[1] = new list("File 9","File9.htm")
dir2[2] = new list("File 10","File10.htm")
dir2[3] = new list("File 11","File11.htm")

//=============================================================

To add a file to a directory create a new code line and assign file name and URL to the array with the name "dirN" where N is a directory index (an index of "dir" array). Please ensure that the index of "dirN" array starts from 0 and its order is correct and ascending.
For example:

This is the original "Directory 1":

dir[0] = 'Directory 1'
dir0[0] = new list("File 1","File1.htm")
dir0[1] = new list("File 2","File2.htm")
dir0[2] = new list("File 3","File3.htm")
dir0[3] = new list("File 4","File4.htm")

A file "1a" was added to the "Directory 1":

dir[0] = 'Directory 1'
dir0[0] = new list("File 1","File1.htm")
dir0[1] = new list("File 1a","File1a.htm")
dir0[2] = new list("File 2","File2.htm")
dir0[3] = new list("File 3","File3.htm")
dir0[4] = new list("File 4","File4.htm")

To delete a file in a directory delete the line containing it's name and URL. Please ensure that the array index starts from 0 and its order is correct and ascending.
For example:

This is the original "Directory 1":

dir[0] = 'Directory 1'
dir0[0] = new list("File 1","File1.htm")
dir0[1] = new list("File 2","File2.htm")
dir0[2] = new list("File 3","File3.htm")
dir0[3] = new list("File 4","File4.htm")

"File 2" was deleted from "Directory 1":

dir[0] = 'Directory 1'
dir0[0] = new list("File 1","File1.htm")
dir0[1] = new list("File 3","File3.htm")
dir0[2] = new list("File 4","File4.htm")

To add a directory declare a new array with the name "dirN" where N is a new number of directories - 1. Populate this array with names and URLs of files belonging to this directory. Please ensure that all array indexes start from 0 and their order is correct and ascending.
For example:

This is the original tree:

var dir = new Array()
var dir0 = new Array()
var dir1 = new Array()
var dir2 = new Array()

var root = 'Root Directory'

dir[0] = 'Directory 1'
dir0[0] = new list("File 1","File1.htm")
dir0[1] = new list("File 2","File2.htm")
dir0[2] = new list("File 3","File3.htm")
dir0[3] = new list("File 4","File4.htm")

dir[1] = 'Directory 2'
dir1[0] = new list("File 5","File5.htm")
dir1[1] = new list("File 6","File6.htm")
dir1[2] = new list("File 7","File7.htm")

dir[2] = 'Directory 3'
dir2[0] = new list("File 8","File8.htm")
dir2[1] = new list("File 9","File9.htm")
dir2[2] = new list("File 10","File10.htm")
dir2[3] = new list("File 11","File11.htm")

The directory "Directory 1a" was added to the tree.

dir[0] = 'Directory 1'
dir0[0] = new list("File 1","File1.htm")
dir0[1] = new list("File 2","File2.htm")
dir0[2] = new list("File 3","File3.htm")
dir0[3] = new list("File 4","File4.htm")

dir[1] = 'Directory 1a'
dir1[0] = new list("File 12","File12.htm")
dir1[1] = new list("File 13","File13.htm")
dir1[2] = new list("File 14","File14.htm")
dir1[3] = new list("File 15","File15.htm")

dir[2] = 'Directory 2'
dir2[0] = new list("File 5","File5.htm")
dir2[1] = new list("File 6","File6.htm")
dir2[2] = new list("File 7","File7.htm")

dir[3] = 'Directory 3'
dir3[0] = new list("File 8","File8.htm")
dir3[1] = new list("File 9","File9.htm")
dir3[2] = new list("File 10","File10.htm")
dir3[3] = new list("File 11","File11.htm")

To delete a directory remove all lines with file names and URLs belonging to this directory, remove the array with the name "dirN" from the list of the variables where N is the biggest integer. Please ensure that all array indexes start from 0 and their order is correct and ascending.
For example:

This is the original tree:

dir[0] = 'Directory 1'
dir0[0] = new list("File 1","File1.htm")
dir0[1] = new list("File 2","File2.htm")
dir0[2] = new list("File 3","File3.htm")
dir0[3] = new list("File 4","File4.htm")

dir[1] = 'Directory 2'
dir1[0] = new list("File 5","File5.htm")
dir1[1] = new list("File 6","File6.htm")
dir1[2] = new list("File 7","File7.htm")

dir[2] = 'Directory 3'
dir2[0] = new list("File 8","File8.htm")
dir2[1] = new list("File 9","File9.htm")
dir2[2] = new list("File 10","File10.htm")
dir2[3] = new list("File 11","File11.htm")

Directory "Directory 1" was deleted from the original tree:

dir[0] = 'Directory 2'
dir0[0] = new list("File 5","File5.htm")
dir0[1] = new list("File 6","File6.htm")
dir0[2] = new list("File 7","File7.htm")

dir[1] = 'Directory 3'
dir1[0] = new list("File 8","File8.htm")
dir1[1] = new list("File 9","File9.htm")
dir1[2] = new list("File 10","File10.htm")
dir1[3] = new list("File 11","File11.htm")

The number of directories as well as the number of files per directory are practically unlimited.
The Web Tree Control (Windows Explorer Style) works with IE-4 and Firefox.