tree menu eMenuTree: the Script which eMenuTree writes

Introduction

Various of the functions which control the tree menu are exposed, and may be used to script tree menus .  You can write script to open a tree menu to a certain point, change the style of any one line of the tree, close branches, etc.  Doing this requires a knowledge of both javascript and of the eMenuTree functions.

Basic tree menu functions

The basic tree menu functions:

Tree Menu Javascript

Comments
eMF("c1d5","","Intro","")// create main folder with name "Intro" and id "c1d5"
eSF("c1d5d1","","Basics","")// create sub-folder with name "Basics" and id "c1d5d1"
eLK("c1d5d1d1","i","Start"," start.htm")// create link line with name "Start" and id "c1d5d1d1".  It links to the file "start.htm".  The "i" indicates that the link is internal, i.e. it opens in the same window.
eDE()// close main folder or subfolder

To learn more about the various options for each of the functions, examine the script in one of your tree menu pages.  The second parameter of the eLK() command may have "i" for internal, "e" for external, "r" for content (right) frame, "j" for javascript, "w" to indicate a URL, "nl" for a non-link, "nm" for no image.  The second element of eMF(), eSF() and eLK() may contain "dd" to indicate a drop down tree menu.

The tree menu HTML

The relevant HTML which the tree menu functions writes:

Command

The HTML code the command writes in most browsers
eMF("c1d5","","Intro",""); <div class='mainFolderBox' ...>
<a id='c1d5a' class='mainFolderLine'...>
<IMG id='c1d5i' src=(folder image)...>
Intro
</a>
<div id='c1d5' class='subFolderPage'...>
eSF("c1d5d1","","Basics","") <div class='subFolderBox' ...>
<a id='c1d5d1a' class='subFolderLine'>
<IMG id='c1d5d1i' src=(folder image)...>
Basics
</a>
<div id='c1d5d1' class='subFolderPage'...>
eLK("c1d5d1d1","i","Start","start.htm"); <div id='bc1d5d1d1' class='linkBox' ...>
<a id='bc1d5d1d1a' class='linkLine'>
<IMG id='bc1d5d1d1i' src=(link image)...>
Basics
</a>
</div>
eDE() </div></div>

The folder and subfolder anchors open and close folders.  The link anchor links to a page.  The crucial thing to note is the id numbers.  To script eMenutree, you will get ahold of the divisions, anchors or images via these.  Notice that eMenuTree adds a "b" to the id of links.

If the user is using a very old browser, the html that eMenuTree commands writes is much simpler:

Command

The class names
eMF("c1d5","","Intro",""); <p id='c1d5' class='mainFolderBox' ...>
<a id='c1d5a' class='mainFolderLine'...>
<IMG id='c1d5i' src=(folder image)...>
Intro
</a>
</p>
eSF("c1d5d1","","Basics","") <p id='c1d5d1a' class='subFolderBox' ...>
<a id='c1d5d1a' class='subFolderLine'>
<IMG id='c1d5d1i' src=(folder image)...>
Basics
</a>
</p>
eLK("c1d5d1d1","i","Start","start.htm"); <p id='bc1d5d1d1' class='linkBox' ...>
<a id='bc1d5d1d1a' class='linkLine' ...>
<IMG id='bc1d5d1d1i' src=(link image)...>
Basics
</a>
</p>
eDE() No HTML code

The exposed variables

eMenuTree defines the following browser related variables, which you may use in your script:

     eAGT=navigator.userAgent.toLowerCase()
    ePI=parseInt(navigator.appVersion)
    eIE=((eAGT.indexOf('msie')!=-1)&&(eAGT.indexOf('opera')==-1))   // IE but not opera
    eW3C=document.getElementById 
    eGB=!eMW3C   // generic browser

 

 

Finally, there is one other crucial exposed array:

eGI=new Array()

eGI maps a folder name or a link name to the id of that folder or link.  If your tree has the main folder command:

eMF("c1d5","","Intro","");

then

eGI["Intro"]= "c1d5"

eGI maps strings to strings.  It is case sensitive, so you must get the folder or link name exactly right.  Notice that since it is an array it uses square brackets.

The exposed functions

Besides the functions eMF, eSF, eLK, and eDE, you may also use:

eOS(id) eOS("c1d1") opens the folder with id "c1d1".
eCS(id) eCS("c1d1") closes the folder with id "c1d1".
eGF(id) Returns the father of a given id.  eGF("c1d1d2") returns "c1d1",   eGF("bc1d1d2") also returns "c1d1".
eGO(id) eGO("c1d1") returns an object reference to the element with id="c1d1".

All of these elements will cause an error if there is no folder or link line with the given id.  eGO(id) will cause an error for older browsers.  (Examples given below explain how to avoid this.)

Using the exposed variables and functions

The following script changes the background color of the folder or link line named "Intro":


if(eMW3C){eGO(eGI["Intro"]+"a").style.backgroundColor = "teal"}

Code Explanation
if(eW3C){....} You must use this, because eGO will cause an error in older browsers. 
eGI["Intro"] Returns the id of the folder or linkline with name "Intro".  In this example we will suppose this is "c1d5".
eGI["Intro"]+"a" Returns "c1d5a", the anchor of the "Intro" folder of link line
eGO(eGI["Intro"]+"a") Returns an object reference to the anchor "c1d5a"
eGO(eGI["Intro"]+"a").style.backgroundColor = "teal" Changes the background color of this anchor to teal

The same strategy can be used to script the anchor or folder image.  To change the image to folder.gif use:

if(eW3C){eGO(eGI["Intro"]+"i").src = "folder.gif"}

Note about very old browsers: The old browser code doesn't have any hidden elements, and so you can only script the things that are actually showing on the page.  If a folder is closed, you can't script anything that is in it.  This is why I begin the example with a check that this is a newer browser (i.e. eW3C is true).

If you intend to use these often, then it makes sense to write functions:

function imageOf(name){return eGO(eGI[name]+'i')}

function anchorOf(name){return eGO(eGI[name]+'a')}

This will make your javascript much more readable:

if(eW3C){anchorOf("Intro").style.backgroundColor = "teal"}

if(eMW3C){imageOf("Intro").src = "folder.gif"}