wetlandbiology.net
PBIO(BIOL) 3660L Plant Biology Intensive Lab
THE PLANT BIOLOGY DEPARTMENT AT THE UNIVERSITY OF GEORGIA
wetlandbiology.net
CODE
WRITING THE TOP MENU BAR

If a link is to be changed in a menu in a series of static pages, one must recode each page or use one of many methods to have the menu written to each static page by an external file. Change the links in the external file and they will be changed in all the static pages that call on that file for their menus. We use javascript as a low-tech way to accomplish this.

The top menu bar is contained in Table 4, which is in Row 2 of Table 3 which in turn is in the Right Column of Table 1 (see Page Layout). The content of Table 4 is written by the function showTopmenu() using the array topmenu[i] which is read from the external javascript file topmenu2.js. This external file, topmenu2.js, is reproduced below:

Contents of topmenu2.js
back to top

The code in topmenu2.js defines a row of ten cells and their contents, although with some odd syntax. If each line within the brackets in topmenu2.js is delivered to the browser as html, and this html is placed within opening and closing table tags in the body of the page, the browser will render it as a ten-celled, single-row table in the position specified by the table tags. The following describes how this is done.

A javascript function, showTopmenu(), is defined in the head section of the static html page. The function treats each line in topmenu2.js as a successive variable in the array topmenu[i], from i = 0 to i = topmenu.length - 1, and writes it as a line of html in the location in the html document where the function is called. As the function is defined here, there is no modification of what is written to the document. The definition of that function is reproduced below:

Function showTopmenu() without rewrite
back to top

The last step is to specify where in the page document the code is to be written. Here, the function showTopmenu() is called within the table tags of Table 4 in the body of the document as shown below:

Call function showTopmenu()
back to top

All pages presently have the same top menu bar, specified in topmenu2.js. A custom menu would require a custom js file and specifying its name in the definition of showTopmenu() in the head section of each page intended to use it.

PAGE-SPECIFIC REWRITING OF THE TOP MENU BAR

The above just reproduces the contents of the javascript file. Best website navigation prevents a viewer from clicking on a link to the page that is being viewed. Inactivating a self-referring link also changes its color back to that of the base font, alterting the viewer to which page in a menu they are viewing. Thus we want to inactivate a link in the top menu bar if that link points to the page in which it is written by showTopmenu().

This is accomplished by use of the If...Else Statement in javascript. Assuming the file name of the page is known at the time it is written, research.htm in the example below, its link can be inactivated in the top menu bar of research.htm by specifying that it be changed as it is written into the research.htm page. No longer being a functional link, its font color reverts back to steelblue, the base font. Below is the alternative defintion of showTopmenu() that accomplishes this:

Function showTopmenu() with rewrite
back to top


MULTIPLE CHANGES TO THE LEFT SIDE BAR

In the same way as with the top menu bar, the content of the left side bar is written by another function, showLinks(), using one of several different links.js files containing somewhat different links depending on the subject of the page that calls the function. Multiple rewrites use the If...Else If Statement in javascript. Below is the definition of the function showLinks() in the head section of the Plant Profile page for Carex aureolensis. Using the external linksplants2.js file, it inactivates the self-referring link to Carex aureolensis, writes that USDA-Plants has no profile page for Carex aureolensis and writes in the url for its description at Flora of North America.

Function showLinks() with multiple rewrite
back to top

Apparently virtually anything that can be written as html can be put into an external js file and written into a static page as described above, and we have a general method of recognizing in which pages to do it. I have specified the equivalent of an external style (css) sheet in a js file, for instance, but have not yet explored the limits of the method. Even if hard coded in the html page, as are the rewrite instructions in the definition of the functions showTopmenu() and showLinks() above, the placement of page-specific information can be faciliated by this method.
back to top


SHOW RANDOM IMAGE UPON RELOAD

CONTENT
back to top


SHOW ROTATIMG IMAGES

CONTENT
back to top

GLENN GALAU, THE DEPARTMENT OF PLANT BIOLOGY, MILLER PLANT SCIENCES BUILDING, THE UNIVERSITY OF GEORGIA, ATHENS GA  30602-7271
PHONE 706 542 1859    FAX 706 542 1805
MODIFIED ON 13 FEBRUARY 2010. WEB DESIGN BY GLENN GALAU

wetlandbiology icon

Content and opinions expressed on this page do not necessarily reflect the views of nor are they endorsed by the University of Georgia or the University System of Georgia