October 3, 2000 - Duplicating HTML Elements

The main challenge of a multiple-hierarchies menu is how to display the possible parameters for the main option that the user selects. The Filters Demo Tool is a good example. Each filter comes with its own set of parameters. Each parameter has its own unique name and range of acceptable values that the user ought to be able to choose by pulling down a menu or checking a selection box. One of the solutions is to prepare these controls in advance and hide them with style="DISPLAY: none". Once a specific control is needed, it is copied to the display area that the user interacts with. If we want to copy the content of an HTML element with ID=source to another HTML element with ID=target, you would do:

target.innerHTML = source.innerHTML;

That's exactly what we do in the filters tool. We prepare the source for all filters, and then copy their innerHTML to the user's visible area. Let's take a simple filter first and see how we prepare its control in advance. The Engrave filter is the simplest filter as it does not accept any parameters. (it suppose to support the bias parameter but it does not seem to influence the filter at all in Internet Explorer 5.5.) Here is the control for the Engrave filter:

<SPAN id=oEngraveControlsstyle="DISPLAY: none">
</SPAN>

Notice how we hide this control by specifying "DISPLAY: none" for the STYLE parameter.