The tree menu is displayed in an inset in the left <div> section on every page, along with the page menu in another inset above.
However, some aspects of the positional menus are dependent of the tree structure, so it is best that the tree mechanism is outlined first; although we might start with the HTML code that defines both insets.
<! start of #header div>
<! start of #top bar div >
<! start of #left div >
<div id="parentNav" class="insetLH">
<! page menu goes here>
<! tree menu loads here>
As previously outlined, there is an offline Visual basic program called MakeMenu that generates the tree structure used by the website. Initially, the output from the MakeMenu program is simply a very large string declaration, which basically consists of a number of variables for each page, which are repeated for each page. For readability, the following code is reduced to the first two entries in this string
var oTag ='0';
var oLabel ='1';
var oDepth ='2';
var oState ='3';
var oChildren ='4';
var oParent ='5';
var oNext ='6';
var oPrevious ='7';
var oChild ='8';
var oType ='9';
var oFile ='10';
var oPath ='11';
/ the enext string actually contains a entry for every page, i.e. 500+
var treeData ='1,Home,0,Y,N,X,2,P,1,R,#,1,|2,Status,1,N,N,0,N,P,D,L,#,1,|';
myTree1 = treeData.split('|');
var tree1Rows = myTree1.length;
for ( i=0; i<tree1Rows; i++)
myTree1[i] = myTree1[i].split(',');
if ((readTreeCookie("tree1Cookie")) != null)
On loading, treeMenu() tests to see if a previous tree state was saved in a cookie so that the open status of the tree menu can be preserved when switching webpages. However, it should be fairly obviously that this function is only one of many required to support the operation of the tree menu, e.g.
- function treeExpand(row)
- function treeContract(row)
- function treeOpenAll()
- function treeCloseAll()
- function treeOpenTo()
- function treeSections()
- function treeDisplay()
Most of the functions above are called based on mouse/click operation on the tree menu. However, treeDisplay() is the primary function that builds and modifies the tree menu based on the implied request invoked by the mouse/click.
str = '<p>'
// entire tree menu display is built into the string str in this section of code
str += '</p>';
// finally the string is display into the myTree <div>
// positioned in the HTML source of every webpage
treeDiv.innerHTML = str;
While in reality this latter function is quite large, it essentially uses the same mechanism to build a large continuous HTML string (str), which is then output into the <div id="myTree"> defined on every HTML page.