TreeView Demo: JavaScript Functions

JavaScript functions can be used to manipulate the Treeview. Also,
tree nodes can be used to call JavaScript functions. Both cases are
demonstrated in this example.

How other pages can manipulate the tree…

The buttons in the bottom-left corner shows four common options that
manipulate the tree programmatically. Download the Treeview ZIP to get
access to these functions and to all the code in this demo. The last
two buttons activate nodes in the tree. With these functions it is
possible to keep the tree in synch with what is happening in the right
frame, by opening folders and selecting documents without any actual
mouse click on them. Links and buttons to trigger these operations are
more commonly found in the right frame than in these buttons.

Imagine, for example, a tree of photos. You may want to let the
user load a photo by clicking on the tree or by clicking on a “Next”
link under the photo in the right frame. This “Next” link would not
only load the next photo in sequence like in a slideshow, but would
also select the corresponding node in the tree. You can accomplish
this by putting in the HREF of the “Next” link something similar to
what is found in the onClick parameter of the “Load Map of Europe”
button in this demo.

Note that the “Load Map of Europe” button not only selects the node
and loads the image, but it also scrolls down the tree frame. To see the
scroll function working, we are going to take a couple of steps that are
only really needed in this example because of the small dimensions of
this tree. (You may want to first read through the whole next paragraph
one time, and, later, to return to this page, press “Flags and

Start by making the browser window really small such that, above the
menu, you can only see the root folder and maybe the Flags folder.
Then click the “Open All” button, and click the “Load Map of Europe”
button. See how the tree scrolled down to show the Europe node!

How a node can execute a function…

Instead of actual pages, images, and so on, the folders and
“documents” in the tree can be made to call JavaScript functions.
Three such links can be found inside the “javascript: links”
folder. To learn more about exactly what is the definition of these
functions and how they are called by the tree nodes, see the comments
in the code of these pages.

One simple case where a node needs to call a function is when the
window for the new page should not have menu bar, status bar, and so
on. In this demo we created a generic function that takes the URL of
the page to load as an argument, we and are using it with the “Window
w/o bars” link.

The other two links, including the final folder, simply call the
built-in function “alert”. They show how you can pass strings to
functions and how it is possible for these strings to have the
characters ” and ‘ (which are reserved in JavaScript).