Building the HTML
January 19, 1999
The HTML for each menu is output using more JavaScript.
<body id = "hotbod"
bgColor = "#FFFFFF"
onLoad = "initSetup();">
<div id = "backdrop"
style = "position:absolute;
top :0px;
left :0px;
width :250px;
height :250px;
z-index :1;
background-color:#FF0000;
visibility:hidden;"></div>
<!-- Annuities Menu -->
<div id = "annuities"
onMouseOut = "testOut(this.id);"
onmouseover = "clearTimeout(clearPop2);
clearTimeout(opener.clearPop);"
style = "position:absolute;
left :0px;
top :0px;
width :250px;
height :250px;
z-index :2;
background-color : #000000;
layer-background-color : #000000;
border : 1px none #000000;
visibility : hidden;">
<script language = "JavaScript1.2">
function onMouseOut() {clearPop2 = setTimeout("opener.focus()",1000);
return false;}
function onMouseOver() {clearTimeout(clearPop2);
return false;}
</script>
<script language="JavaScript1.2">
document.writeln(headlineDiv+"Annuities"+closeItemDiv);
</script>
<script language = "JavaScript1.2">
for (j=0;j<annuities_links.length;j++)
{ document.write(startItemDiv);
document.write("<a onClick=\"opener.location=this.href;self.close();
return false;\"");
document.write
(" HREF=\""+annuities_links[j+1]+"\">"+annuities_links[j]+"</a>");
document.write(closeItemDiv);
j++;
}
</script>
</div>
<!--End Annuities Menu-->
<!--Begin Next Menu, etc.
repeat chorus
-->
</div>
</body>
</html>
|
Although this final block of code explicitly creates
each menu needed only the first ("Annuities")
is shown above to avoid repetitive confusion. Clicking
the caption link will reveal the entire original source
for each menu. First, the <body> tag sets up the
page and sets initSetup() to launch when the page
has completed loading.
An outermost
layer,
created using a <DIV> tag, becomes
the parent for all layers which fall within. The
purpose of this layer, named "backdrop", is
solely to aid in the testOut() function when Internet
Explorer is attempting to determine whether the mouse pointer
has moved off the menu window.
Next, the "annuities" menu is created. Keep in
mind that each menu is created the exact same way which
is why we've only displayed one example. Everything said
about the "annuities" menu applies to any menu
created in this script.
The parent layer for the menu, in this case "annuities",
is created using a <DIV> tag. Note
that the onMouseOver and onMouseOut event handlers included
as attributes of this tag only function within Internet
Explorer 4 -- Navigator 4 does not support these event
handlers for the <DIV> tag. However, since the <DIV>
does create a layer, Navigator can recognize these
mouse events for the layer. Because this layer was not
created using Netscape's proprietary <LAYER> tag,
the onMouseOver and onMouseOut events for this layer
within Netscape
are defined by the four lines of code which follow the
<DIV> tag:
<script language="JavaScript1.2">
function onMouseOut()
{clearPop2=setTimeout("opener.focus()",1000);return false;}
function onMouseOver()
{clearTimeout(clearPop2);return false;}
</script>
The above scriptlet only assigns these event handlers
within Netscape 4, so between this and the attribute-based
event handlers, both browsers are setup to detect when
the mouse moves over or off the menu window. When the mouse
does move over the menu window the existing timeout is
cleared, enforcing the ol'
rule #2.
Turning our attention back to the <DIV> tag, it
contains an in-line style attribute which sets the size
and color of this parent menu layer. When a layer is
created in Navigator using the <DIV> tag, its background
color only applies to any content in the layer, not the entire
space of the layer itself. The Netscape-specific
style attribute layer-background-color is used to
overcome this and fill the entire layer space with the
specified background color.
Next, the headline layer is created. This layer is created
using either a <DIV> tag (Internet Explorer)
or a <LAYER> tag (Navigator):
<script language="JavaScript1.2">
document.writeln(headlineDiv+"Annuities"+closeItemDiv);
</script>
This is done using the headlinediv variable which
was created by the crossBrowser() function;
this variable contains the appropriate tag code to
create a suitable layer in either browser. Experimentation proved
that when this layer was created in Navigator using
the <LAYER> tag the visual results were superior, hence
the use of different tags in each browser.
Each of the item layers must now be output. Remember that
the menu items are not properly aligned at this point,
merely output all ajumble -- the setup() function
will later sort out these layers into a near vertical
pile.
<script language="JavaScript1.2">
for (j=0;j<annuities_links.length;j++)
{ document.write(startItemDiv);
document.write("<a onClick=\"opener.location=this.href;self.close();
return false;\"");
document.write
(" HREF=\""+annuities_links[j+1]+"\">"+annuities_links[j]+"</a>");
document.write(closeItemDiv);
j++;
}
</script>
Each menu item is a hyperlink whose data is contained in
the array created in menus.js. Thus a loop is
begun to cycle through the number of items in the array.
For each pair of data entries in the array (because the
link text and the link URL are specified in data pairs) a
layer is created, again using browser-appropriate <DIV>
or <LAYER> tags courtesy of the startItemDiv
variable, created by crossBrowser(). The HTML
for the hyperlink itself, an <A> tag, is constructed
in the following to document.write() calls. Finally,
the layer for this item is closed using closeItemDiv,
also created by crossBrowser(). The final "j++"
statement forces the loop to count by two's.
Lastly, after each menu has been created, the outermost layer
("backdrop") is closed followed
by the traditional closing of the <BODY> and
<HTML> tags. Et voila!
Remember that this entire file, popups.html, is
loaded into the menu window. Still, the menu window needs
to be created and its pop-up behavior must be controlled
by yet another set of code, which can be thought of as
the "mission control". That last bit of code
resides embedded in the client's original page.
Coloring the stylesheets
DHTML Pop-Up Menus: A Parable of Triumph and Loss (Based on a True Story)
Building the Imperfect Beast: Part 3 (embedded mission control)
|
