Directory

Top 50

DHTML : Step 2: Animating the menu
[ Contents ]
Dr Benton

Dynamic Generation of the HTML Code

First of all, congratulations! That you have come this far is proof of your motivation. Keep going... You will soon reach your destination.

Our layers are now in position and the arrays have been filled in. In short, we already know what our menus and sub-menus will display. But our layers are still desperately empty!

To fill them, we will have to write our Dynamic HTML generating code! This is the one that will use the data stored in the arrays in order to display the page content in the visitor's browser.

Why dynamic? We could have hard-coded our layer contents by directly adding the necessary elements to the DIV blocks.

But then you would have to add numerous lines of code (twenty or so) each time you need an additional page or sub-menu. So the principle we opt for is to use the data stored in the arrays - easy to change and to create - to generate in real time the HTML code required to display our menu components.

The code used to dynamically generate the pages is a general one and can simply be called up when changes to our menu are needed.

Examine the following code:

304:       case 'htmlSetup' :
305:             menuSetup('start');
306:             menuSetup('parent');
307:             // Change the FOR expression according to the number of sub-menus (here we used i<8 to obtain 7 sub-menus)
308:             for (var i=1;i<8;i++)
309:          menuSetup('child'+i);
310:
311:       startIMG = new imgObject('startLayer');
312:       parentIMG = new imgObject('parentLayer');
313:       contentHTML = new htmlObject('contentLayer');
314:       choreographer('visibilitySetup');
315:       break;
What makes this miracle possible? Calling up the menuSetup function (lines 73-115) which deals with the code generation. We will reference it three times:

  • line 305: to create the HTML code for the Summary button;

  • line 306: to create the code for the parent menu

  • lines 307-310: the for...next loop is executed seven times to create the seven sub-menus one by one.

Now let's take a closer look at the generation of our dynamic code itself!



Using Arrays for Defining the Hierarchical Structure
  1   2   3   4   5   6   7   8   9   10 
Close-up of the Dynamic Code