[Contents] [Prev page]

Using External Sources For a Layer
(Nikki's Diner)

This example illustrates a simple use of using external files as the source for a layer. This example creates a web page for Nikki's Diner, which is a vegan restaurant that offers tasty daily specials. The web page contains some general information about the diner, and then offers a menu of the days of the week. When a user selects a particular day, the specials for that day are displayed.

To run the example see:


To view the code for the example see:


To view the files containing the daily specials see:








The specials for each day are written in separate files. There is a file for monday's special, (mon.htm) another for tuesday's special (tues.htm) and so on. These files contain HTML formatted text that describes the specials for that day.

The benefit of this system is that changing the specials for a particular day of the week is a trivial process. For example, to update the specials offered on Monday, Nikki simply has to change the text in the mon.htm file. She doesn't have to make any changes to the main file for the web page document.

Content In the External Files

The following code shows the entire contents of the file mon.htm:

<H1 align=center > Monday</H1>
<H2 align=center >Entrees</H2>
<P>Tofu, Artichoke, and Asparagus Surprise</P>
<P>Walnut and Carrot Risotto</P >
<P>Parsnip Casserole </P >
<P>Chef's Special Spicy Salad</P >
<H2 align=center >Desserts</H2>
<P>Gooseberry Tart</P >
<P>Strawberry Delight</P >

The content of the files tues.htm, wed.htm, and so on are similar.

The File for the Nikki's Diner Main Page

The file for Nikki's Diner's home page starts with some general information about the diner. Paragraphs in the general introduction are not indented, and the paragraphs in the layers are indented. This page uses style sheets to achieve this indentation effect.

<TITLE>Welcome to Nikki's Diner</TITLE>
<STYLE TYPE="text/javascript">
    tags.P.marginLeft = 50;
<H1 align = "center">Welcome to Nikki's Diner!</H1>
<P  CLASS=plainPara>Nikki's Diner is the best place for vegan food in 
NetscapeVille. </P>
<P CLASS=plainPara>You can find us at the corner of Communicator Street and 
Navigator Way. We're open from 10 am to 6 pm every day. We don't take 
reservations, so just come on down. We guarantee that after you visit us once, 
you'll be back on a regular basis!</P>
<P CLASS=plainPara>We have an extensive regular menu of tasty meals in 
addition to our daily specials.</P>
<P CLASS=plainPara >You can use the following menu (no pun intended) to view 
the Specials for any day this week. Our specials change every week.</P>

Next comes a layer containing a form that lets user's pick a day of the week. This layer has no TOP value specified so it falls at the natural position in the document (which is OK for the first layer in the document.)

<LAYER NAME="formlayer" LEFT=50 WIDTH=300>
<P Please select a day of the week:</P>
  <FORM NAME=form1>
  <SELECT name=menu1 onChange="showSpecials(this.selectedIndex); return 
  <OPTION >Saturday
  <OPTION >Sunday
  <OPTION >Monday
  <OPTION >Tuesday
  <OPTION >Wednesday
  <OPTION >Thursday
  <OPTION >Friday

Now we create the layer where the daily specials will be shown. For now, the SRC attribute must have a value. The color of this layer is pale green.

We position this value to fall below the form layer which is the zeroth element in the layers array for the document.

<LAYER NAME="menu" LEFT=50
   WIDTH=400 BGCOLOR="BBFFBB" src="Specials/sat.htm">

The script is defined at the level of the document rather than inside a particular layer, since it uses both the form layer and the menu layer. The showSpecial() function assigns a source for the menu layer depending on which menu option was picked.

function showSpecials(n) {
   var specials = document.layers["menu"];
    if (n == 0) specials.src = "Specials/sat.htm";
    if (n == 1) specials.src = "Specials/sun.htm";
    if (n == 2) specials.src = "Specials/mon.htm";
    if (n == 3) specials.src = "Specials/tues.htm";
    if (n == 4) specials.src = "Specials/wed.htm";
    if (n == 5) specials.src = "Specials/thurs.htm";
    if (n == 6) specials.src = "Specials/fri.htm";

[Contents] [Prev page]

Copyright © 1997, Netscape Communications. All rights reserved.