reptile7's JavaScript blog
Wednesday, September 05, 2012
 
I Unfurl the Layers Quadrophonic
Blog Entry #263

In today's post we will take up the Expanding Colored Squares (ExColSq) Example of Netscape's Dynamic HTML in Netscape Communicator resource. The ExColSq Example offers a script that dynamically changes the clipping (visible) regions of four connected layers in response to mouseover events.

The ExColSq Example is reminiscent of the HTML Goodies JavaScript Script Tips #76-78 Script, which we covered in Blog Entries #94 and #95. The Script Tips #76-78 Script codes a yellow, name="click" layer whose visible region
(a) rolls downward, thereby exposing a table of initially invisible links, when mouseovered, and
(b) rolls up to its original state when mouseouted.
All of the Script Tips #76-78 Script rolling action occurs along the y-axis; moreover, at no point does the content of the click layer change.

In contrast, each colored square of the ExColSq Example expands and contracts in two dimensions at once, as though along a diagonal; in addition, the square's content is changed when the square leaves or returns to its fully contracted state. To give you a taste of what I'm talking about, mouseover the 1 square in the div below, and then mouseout the expanded square generated by your mouseover:

1
 
Netscape provided a single, layer element-based squares.htm version of the example, so that's what we'll be working with in the discussion that follows. Initial layout The colored squares of the example are laid out in a 2-by-2 grid. When all of the squares are fully expanded, the example display is: The colored squares, fully expanded Each square is held by a layer whose starting dimensions are 200px by 200px; however, in its fully expanded state the square measures 210px by 210px, a discrepancy that we'll sort out later. When the squares.htm page loads, the square layers are clipped so that only 50px-by-50px corners thereof are visible: The colored squares, fully contracted Here's the HTML for the upper left layer: <layer id="topleftblock" top="50" left="50" width="200" height="200" bgcolor="#ff5555" onload="initializeTopLeft(0);" onmouseover="changeNow(0);"> <layer top="160" left="168"><h1>1</h1></layer> </layer> The attributes of the layer element are detailed in the Attributes and Properties section of the DHiNC resource. • The topleftblock layer's top and left attributes position the layer (its upper left vertex) 50 pixels below the viewport's top edge and 50 pixels to the right of the viewport's left edge. • As noted above, the topleftblock layer's width and height are both initialized to 200 pixels. Reason #1 why the squares are not housed in divs: Netscape 4.x supports the width and height attributes for a number of elements, but the div element isn't one of them. Netscape 4.x can set a width="200" for a group of class="divClass" divs via a document.classes.divClass.div.width = "200px"; style statement, but classical JavaScript's style object doesn't even have a height property. • The topleftblock layer element has a layer element child - let's call it var nestedlayer0 = document.topleftblock.document.layers[0]; - that holds an h1 element containing a 1 numeral. The nestedlayer0 layer has a shrink-to-fit width and an effective height of 100%, measuring 16px by 40px; with respect to the top and left edges of its topleftblock layer parent, the nestedlayer0 layer is given top and left offsets that approximately center the 1 in the visible region of the topleftblock layer. Unlike the topleftblock layer, the nestedlayer0 layer could definitely be recast as a div; however, as the 1 is not a heading semantically, we will trade in the nestedlayer0 layer and h1 elements for a suitably styled span element in due course. Clip it The topleftblock layer could be clipped with a clip="150,150,200,200" attribute*; it is instead clipped by an initializeTopLeft( ) function, which is called when the layer has loaded. *According to Netscape the layer should also be clippable by a clip: rect(150,150,200,200); style declaration, but this doesn't work on my computer (maybe it's a Windows-only thing). var maxclipcontracted = 150; var maxclip = 200; ... function initializeTopLeft(n) {     var thislayer = document.layers[n]; ...     thislayer.clip.left = maxclipcontracted;     thislayer.clip.top = maxclipcontracted;     thislayer.clip.right = maxclip;     thislayer.clip.bottom = maxclip; ... } The layer object's various clip.* properties are summarized here in the DHiNC resource. The topleftblock layer's document.layers[i] index, 0, is passed to the initializeTopLeft( ) function and given an n identifier; n is then used to get the topleftblock layer, which is given a thislayer identifier. These operations are unnecessary as we could access the topleftblock layer in the initializeTopLeft( ) function via a document.topleftblock expression. A set of four statements clips thislayer to size: (1) The thislayer.clip.left = maxclipcontracted; statement sets the left edge of thislayer's visible region 150 (maxclipcontracted) pixels to the right of thislayer's left edge. (2) The thislayer.clip.top = maxclipcontracted; statement sets the top edge of thislayer's visible region 150 pixels below thislayer's top edge. (3) The thislayer.clip.right = maxclip; statement sets the right edge of thislayer's visible region 200 (maxclip) pixels to the right of thislayer's left edge. (4) The thislayer.clip.bottom = maxclip; statement sets the bottom edge of thislayer's visible region 200 pixels below thislayer's top edge. Netscape illustrates the clipping process with a "Clip values" figure: The Expanded Colored Squares Example's 'Figure 12.4 Clip values' There are some mistakes in the figure: • If we were to demarcate the visible region of the topleftblock layer with a clip attribute or style declaration, then we would specify the boundary coordinates in the following order: (clip.left, clip.top, clip.right, clip.bottom), i.e., we would begin with clip.left and proceed clockwise. (N.B. This is not the W3C's clip coordinate order, which begins with the clip.top value and proceeds clockwise.) • The layer's lower left vertex would correspond to a (0,200,0,200) clip value; a clip="0,0,200,200" setting would 'clip' the layer at its original boundaries and thus have no effect on it. • The layer's upper right vertex would correspond to a (200,0,200,0) clip value; a clip="0,200,0,0" setting is nonsensical as its clip.bottom value is less than its clip.top value. Other initialization The initializeTopLeft( ) function also equips the topleftblock layer with eight custom properties that will come into play when the expansion/contraction action gets under way. (1-4) var delta = 10; function initializeTopLeft(n) { ...     thislayer.dleft = -delta;     thislayer.dtop = -delta;     thislayer.dbottom = 0;     thislayer.dright = 0; ... When the visible region of the topleftblock layer expands, the layer's clip.left and clip.top values decrease; when it contracts, clip.left and clip.top increase; for both expansion and contraction, clip.right and clip.bottom do not change. In conjunction with a global delta variable, dleft, dtop, dright, and dbottom properties quantify the steps of the expansion and contraction movement. (5) thislayer.status = "waitingToExpand"; Expansion and contraction of the topleftblock layer's visible region are respectively effected by expand( ) and contract( ) functions. A status property connects both expand( ) and contract( ) to an onmouseover="changeNow(0);" event handler and is also used to prevent the stacking of expand( ) and contract( ) calls. The status property is initialized to a waitingToExpand string. (6) thislayer.mysource = "point1.htm"; Immediately prior to the initiation of expansion an external point1.htm file holding the expanded square content is loaded into the topleftblock layer; a mysource property associates the topleftblock layer with the point1.htm file. There's not much to point1.htm: <h3>Netscape Navigator</h3> <p>Netscape Navigator 4.0 is the newest version of Netscape's world-leading software for browsing information on intranets or the Internet.</p>   point1.htm's h3 and p elements are styled by the squares.htm document with the following rules: h3 { text-align: center; margin-top: 4%; } p { margin-left: 10%; margin-right: 10%; } (7) thislayer.mytext = "<layer top='160' left='168'><h1>1</h1></layer>"; At the end of contraction the point1.htm text is overwritten with the layer's original content; a mytext property is set to this content in stringified form. (8) thislayer.myposition = "topLeft"; Lastly and least, the layer is given a myposition property whose value, topLeft, will later serve as an identifier: this assignment is unnecessary as the layer already has an id.
Each of the other three layers has a similar definition, and a corresponding initialization function.
The 2 square is held by a toprightblock layer whose left and top offsets cause its left edge to coincide with the right edge of the topleftblock layer; loading the toprightblock layer calls an initializeTopRight( ) function that clips the layer accordingly and equips it with the aforespecified custom properties set to toprightblock-appropriate values. And so on for the 3 and 4 squares. We'll work through the expansion and contraction of the topleftblock layer's visible region in the following post.

Comments: Post a Comment

<< Home

Powered by Blogger

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