reptile7's JavaScript blog
Friday, July 06, 2012
 
I Got My Flower, I Got My Power
Blog Entry #257

We continue today our analysis of the Fancy Flowers Farm Example of Netscape's Dynamic HTML in Netscape Communicator resource. Having dispatched the example's HTML and CSS in the previous post, we now turn our attention to the example's JavaScript, which is the easy part IMO...

Behavior

When the flowercs.htm page loads, the not-hidden, first-in-source-order Mona Lisa Tulip div is displayed at the slide position (or would be displayed, if the slide visibility settings were sorted out). The preceding menu1 selection list doesn't have a size > 1 attribute and none of its options is preselected; consequently, the browser renders the selection list as a drop-down menu showing only the first-in-source-order Mona Lisa Tulip option per section 8.1.3 of the "Hypertext Markup Language - 2.0" RFC 1866 specification.

Suppose a visitor to the Fancy Flowers Farm is interested in bijou violets and accordingly selects the Bijou Violet option of the menu1 list.

<select name="menu1" onchange="changeFlower(this.selectedIndex); return false;">
<option>Mona Lisa Tulip</option>
<option>Mixed Dutch Tulips</option>
<option>Bijou Violet</option> ...

Changing the list's selection state calls a changeFlower( ) function and passes thereto this.selectedIndex, which is 2 for the Bijou Violet option. (I have absolutely no idea what the return false; is doing in the onchange event handler - it's not stopping anything - throw it out.) The changeFlower( ) function first hides all of the flower divs via an external hideAllflowerLayers( ) function and then visibilizes the user's chosen flower div.

function changeFlower(n) {
    hideAllflowerLayers( );
    document.layers["flower" + n].visibility = "show"; }

Here's the hideAllflowerLayers( ) function:

function hideAllflowerLayers( ) {
    document.flower0.visibility = "hide";
    document.flower1.visibility = "hide";
    document.flower2.visibility = "hide";
    document.flower3.visibility = "hide"; }

• The flower div ids are flower0, flower1, flower2, and flower3, respectively. The flower divs are all absolutely positioned, which effectively makes them layers and allows them to be accessed via document.layerID expressions.

• The visibility property of the layer object is documented here in the DHiNC resource and here in the JavaScript 1.3 Client-Side Reference; both of these references specify that the visibility value for hiding a layer is hide. In an HTML context, the layer element can take a visibility attribute, which is documented here in the DHiNC resource and here in Netscape's HTML Guide for Netscape Navigator 4.x; these references respectively specify visibility values of hide and hidden for hiding a layer. In practice when using Netscape Communicator 4.61 on my computer, I find that the flower layers can be hidden with a hide or hidden visibility value.

• Once the flower layers are hidden, the user's chosen Bijou Violet layer (document.layers[2]) is displayed by the document.layers["flower" + n].visibility = "show"; statement. All of the above visibility references specify that the visibility value for displaying a layer is show.

To get the changeFlower( )/hideAllflowerLayers( ) functionality to work with modern browsers, we need to do two things:
(1) replace the document.layerObject expressions with corresponding DOM-based expressions; and
(2) respectively show and hide the flower divs with visible and hidden visibility values per the W3C's visibility definition.
My first go at modernizing the functionality gave:

function changeFlower(n) {
    for (i = 0; i < 4; i++) document.getElementById("flower" + i).style.visibility = "hidden";
    document.getElementById("flower" + n).style.visibility = "visible"; }

As the hideAllflowerLayers( ) function body can be written as one line of code, I saw no point in externalizing it. Design-wise, however, the hideAllflowerLayers( ) action itself struck me as inefficient because the Mixed Dutch Tulips div, the Bijou Violet div, and the Pink Chrysanthemum div are already hidden at the time we change the Mona Lisa Tulip div. I really wanted a changeFlower( ) function that hides only the currently displayed div, and here's what I came up with:

var oldflowerindex = 0;
function changeFlower(n) {
    document.getElementById("flower" + oldflowerindex).style.visibility = "hidden";
    document.getElementById("flower" + n).style.visibility = "visible";
    oldflowerindex = n; }

As before, the n variable signifies the to-be-displayed slide; in each run of the function, n's value is stored in an oldflowerindex variable so that the oldflowerindex slide can be hidden in the following run.

I finally thought of exchanging the visibility assignments for corresponding none|block display assignments, but it occurred to me that there's no advantage in doing so if there isn't any content below the flower divs.

Demo

There would be little point in working through the DHiNC examples if I were not going to give you cross-browser demos for them, so here is my FFF example demo based on the code in this and the previous posts:

Welcome to the Fancy Flowers Farm

We sell bulbs, seeds, seedlings, and potted plants, in all shapes, sizes, colors, and varieties. This page presents information about our most popular varieties.

Please select a flower:

Mona Lisa Tulips

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!Priced at only $1 a bulb, they are a bargain.
Next up in the DHiNC resource: the Swimming Fish Example.
- posted by A. Peak @ 12:32 PM
Comments: Post a Comment

<< Home

Powered by Blogger

Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)