- Introduction
- The Concept: "Sliding" Menu Table in a Navigation Frame
- The DHTML in the Nav Menu
- The JavaScript "Slides" a New Menu into the Top Table Row
- Final Thoughts: Opportunities for Improvement
- References
- Conclusion
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The JavaScript "Slides" a New Menu into the Top Table Row
The DisplayMenu(Menuchoice) Function
First, here's a bit of background explanation. The Document Object Model (DOM) describes various objects and collections of objects representing the parts of an HTML page as interpreted by a browser. Included in this are the rows and cells of an HTML table. The object model for DHTML provides objects and methods to manipulate parts of the DOM, including the objects for the rows and cells mentioned above. One of these DHTML objects is the TextRange property, which provides access to the actual HTML tags that make up an HTML page. It can do this in real time through the use of scripts. The following steps utilize these objects, collections, and methods to manipulate the navigation menu as fast as the browser can render it.
Define the Target Objects for the New Menu
The DisplayMenu(MenuChoice) function is called upon load of each page of business content in the web site. It's invoked with one argument, MenuChoice, which specifies the appropriate top navigation menu to be displayed. This argument is hardcoded into each <Body> tag.
DisplayMenu() will need to define a hierarchy of table objects representing the menu.
Start by defining the row object as the 0th row in the collection of rows within the 'TopNavTbl' object in the 'nav' frame:
colTheRow = top.frames['nav'].document.all('TopNavTbl').rows(0);
Then define the cell object as the 0th cell in the collection of cells within the new row object:
objTheCell = colTheRow.cells(0);
Next, use the createTextRange() method to instantiate a TextRange object called rngExisting associated with the document body of the 'nav' frame. Specify the actual HTML text associated with the "cell" element using the moveToElementText() method. Make it current with the Select method. This is akin to highlighting the specific HTML code for a table cell in an editor.
rngExisting = top.frames['nav'].document.body.createTextRange(); rngExisting.moveToElementText(objTheCell); rngExisting.select;
Create Logic for Selecting and Activating a New Menu Image
Let's put the new rngExisting object aside for a moment and come back to it after we set up some HTML text strings.
At this point, we need to set up some string variables with HTML <img> tag definitions for each of the possible menus. Note that the attributes are set exactly to the values in the <img> tags defined in the actual HTML table definition.
In the following sample code snippet, the values 'images/home.gif', 'FPMap1', and so on match the actual values shown in the "Hidden Row working area" example above.
At first this seems a little redundant. You might ask, "Why specify the images in two separate places?" The images were defined in the table above as part of the image-mapping process. The objective is to associate specific page links to spatial locations on the image in a manner that's easy to maintain. Now we're associating these same image/image map combinations to specific Switch statement options so they can be dynamically invoked. The magic here is that the spatial locations of the predefined image maps follow the image/image map names wherever and whenever they're referenced.
switch(MenuChoice)
{
case 'Menu1':
strMenuRow = "<img NAME='Menu1' border='0'
src='images/home.gif' usemap='#FPMap1' width='800' height='45'>";
break; .........
The switch statement allows different images to be "slid" into place depending on the MenuChoice argument passed into the function. How does it do this?
The crucial line of script to make it all work together is the pasteHTML() method of the rngExisting object we created earlier. This object was created to hold the appropriate HTML code for row 0, cell 0 of the TopNavTbl. This is the actual menu displayed to the user's browser. We'll "paste" the appropriate string of HTML code, as defined in the Switch statement above, into the rngExisting object.
rngExisting.pasteHTML(strMenuRow);
This is where the "Dynamic" in DHTML takes over for us and, in less than a heartbeat, applies the new HTML code directly to the user's screen. Voilà!! The user sees a new menu.
Operationally, the script closes and the user gains control of the cursor. This gives the user the opportunity to select a new menu option that loads a new page, with a new call to the DisplayMenu() function, which will make a new selection from the Switch statement and invoke the pasteHTML method all over again...and again...ad infinitum.