This example illustrates the use of 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 pop-up menu that lists the days of the week. When a user selects a particular day, the specials for that day are displayed.
To run the <LAYER> version of the example see:
diner.htm
To run the style sheet version of the example see:dinercss.htm
To view the complete code for either version of the example, use the The functions used in both versions are identical. To view the files containing the daily specials see:Page Source command of the View menu in the Navigator browser that is displaying the example. specials/mon.htm
The specials for each day are written in separate files. There is a file for Monday's special, ( 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) another for Tuesday's special (tues.htm) and so on. These files contain HTML formatted text that describes the specials for that day.mon.htm file. She doesn't have to make any changes to the main file for the web page document.
The following code shows the entire contents of the file mon.htm:
<HR>
<H1 align=center > Monday</H1>
<HR>
<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 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.
<HTML>
<HEAD>
<TITLE>Welcome to Nikki's Diner</TITLE>
<STYLE TYPE="text/css">
<!--
P {margin-left:50;}
P.plainPara {margin-left:0};
-->
</STYLE></HEAD>
<BODY BGCOLOR="white">
<HR>
<H1 align = "center">Welcome to Nikki's Diner!</H1>
<HR>
<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 an inflow layer containing a form that lets users pick a day of the week. This layer is indented 50 pixels to the left. Because it is an inflow layer, the natural position in the page will be at the end of the layer, when the layer has finished being drawn.
<LAYER ID="formlayer" LEFT=50>
<P Please select a day of the week:</P>
<FORM NAME=form1>
<SELECT name=menu1 onChange="showSpecials(this.selectedIndex); return false;">
<OPTION >Saturday
<OPTION >Sunday
<OPTION >Monday
<OPTION >Tuesday
<OPTION >Wednesday
<OPTION >Thursday
<OPTION >Friday
</SELECT>
</FORM>
</LAYER>
The next task is to create the layer where the daily specials will be shown.
The menu layer needs to have an absolute position, since changing the source on the fly works only for layers with absolute positions.
Since this is the first layer with an absolute position in the document, its position defaults to the current cursor position in the page, which happens to be beneath the inflow form layer.
You want the top value to default to the natural top position, so do not supply a value for TOP, but you want the left value to be 50 pixels in from the left edge. By default, Saturday's menu appears.
<LAYER ID="menu" LEFT=50 WIDTH=400 src="specials/sat.htm">
</LAYER>
The script is defined at the level of the document rather than inside a particular layer, since it involves both the form and the menu layer. The showSpecial() function assigns a source for the menu layer depending on which menu option was picked.
<SCRIPT>
function showSpecials(n) {
var specials = document.menu;
switch (n) {
case 0: specials.src = "specials/sat.htm"; break;
case 1: specials.src = "specials/sun.htm"; break;
case 2: specials.src = "specials/mon.htm"; break;
case 3: specials.src = "specials/tues.htm"; break;
case 4: specials.src = "specials/wed.htm"; break;
case 5: specials.src = "specials/thurs.htm"; break;
default: specials.src = "specials/fri.htm";
}
}
</SCRIPT>
</BODY>
</HTML>
Last Updated: 08/07/97 15:21:59