Platinum Edition Using HTML 4, XML, and Java 1.2:Advanced Netscape Dynamic HTML

To access the contents, click the chapter and section titles.

Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Table of Contents

Dynamic HTML Pop-Up Menus

Pop-up menus are used in many applications to give users a context-sensitive listing of program options. These menus are usually accessed by right-clicking the mouse or by some special keystroke. By using Dynamic HTML techniques, you can make a pop-up menu appear on a Web page as well. This can prove helpful in a situation where you need to conserve space on a page. Instead of having all the options presented all the time, you can have a menu with the options pop up when the user requests it.

Look at the example shown in Figure 25.10. The “menu bar” shown in the Web page is set up for this example to look like a typical menu bar (this one looks a lot like the one you will find in Notepad, actually). You could use a menu like this, for instance, to contain your site’s navigation options. A listing of this example is shown in Listing 25.7.

FIGURE 25.10 Netscape Dynamic HTML layers can be used to show context-sensitive information on your Web pages.

Listing 25.7 DynPopup.htm

<HTML>
<HEAD>
<TITLE>Dynamic HTML Pop-up Menus</TITLE>
<STYLE TYPE=“text/javascript”>
with (classes.Border.all) {
   borderStyle=“SOLID”;
   borderWidths(“1pt”);
   width=“100pt”;
}
</STYLE>
</HEAD>
<H1>Dynamic HTML Pop-up Menus</H1>
<HR>
<ADDRESS>
Jim O’Donnell, <A HREF=“mailto:odonnj@rpi.edu”>odonnj@rpi.edu</A>
</ADDRESS>
<HR>
<LAYER TOP=125 LEFT=10 NAME=fileT CLASS=Border VISIBILITY=SHOW
       onMouseOver=“swapLayers(fileMLayer,fileTLayer)”>
   <B><U>F</U>ile</B>
</LAYER>
<LAYER TOP=125 LEFT=10 NAME=fileM CLASS=Border VISIBILITY=HIDE
       onMouseOut=“swapLayers(fileTLayer,fileMLayer)”>
   <B><U>F</U>ile</B><BR>
   <HR>
   <U>N</U>ew<BR>
   <U>O</U>pen<BR>
   <U>S</U>ave<BR>
   S<U>a</U>ve as...<BR>
   <HR>
   Page Se<U>t</U>up...<BR>
   <U>P</U>rint<BR>
   <HR>
   E<U>x</U>it
</LAYER>
<LAYER TOP=125 LEFT=142 NAME=editT CLASS=Border VISIBILITY=SHOW
       onMouseOver=“swapLayers(editMLayer,editTLayer)”>
   <B><U>E</U>dit</B>
</LAYER>
<LAYER TOP=125 LEFT=142 NAME=editM CLASS=Border VISIBILITY=HIDE
       onMouseOut=“swapLayers(editTLayer,editMLayer)”>
   <B><U>E</U>dit</B><BR>
   <HR>
   <U>U</U>ndo<BR>
   <HR>
   Cu<U>t</U><BR>
   <U>C</U>opy<BR>
   <U>P</U>aste<BR>
   De<U>l</U>ete<BR>
   <HR>
   Select <U>A</U>ll<BR>
   Time/<U>D</U>ate<BR>
   <HR>
   <U>W</U>ord Wrap<BR>
</LAYER>
<LAYER TOP=125 LEFT=274 NAME=findT CLASS=Border VISIBILITY=SHOW
       onMouseOver=“swapLayers(findMLayer,findTLayer)”>
   <B><U>S</U>earch</B>
</LAYER>
<LAYER TOP=125 LEFT=274 NAME=findM CLASS=Border VISIBILITY=HIDE
       onMouseOut=“swapLayers(findTLayer,findMLayer)”>
   <B><U>S</U>earch</B><BR>
   <HR>
   <U>F</U>ind<BR>
   Find <U>N</U>ext<BR>
</LAYER>
<LAYER TOP=125 LEFT=406 NAME=helpT CLASS=Border VISIBILITY=SHOW
       onMouseOver=“swapLayers(helpMLayer,helpTLayer)”>
   <B><U>H</U>elp</B>
</LAYER>
<LAYER TOP=125 LEFT=406 NAME=helpM CLASS=Border VISIBILITY=HIDE
       onMouseOut=“swapLayers(helpTLayer,helpMLayer)”>
   <B><U>H</U>elp</B><BR>
   <HR>
   <U>H</U>elp Topics<BR>
   <HR>
   <A HREF=<“http://www.rpi.edu/~odonnj”>>The House of JOD</A>
</LAYER>
</BODY>
<SCRIPT LANGUAGE=“JavaScript”>
var fileTLayer=window.document.fileT;
var fileMLayer=window.document.fileM;
var editTLayer=window.document.editT;
var editMLayer=window.document.editM;
var findTLayer=window.document.findT;
var findMLayer=window.document.findM;
var helpTLayer=window.document.helpT;
var helpMLayer=window.document.helpM;

function swapLayers(showLayer,hideLayer) {
   showLayer.visibility=“SHOW”;
   hideLayer.visibility=“HIDE”;
}
</SCRIPT>
</HTML>

This example has four main features that it uses to display and hide the context-sensitive menus that go with each of the menu options shown in Figure 25.9.

• Style Sheet Border Class—This class is attached to each layer in order for them to have a fixed width and a visible border.

• Title and Menu Option Layers—Each of the four menus shown is implemented using two layers. The first is the layer that just shows the title of that menu option—for example, File. The second layer has both the title of the menu and its contents.

• Layer-Based Mouse Events The onMouseOver event of each “title” layer and the onMouseOut event of each “menu” layer are used to trigger a JavaScript function to show and hide the appropriate layer in each case.

• JavaScript swapLayers Function The swapLayers function is called by the layer mouse events to display the appropriate menu, depending on the location of the mouse. It uses the VISIBILITY properties of the title and menu layers to hide one and show the other (see Figure 25.11).

FIGURE 25.11 Pop-up menus enable you to greatly increase the amount of information on your page without making it cluttered.

You can use these context-sensitive pop-up menus for any number of purposes. They can be used to display useful information that you don’t want cluttering up your Web pages all the time. Or, as shown in Figure 25.12, you can include hypertext links in these menus to enable your users to navigate to another Web page.

Downloadable Fonts

Setting up a document with downloadable fonts is a multistep process that begins with your securing copies of the fonts you want to use in your design. If you are a skilled digital typographer, you may be able to create your own. Most, however, will have to be content to purchase them or to download a publicly available font from somewhere on the Internet.

FIGURE 25.12 Any HTML elements can be included within pop-up layers.

After you have the fonts you want in hand, you need to apply them to text on your page. Ultimately, what you want to produce is what is called a font definition file—a file downloaded with the page to provide font information to Navigator. To accomplish this, you need a software tool of some kind. A good bet for this is to use Typograph, a font definition generation tool from HexMac.

Table of Contents

Products | Contact Us | About Us | Privacy | Ad Info | Home

Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc.
All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.