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

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 .. 59 60 61 62 63 64 < 65 > 66 67 68 69 70 71 .. 118 >> Next

<a href=””>Dummies</a><br />
<a href=””>Powells</a><br />
<a href=''''>Amazon</a><br />
<a href=''''>eBay</a><br />
<a href=””>Barnes & Noble</a><br />
Unless you’re an HTML and CSS guru, the code in Listing 9-1 might seem daunting. Not to worry! Taken a step at a time, the code unravels. The following four items (which are boldface in the code in Listing 9-1) are the most important:
The JavaScript displayMenu() function. The displayMenu() function accepts a single parameter representing the current menu.
1. The JavaScript code inside the displayMenu() function gets the document object associated with the current menu and stores it in the variable called thisMenu.
2. The code uses the thisMenu object’s display property to determine whether the current menu is expanded or contracted.
3. If the current menu is expanded, the code contracts it; if the current menu is contracted, the code expands it.
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 the last bullet in this list) shares the display characteristics defined between the <STYLE> tags.
The JavaScript calls to the displayMenu() functions that are associated with each of the onClick event handlers: one for the Resources hyperlink and one for the Books hyperlink. When users click either the Resources or Books hyperlink shown in Figure 9-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).
The HTML definition of the resMenu and bookMenu layers. Each of these layers, which are defined using the HTML <span> tag, associates the layer itself with the CSS menu class. The result?
186 Part III: Making Your Site Easy for Visitors to Navigate and Use
• The browser displays both the resMenu and bookMenu layers by using the same menu class definition.
• Both the resMenu and bookMenu layers are stored as document objects whose display property is accessible (and manipulable) via JavaScript.
The first item in this list has more information on the display property.
HTML and CSS are broad, complex topics. If you’d like more in-depth info on these topics than I present here, offers a wealth of free HTML and CSS resources. Check them out at html and, respectively.
Sliding menus
Sliding menus differ from pull-down menus in one important way: In a sliding menu, menu options appear dynamically in response to a mouseOver event. In other words, when it comes to sliding menus, users don’t have to click a menu item to see additional menu items; all they have to do is move their mouses over an item, and bingo! More items appear, as if by magic.
The menu shown previously in Figure 9-1 is a sliding menu, and so is the menu that you see in Figure 9-3.
Figure 9-3:
Mousing over a sliding menu causes the menu to display additional menu items.
Take a peek at the code in Listing 9-2, which creates the sliding menu shown in Figure 9-3. (It’s a bit ugly, but I describe the important parts in detail in the remainder of this section.) As you glance through the code, notice a single JavaScript function — displayMenu() — as well as calls to displayMenu() associated with the onMouseOver and onMouseOut event handlers.
Chapter 9: Creating Menus 187
I’ve included the working code in Listing 9-2 on the companion CD under the filename list0902.htm.
Listing 9-2: Creating a Sliding Menu
<HTML> <HEAD> <TITLE>Using DHTML to Create Sliding Menus (From JavaScript Edition)</TITLE> <SCRIPT LANGUAGE=”JavaScript” TYPE=”text/javascript”> <!-- Hide from older browsers For Dummies, 4th
// Custom JavaScript function displayMenu() function displayMenu(currentPosition,nextPosition) {
// Get the menu object located at the currentPosition // on the screen. var whichMenu = document.getElementByld(currentPosition) .style;
if (displayMenu.arguments.length == 1) { // Only one argument was sent in, so we need to // figure out the value for "nextPosition”
if (parselnt( == -5) { // Only two values are possible: one // for mouseOver // (-5) and one for mouseOut (-90). So we want // to toggle from the existing position to the // other position: for example, if the position // is -5, set nextPosition to -90... nextPosition = -90; і
J else { // Otherwise, set nextPosition to -5 nextPosition = -5; і 1
і // Redisplay the menu using the value of "nextPosition” = nextPosition + "px”; }
// End hiding--> </SCRIPT>
// Style sheet definition <STYLE TYPE=”text/css”> <!--

Previous << 1 .. 59 60 61 62 63 64 < 65 > 66 67 68 69 70 71 .. 118 >> Next