Chapter 10

Fancy Flowers Farm Example

This example illustrates how to how to hide and show positioned blocks of content. It uses a pop-up menu to pick which block to display.

This example creates a web page that has five positioned blocks of content. Four of the blocks each contain information about a specific flower, and the fifth block contains a form with a pop-up menu.

The user can choose which flower block to display by using the pop-up menu.

To run the <LAYER> version of the example, select:

flower.htm

flowercs.htm

Introducing the Flower Farm

To start with, the page introduces the flower farm:

<HR>

<H1>Welcome to Fancy Flowers Farm </H1>

<HR>

<P>We sell bulbs, seeds, seedlings, and potted plants, 

in all shapes, sizes, colors, and varieties. 

This page presents information about our most popular varieties.

</P>

Creating the Form for Flower Selection

The form is placed in an inflow layer. The form contains a popup menu (a select menu) listing four kinds of flowers. The menu uses an onClick event handler, so that when it is clicked, the changeFlower() function is invoked to display the selected flower.

The only reason the form needs to be in a layer is so that you can specify the LEFT value for it, since it is to be indented from the left edge. Because this is an inflow layer, the natural cursor position in the page will be at the end of the layer when the layer has finished being drawn.

<ILAYER ID="formlayer" LEFT=50>

<P>Please select a flower:</P>

<FORM NAME=form1>

  <SELECT name=menu1 

  onChange="changeFlower(this.selectedIndex); 

  return false;">

  <OPTION >Mona Lisa Tulip

  <OPTION >Mixed Dutch Tulips

  <OPTION >Bijou Violet

  <OPTION >Pink Chrysanthemum

  </SELECT>

</FORM>

</ILAYER>

When the user selects an option in the menu, the changeFlower() function is invoked. This function calls the hideAllFlowers() function to hide all the flower layers, then shows the flower layer corresponding to the selected option. The flower layers are named flower0, flower1, flower2, and flower3. Thus, the name of the selected flower layer is simply the concatenation of "flower" and the index of the selected option.

<SCRIPT>

// this function hides all the flower layers

function hideAllflowerLayers() {

  document.flower0.visibility="hide";

  document.flower1.visibility="hide";

  document.flower2.visibility="hide";

  document.flower3.visibility="hide";

}

// this function makes a single flower layer visible

function changeFlower(n) {

  hideAllflowerLayers();

  document.layers["flower" + n].visibility="show";

}

</SCRIPT>

Positioning the Flower Layers

The page has four layers that contain information about a flower. Each flower layer contains a left-aligned image, a level 3 heading, and some number of paragraphs. The first layer is initially visible, and the remaining flower layers are initially hidden.

All the flower layers are positioned in exactly the same place, and they have the same width and height. The idea is that only one flower layer is visible at a time.

So far, the page does not contain any layers with absolute positions. So you can let the first flower layer fall at the natural cursor position in the page, which is at the end of the inflow layer that contains the form.

If the first flower layer has an absolute position, the natural cursor position in the page will still be at the end of the form layer. Thus you can let each flower layer fall at the natural position in the page, so long as each one has an absolute position.

The following code shows the code for the first flower layer:

<LAYER ID="flower0" LEFT=50 width=400 

   BGCOLOR="#FFFFDD">

  <HR>

  <H3>Mona Lisa Tulip</H3>

  <HR>

  <IMG src="images/redtul.jpg" align="LEFT" hspace=5>

  <P>These tulips have been specially...</P>	

 <BR CLEAR="ALL">

  <P>Priced at only $1 a bulb...</P>

</LAYER>

The code for the second and third flower layers is very similar. They all use the default value for TOP.

So far, each flower layer has used the default value for TOP. However, if the page had several layers with absolute positions, and you wanted to place another layer in a relative position to one of the existing layers, you could use inline JavaScript to calculate the value for LEFT or TOP. Or if you wanted to make the background of one layer be slightly darker than the background of another, you could use inline JavaScript to calculate the value of the BGCOLOR attribute. (Note however that you can use inline JavaScript only in layer definitions that use the <LAYER> tag. You cannot use inline JavaScript inside layer definitions that use cascading style sheet syntax, although you can use JavaScript to modify such layers after they have been defined and created.)

In this example, there is really no need to use inline JavaScript to position the last flower layer, since you could just let the TOP value default to its natural value, as in the other flower layers.

However, just to provide an illustration of using inline JavaScript, the TOP attribute is given the same value as the TOP attribute for the layer named flower0, as follows: (note that the TOP attribute in the <LAYER> tag can be any case, but the top property in JavaScript must be all lowercase)

<LAYER ID="flower3" LEFT=50 

  TOP=&{"&"};{document.flower0.top;};

    width=400 VISIBILITY="HIDE"

    BGCOLOR="#DDFFDD">

  <HR>

  <H3>Pink Chrysanthemum</H3>

  <HR>

  <IMG src="images/spikey.jpg" align="LEFT" hspace=5>

  <P>These modern chrysanthemums...</P>	

  </LAYER>