Saturday, August 11, 2012
Cashew and Apple Risotto
Blog Entry #261
In today's post we will check over the Nikki's Diner Example of Netscape's Dynamic HTML in Netscape Communicator resource. The Nikki's Diner Example does pretty much what the Fancy Flowers Farm Example (see Blog Entries #256/#257) does, namely, it displays one of several blocks of content at a specific position on the page in response to choosing a selection list option. The Nikki's Diner Example complements the Fancy Flowers Farm Example in the following respects:
(1) The Nikki's Diner Example loads its blocks of content into a common layer placeholder and therefore more resembles a traditional slide show than does the Fancy Flowers Farm Example, which places each block of content in a separate layer.
(2) The Nikki's Diner Example initially places its blocks of content in individual HTML files that are external to the main document, whereas the Fancy Flowers Farm Example's content blocks are all located in the main document.
(3) The Nikki's Diner Example imports its blocks of content via the layer object's src property, for which the example serves as a showcase, whereas each Fancy Flowers Farm Example content layer is displayed by turning on its visibility setting.
The Nikki's Diner Example methodology could be applied to the Fancy Flowers Farm Example, and vice versa.
Netscape offered two versions of the Nikki's Diner Example: (1) a diner.htm version that uses an ilayer element to position the UI and a layer element to host the aforementioned blocks of content and (2) a dinercss.htm version that uses div elements for these purposes. The JavaScript parts of the diner.htm and dinercss.htm documents differ by a single layer identifier but are otherwise identical.
The main page and its layout
The Nikki's Diner Example codes a Web page for Nikki's Diner,
the best place for vegan food in Netscapeville.The top part of the page textually comprises a "Welcome to Nikki's Diner!" h1 heading and a series of paragraphs that gives information about the diner. After that we have the business end of the page, specifically a menu1 selection list for choosing a day of the week and a space for displaying the diner's entree and dessert specials for the chosen day.
The day-of-the-week selection list
<form name="form1">
<select name="menu1" onchange="showSpecials(this.selectedIndex); return false;">
<option>Saturday</option>
<option>Sunday</option>
<option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
</select></form>is wrapped in a form, which is needed for Netscape 4.x but is unnecessary for modern browsers. (No use is made of the form's name, BTW.) The form is preceded by a
p.plainPara { margin-left: 0px; }
...
<p class="plainPara">Please select a day of the week:</p>paragraph that could be marked up as a label, if desired.
The space for displaying the diner's entree/dessert specials is framed by either a layer element
<layer name="menu" left="50" width="400" bgcolor="#bbffbb" src="specials/sat.htm"></layer>or a div element
#menulayer { position: absolute; left: 20pt; width: 400px; include-source: url("specials/sat.htm"); }
...
<div id="menulayer"></div>as noted in the post's introduction.
(As the menu layer has no children, its bgcolor attribute serves no purpose and can be removed - if the sat.htm file were not available, you wouldn't see any #bbffbb color on the page.)
When the main page loads, the menu layer or menulayer div is charged with the Saturday specials
so as to coordinate it with the menu1 selection list, whose first-in-source-order, 'preselected' option is the Saturday option. The Saturday data is set in the layer case via a
src="specials/sat.htm" element attribute and in the div case via an include-source: url("specials/sat.htm"); style declaration - see the SRC and source-include (sic) subsection of the DHiNC resource. N.B. The correct formulation is include-source, not source-include.In the diner.htm document the form1 form and its preceding paragraph are wrapped in an
<ilayer left="50"></ilayer>- the ilayer element is briefly discussed here in the DHiNC resource - in order to indent them by 50 pixels; the menu layer is also
left="50"-indented. In the dinercss.htm document the form1 form and its preceding paragraph are wrapped in a#formlayer { position: relative; left: 20pt; }
...
<div id="formlayer"></div>in order to indent them by 20 points (ca. 7 millimeters), and the menulayer div is also
left:20pt;-indented. (Why not a 50px offset? Your guess is as good as mine.) The ilayer is part of the diner.htm document's normal flow but the menu layer is not, and consequently these elements are not quite left-aligned because the ilayer indentation also includes 8px of default margin-left given to it by the browser; ditto for the formlayer and menulayer divs.By itself, an ilayer establishes an inline formatting context, but if its first child and last child are block-level elements*, as is the case in the diner.htm document, then it establishes a block formatting context; as a result, the menu layer appears below the ilayer in the absence of a top setting. On the dinercss.htm page, the menulayer div appears below the formlayer div per the normal block-level rendering of the div element.
*Most standard %inline; HTML elements cannot contain block-level elements but there are four that can: button, iframe, map, and most importantly object, whose
generic embedded objectdescription roughly applies to an ilayer.
The specials/ files
In the directory holding the diner.htm|dinercss.htm file is a specials/ subdirectory containing seven files: sat.htm, sun.htm, mon.htm, tues.htm, wed.htm, thurs.htm, and fri.htm. Each specials/ file is a complete HTML document whose body lists four entree specials and two dessert specials for a given day of the week; for example, here's the sat.htm document body, which spells out the Saturday specials:
<body bgcolor="#bbee99">
<hr><h1 align="center">Saturday</h1><hr>
<h2 align="center">Entrees</h2>
<p>Curried Tofu with Bean Sprouts and Raisins</p>
<p>Peanut and Coriander Risotto</p>
<p>Casserole of Potato, Lemon Tyme, and Sundried Tomatoes</p>
<p>Chef's Special Nutloaf</p>
<h2 align="center">Desserts</h2>
<p>Orange and Mint Sorbet</p>
<p>Banana Fool</p>
</body>(The bgcolor attribute of the body element and the align attribute of the h# elements are deprecated, but you knew that, right? I trust you can write out their CSS replacements.)
The specials/ files are loaded into the menu layer or menulayer div by a showSpecials( ) function, which is called by changing the selection state of the menu1 selection list.
The showSpecials( ) function
The dinercss.htm showSpecials( ) function is given below; in the diner.htm document the
var specials = document.menulayer; statement is cast as var specials = document.menu; but apart from that there is no difference between the functions.function showSpecials(n) {
var specials = document.menulayer;
switch (n) {
case 0: specials.src = "specials/sat.html"; break;
case 1: specials.src = "specials/sun.html"; break;
case 2: specials.src = "specials/mon.html"; break;
case 3: specials.src = "specials/tues.html"; break;
case 4: specials.src = "specials/wed.html"; break;
case 5: specials.src = "specials/thurs.html"; break;
default: specials.src = "specials/fri.html"; } }The menu1 selection list initially shows the Saturday option; choosing another option calls the showSpecials( ) function and passes thereto this.selectedIndex, which is given an n identifier.
The first showSpecials( ) statement gets the menulayer|menu layer and gives it a specials identifier. Subsequently a switch statement assigns one of the specials/ files to the src of the specials layer. For example, if we choose the Tuesday option, for which n is 3, then the
case 3: specials.src = "specials/tues.html"; break; clause is operative and tues.htm is loaded into the specials layer. The break statement at the end of the clause prevents fallthrough to the subsequent clause and terminates the execution of the switch statement.The Friday option should be handled by a
case 6 clause, and not a default clause, which is meant for 'no match was found' situations.We'll finish our Nikki's Diner Example discussion in the following entry, specifically I'll tell you how the original example works with Netscape 4.x and then give you my own example code/demo.
- posted by A. Peak @ 3:04 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)