Books
in black and white
Main menu
Share a book About us Home
Books
Biology Business Chemistry Computers Culture Economics Fiction Games Guide History Management Mathematical Medicine Mental Fitnes Physics Psychology Scince Sport Technics
Ads

Javascript for dummies 4th edition - Veer E.V

Veer E.V Javascript for dummies 4th edition - Wiley publishing , 2004. - 387 p.
ISBN: 0-7645-7659-3
Download (direct link): javascriptfordummies2005.pdf
Previous << 1 .. 62 63 64 65 66 67 < 68 > 69 70 71 72 73 74 .. 118 >> Next

1 £ ■i My Conçut»
194 Part III: Making Your Site Easy for Visitors to Navigate and Use
The code shown in Listing 10-1 is on the companion CD under the filename
sitemap.htm.
Listing 10-1: A Simple Pull-Down Menu
<HTML>
<HEAD>
<TITLE>Using DHTML to Create a Site Map (From JavaScript For Dummies, 4th Edition)</TITLE>
<SCRIPT LANGUAGE=”JavaScript” TYPE=”text/javascript”>
<!-- Hide from older browsers
function displayMenu(currentMenu) {
var thisMenu = document.getElementById(currentMenu).style
// If the menu is expanded, contract it. if (thisMenu.display == "block”) { thisMenu.display = "none”
}
else {
// If the menu is contracted, expand it. thisMenu.display = "block”
}
return false
}
// End hiding-->
</SCRIPT>
(STYLE TYPE=”text/css”>
<!--
.menu {display:none; margin-left:20px;}
-- >
</STYLE>
</HEAD>
(BODY BGCOLOR=”#FFFFFF”>
<H3>
<a href=”dummy1.html” onClick=”return displayMenu('basicMenu')”>Knitting
Basics</a>
</H3>
<span class=”menu” id=”basicMenu”>
<b><a href=”dummy3.htm” onClick=”return displayMenu('subMenu')”>Planning a
project</a></b><br />
Chapter 10: Creating Expandable Site Maps 195
<span class=''menu'' id=''subMenu''>
■<a>Choosing yarn</a><br />
<a>Swatching</a><br />
</span>
<b><a>The knit stitch</a></b><br />
<b><a>The purl stitch</a></b><br />
</span>
<H3>
<a href=”dummy2.html” onClick=''return displayMenu('advMenu')''>Advanced Topics</a> </H3>
<span class=”menu” id=”advMenu”>
<a>Circular needles</a><br />
<a>Cables</a><br />
<a>Felting</a><br />
<a>Finishing</a><br />
</span>
</BODY>
</HTML>
To understand how the code in Listing 10-1 works, take a better look at the following code elements (each of which appears bold in the code):
1. The JavaScript displayMenu() function. The displayMenu() function accepts a single parameter representing the current menu. First, the JavaScript code inside the displayMenu() function gets the document object associated with the current menu and stores it in the variable called thisMenu. Then the code uses the thisMenu object’s display property to determine whether the current menu is expanded or contracted. If the current menu is expanded, the code contracts it; if the current menu is contracted, the code expands it.
2. The cascading style sheet definition of the menu class. The HTML
<STYLE> tags define a class of style sheet called menu. Every HTML component associated with the menu class (see Step 4) shares the display characteristics defined between the <STYLE> tags.
3. The JavaScript calls to displayMenu() associated with each of the onClick event handlers: one for the Knitting Basics hyperlink and one for the Advanced Topics hyperlink. When users click either the Knitting Basics or Advanced Topics hyperlink shown in Figure 10-2, the JavaScript code associated with the onClick event handler for each of these hyperlinks sends the current menu to the displayMenu() function, causing the current menu to contract (if it’s already expanded) or expand (if it’s contracted).
196 Part III: Making Your Site Easy for Visitors to Navigate and Use
4. The HTML definition of the basicMenu and resMenu layers. Each of these layers, which are defined using the HTML <span> tag, associates the layer itself with the CSS menu class defined in Step 2. The result: The browser displays both the basicMenu, subMenu, and advMenu layers using the same menu class definition — and the basicMenu, subMenu, and advMenu layers are stored as document objects whose display property is accessible (and manipulable) through JavaScript. (Check out Step 1 for more information on the display property.)
Adding frames to the pull-down menu
As you might notice, the site map shown previously in Figure 10-2 consists of two frames. One frame (the one on the left) contains the expandable pull-down menu. The other (the frame on the right) contains the site content. When a user clicks a pull-down menu selection in the left frame, the appropriate content displays in the frame on the right.
In the preceding section, I show you how to create a pull-down menu. In this section, I show you how to create a frameset — and add the pull-down menu to the left frame. (Note: For additional scoop on how frames work, check out Chapter 7.)
First, take a look at the code in Listing 10-2.
Experimenting with frames helps you understand how they work. Check out the frame code in Listing 10-2 by loading the file l ist1002.htm, located on the companion CD, into your Web browser.
Listing 10-2: Creating a Frameset Containing Two Frames
<HTML>
<HEAD><TITLE>Site navigation example (from JavaScript For Dummies, 4th
Edition)</TITLE></HEAD>
<FRAMESET COLS=”170, *" BORDER="0" FRAMESPACING=”15”
FRAMEBOR.DER="YES" FRAMEBORDER="0">
<FRAME SRC=”sitemap.htm” NAME="sitemap" SCROLLING="AUTO"
NORESIZE MARGINHEIGHT="15" MARGINWIDTH="5" LEFTMARGIN="0"
TOPMARGIN="0" TARGET="body">
FRAME SRC=”content.htm” NAME=”content” SCROLLING="AUTO" NORESIZE
Previous << 1 .. 62 63 64 65 66 67 < 68 > 69 70 71 72 73 74 .. 118 >> Next