Thursday, June 28, 2012
All the Flowers are Right Here
Blog Entry #256
As promised, today's post kicks off a trek through the examples in Part 2 ("Positioning HTML Content") of Netscape's Dynamic HTML in Netscape Communicator (DHiNC) resource. This is something I've wanted to do for a while, and I'm finally getting around to it - some people work on antique cars, why can't I work on antique scripts? So here we go.
According to the Internet Archive, Netscape stopped hosting the DHiNC resource in 2004; current mirrors for the resource can be found at various locations, e.g., here. The DHiNC examples are well and truly obsolete as they are applications of the layer element and object, which are ONLY supported by the Netscape 4.x group of browsers. Our task is to bring these examples into the modern era by revamping them so that they work with modern browsers, including IE, Netscape's 'bête noire' at the time the DHiNC resource was written. (It is still possible to download Netscape 4.x and run the original examples therewith, but I really don't recommend that you do this.)
The DHiNC examples begin with the Fancy Flowers Farm (FFF) Example, which constitutes Chapter 10 of the resource. The FFF example is a variation on the slide show concept: one of four 'fancy flower slides' is displayed at a specific position on the page; the user chooses which slide to display via a selection list as opposed to running through the slides in sequence via a push button or link.
Netscape offered two demo pages for the FFF example:
(1) a flower.htm
<layer>-based demo page and(2) a flowercs.htm CSS/div-based demo page.
There's actually not that much difference between these pages; however, the flower.htm code features both the layer element and the layer object whereas the flowercs.htm code only features the layer object, and we will confine ourselves to the flowercs.htm code for the discussion that follows. In this entry we'll go through the flowercs.htm HTML and CSS; we'll clean up the flowercs.htm JavaScript and roll out a cross-browser demo in the next entry.
I would provide links to the flower.htm/flowercs.htm pages but, again, these demos are not going to work for you if you're not using Netscape 4.x. That said, current DHiNC mirrors provide much cleaner code samples than does the Internet Archive, so you should go to the former if for whatever reason you would like to access the original FFF example code.
Structure/presentation
The FFF grows and sells four types of flowers:
(1) Mona Lisa Tulips
(2) Mixed Dutch Tulips
(3) Bijou Violets
(4) Pink Chrysanthemums
These flowers are detailed and illustrated in a series of divs. Here's the first-in-source-order flower div:
<div id="flower0">
<hr>
<h3 align="center">Mona Lisa Tulip</h3>
<img src="images/redtul.jpg" align="left" hspace="5">
<p>These tulips have been specially designed to withstand late winter frost in areas with harsh winters. They are a beautiful red color, and we guarantee that they'll grow for at least four years in a row. Don't wait to order them, they sell fast!</p>
<br clear="all">
<p>Priced at only $1 a bulb, they are a bargain.</p>
<hr>
</div>The following CSS is applied to the flower0 div:
#flower0 { position: absolute; left: 50; width: 400; background-color: ffffdd; border-color: white; border-width: 1; }• The div begins and ends with a horizontal rule. Just below the top rule is a centered h3 heading. The align attribute of the h# elements is deprecated: the
align="center" attribute should be replaced by an h3 { text-align: center; } style rule.• Below the h3 heading is an img photo of two Mona Lisa tulips. The img is floated to the left of the div via an
align="left" attribute. The align attribute of the img element is deprecated: we should left-float the img with an img { float: left; } style rule instead.• An
hspace="5" attribute inserts 5 pixels of horizontal white space between the left edge of the img and the left edge of the div and between the right edge of the img and the left edge of an adjacent paragraph. The hspace attribute of the img element is deprecated: the hspace="5" attribute should be replaced by a margin-left: 5px; margin-right: 5px; style declaration set.• The img is followed by a descriptive paragraph that runs down the right side of the img; the img and the paragraph are in the same line box because the img is floated. Below the img is a second paragraph that specifies price information. The descriptive and pricing paragraphs are separated by a br element holding a
clear="all" attribute, which vertically 'clears' the pricing paragraph from the floated img; the br element also inserts 16 pixels of vertical white space between the bottom edge of the img and the top edge of the pricing paragraph. The clear attribute of the br element is deprecated: the clear="all" attribute can be replaced by a br { clear: left; } style rule; alternatively and preferably, we can (a) throw out the br element, (b) clear the pricing paragraph by giving it a clear: left; style, and (c) bottom-buffer the img with a margin-bottom: 16px; style.• The div is given a width of 400: a CSS length lacking a unit identifier is at present illegal and doesn't seem to have been any more acceptable back in the day. In practice, the 400 is interpreted as 400px by the browsers on my computer.
• The div's background-color is set to ffffdd, and I'm pretty sure that an RGB color value lacking a preceding # is also illegal. (YEP, it's illegal: I just tested
body { background-color: ffffdd; } with the W3C's CSS Validation Service and a "Value Error" was thrown.) However, the browsers on my computer all impart a #ffffdd background to the div.• Leaving aside the question of why you would want to give the div a white border in the first place, the div's
border-color: white; border-width: 1; style declarations render a 1px solid white border with Netscape 4.x but not with other CSS-supporting browsers, for which the border-style property, whose initial value is none, must be set to see a border.Here's what it all looks like:
The div is absolutely positioned and given a left offset of 50 (pixels). No top offset is specified for the div; per Section 10.6.4 of the CSS 2.1 Specification, the div's top in this case is set to the "static [normal flow] position" because the div has also not been given a height nor a bottom offset. Consequently, the div top-wise appears just below the form-containing div that precedes it in the source, as it normally would.
The other flower divs are set up just like the Mona Lisa Tulip div except that
(1) they have different background-colors and
(2) they are 'hidden' by a
visibility:hide; style.Netscape and Microsoft implemented visibility as a CSS property at about the same time, more specifically in Netscape 4 and IE 4, respectively. Netscape applied visibility to positioned elements and gave it values of show and hide|hidden for respectively showing and hiding an element; this visibility definition is only supported by Netscape 4.x. Accordingly, at the flowercs.htm page you see the last-in-source-order Pink Chrysanthemum div (and a bit of the Bijou Violet div) with a modern browser, which ignores the
visibility:hide; declarations. I'll give you a full set of Netscape visibility references in the JavaScript part of the deconstruction.For its part, Microsoft applied visibility to all elements and gave it values of visible and hidden for respectively showing and hiding an element; this visibility definition was subsequently standardized by the W3C in CSS 2.1 and has been supported by Netscape/Mozilla browsers from Netscape 6 onward.
Prior to the flower0 div is a formlayer div that holds a form1 form that holds the aforementioned selection list via which the user changes the flower slide.
#formlayer { position: relative; left: 50; }
...
<div id="formlayer">
<h3>Please select a flower:</h3>
<form name="form1">
<select name="menu1" onchange="changeFlower(this.selectedIndex); return false;">
<option>Mona Lisa Tulip</option>
<option>Mixed Dutch Tulips</option>
<option>Bijou Violet</option>
<option>Pink Chrysanthemum</option>
</select></form></div>The formlayer div is relatively positioned and given a left offset of 50 pixels. The left edge of the formlayer div is not quite horizontally aligned with the left edges of the flower divs because an initial 8px of margin-left given to the formlayer div by the browser is left intact by the
position: relative; style; to the extent that this bothers you, the formlayer div and the flower divs can be left-aligned by reducing the formlayer div's left offset to 42px.FYI: Switching the flower div position to relative will send the Mixed Dutch Tulips div, the Bijou Violet div, and the Pink Chrysanthemum div to their normal flow positions, i.e., they will no longer be at the slide position. Conversely, changing the formlayer div position to absolute will remove the formlayer div from the normal flow and cause the Mona Lisa Tulip div to obscure the formlayer div.
At the top of the page, the formlayer div is preceded by a centered h1 heading, which is vertically flanked by horizontal rules, and an introductory paragraph.
<body color="white">
<hr>
<h1 align="center">Welcome to the 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>• The body element has never had a color attribute - the author meant bgcolor here. The bgcolor attribute is deprecated for all of the elements that could formerly take it; to give the page a white background color, a
body { background-color: white; } style rule is what we want. FWIW: The color="white" attribute, which is ignored by the browser, does allow the aforediscussed border-color: white; border-width: 1; div border to be seen with Netscape 4.x, whose default body background color is #c0c0c0.We're ready to move on to the FFF example's JavaScript. Changing the menu1 selection list's selectedIndex triggers a changeFlower( ) function, which we'll dissect in detail in the following post.
- posted by A. Peak @ 3:58 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)