Improving Browser Navigation

[ LiB ]

Earlier this afternoon, I showed you how to create browser navigation buttons that enable you to imitate the Back, Forward, Reload, and Home buttons on the browser's toolbar. The following sections add a host of new tricks to your tool bag that will enable you to create sophisticated navigation tools for your visitors . You will learn how to do the following:

Create a URL field
Enable users to jump to places in your Web site or other Web sites using drop-down lists
Add buttons that enable users to scroll or jump quickly to other positions within lengthy pages
Add rollover effects to your links and graphics

Creating Your Own URL Field

As the following example shows, it does not take a lot of code to create a URL field on your Web page. All that you need is a form with a text field, a button, and the onClick event handler.

 <HTML>   <HEAD>     <TITLE> Script 4.5 - Creating your own URL field</TITLE>   </HEAD>   <BODY>     <H3>Enter a URL and click on Load URL!</H3>     <FORM NAME="myForm">       <INPUT NAME="URL_Field" TYPE="text" VALUE="http://" SIZE="30">       <INPUT NAME="GoButton" TYPE="button" VALUE="Load URL"         onClick="window.location=myForm.URL_Field.value">     </FORM>   </BODY> </HTML>

The following HTML statements define a form called myForm that contains a text field called URL_Field and a button named GoButton . As you can see, I added an initial value in the text field by adding the VALUE="http://" clause to the <INPUT> tag:

 <FORM NAME="myForm">   <INPUT NAME="URL_Field" TYPE="text" VALUE="http://"  size="30">   <INPUT NAME="GoButton" TYPE="button" VALUE="Load URL"     onClick="window.location=myform.URL_Field.value">

NOTE

The window.location statement automatically loads any assigned URL. Unless you preface the URL with http:// , the scripts will not be able to load the URL. Make sure you do not remove the http:// text that is appended to the beginning of the URL_Field or else the example will not work.

Adding onClick="window.location=myform.URL_Field.value" as the event handler for the button takes the value located in the text field (in this case, myform.URL_Field.value" ) and assigns it to the window object's location property. Any time a change is made to window.location , the browser immediately tries to load the URL.

Figure 4.5 shows what this URL script looks like when it has been loaded in a browser. By completing the URL address and clicking on the Load URL button, the user can load any Web page into the current window.

Figure 4.5. Building a custom URL form

graphic/04fig05.gif

Creating an Automatic Drop-Down Navigation Menu

At times you may want to offer visitors to your Web site a large number of links to choose from. Creating each one individually can be tiresome and can result in a page that is overly crowded and unattractive. A simple solution to this problem is to use a drop-down list, as shown in this example:

 <HTML>   <HEAD>     <TITLE> Script 4.6 - Creating a drop-down menu - 1</TITLE>    </HEAD>   <BODY>     <FORM NAME="myForm">       <SELECT NAME="myList" onChange="window.location= document.myForm.myList.options[document.myForm.myList.selected Index].value">       <OPTION SELECTED VALUE="javascript:void(0)">-- Pick One --       <OPTION VALUE="http://www.microsoft.com"> Microsoft       <OPTION VALUE="http://www.netscape.com"> Netscape       <OPTION VALUE="http://www.myopera.com"> Opera       </SELECT>     </FORM>   </BODY> </HTML>

In the body section of the HTML page, a single form called myForm is defined. Within it, a list called myList is declared. The onChange event handler is used to set the window.location property to the value specified by the following statement:

 document.myForm.myList.options[document.myForm.myList.selected Index].value"

Each option in the list has an implicit index number. Roughly translated, the preceding statement takes the index number of the option you select from the list (the value in document.myForm.myList.selectedIndex ) and uses it to assign the value of the selected option to window.location .

If you look at the <OPTION> tags within the form, you will notice that the first tag looks different. I used VALUE="javascript:void(0)" to put an entry into the list that, if selected, is ignored. This trick enables me to add an instruction at the top of the list that otherwise has no effect. The rest of the options are straightforward. Each <OPTION> tag contains a VALUE that holds the URL; if this option is selected, the specified URL is opened. Note that each VALUE entry is followed by a description that identifies the entry within the list.

Figure 4.6 shows how the list looks when you load this page. Selecting the -- Pick One -- entry has no effect. Selecting any other entry causes the browser to load the URL associated with that selection.

Figure 4.6. Helping users navigate with a drop-down list

graphic/04fig06.gif

Creating a Drop-Down Menu with a Button Control

The following example builds on the one in the previous section by providing the user with an additional level of control. The following script enables the user to select an entry from a drop-down list without having that entry automatically processed (as was the case in the preceding example). Delaying the processing of a selection is appropriate on forms that require the user to complete a number of activities before the form is processed .

The following code is similar to the code in the preceding section. Note, however, that I removed the onChange event handler from the list, which prevents the form from automatically processing the selected option. Instead, I added the onClick event handler to the form's button. When the user clicks on the button, the onClick event handler sets the window.location property to the value of the selected list option, causing the appropriate URL to load.

 <HTML>   <HEAD>     <TITLE> Script 4.7 - Creating a drop-down menu - 2</TITLE>   </HEAD>   <BODY>     <FORM NAME="myForm">       <SELECT NAME="myList">         <OPTION SELECTED VALUE="javascript:void(0)">-- Pick One --         <OPTION SELECTED VALUE="http://www.microsoft.com"> Microsoft         <OPTION VALUE="http://www.netscape.com"> Netscape         <OPTION VALUE="http://www.myopera.com"> Opera       </SELECT>       <INPUT NAME="Load_URL" TYPE="button" VALUE="Load URL"         onClick="window.location=         document.myForm.myList.options[document.myForm. myList.selectedIndex].value">     </FORM>   </BODY> </HTML>

Figure 4.7 shows how the list looks when you load this page. Selecting the -- Pick One -- entry still has no effect. Selecting any other option no longer causes that option to be loaded. Instead, the Load URL button gives the user control over when and if the entry selected from the list is processed.

Figure 4.7. Enabling visitors to load pages from a list of predefined URLs

graphic/04fig07.gif

Scrolling and Jumping

Depending on their content, Web page can sometimes grow rather large in size. JavaScript provides the ability to scroll or jump to a predefined location within the page. In addition to making the page easier to navigate, giving the user the ability to jump also can produce a stunning visual effect, as demonstrated by the following example.

 <HTML>   <HEAD>     <TITLE> Script 4.8 - Scrolling and jumping example</TITLE>     <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">      <!-- Start hiding JavaScript statements       function ScrollDown(){         for (i=1; i<=600; i++) {           parent.scrollTo(1,i);         }       }       function ScrollUp(){         for (i=600; i>=1; i--) {           parent.scrollTo(1,i)         }       }       function JumpDown(){         parent.scrollTo(1,600);       }       function JumpUp(){         parent.scrollTo(1,1);       }     // End hiding JavaScript statements -->     </SCRIPT>   </HEAD>   <BODY>     <FORM NAME="myForm">        <INPUT TYPE="button" VALUE="Scroll Down" onClick="ScrollDown()">       <INPUT TYPE="button" VALUE="Jump Down" onClick="JumpDown()">     </FORM>     <BR><BR><BR><BR><BR><BR>     <H3>This is an example...</H3>     <BR><BR><BR><BR><BR><BR>     <H3>of scrolling and jumping...</H3>     <BR><BR><BR><BR><BR><BR>     <H3>from the top to the bottom of a page...</H3>     <BR><BR><BR><BR><BR><BR>     <H3>and back again!!</H3>     <FORM>       <INPUT TYPE="button" VALUE="Scroll Up" onClick="ScrollUp()">       <INPUT TYPE="button" VALUE="Jump Up" onClick="JumpUp()">     </FORM>   </BODY> </HTML>

Four functions are defined in the head section of the page. Two of these functions manage the scrolling effect, and the other two manage the jump affect. Take the ScrollDown() function as an example. The function starts by setting up a for loop that is controlled by a variable called i . The variable i is initially set to a value of 1 and then incremented by 1 until it reaches 600. With each iteration, the loop executes the window object's ScrollTo() method. This method scrolls the window's viewing area to the location specified by the coordinates x and y . In effect, the for loop executes 600 times and scrolls down the display by 1 pixel position on each occurrence. The ScrollUp() function does the same thing in reverse.

 function ScrollDown(){   for (i=1; i<=600; i++) {     parent.scrollTo(1,i);   } }

The JumpDown() function skips the scroll effect altogether by simply specifying the destination coordinate. The JumpUp() function does the same thing in reverse.

 function JumpDown(){   parent.scrollTo(1,600); }

Two forms are placed at the top and the bottom of the page's body section. These forms define two buttons that call the functions. The buttons in the top form use the onClick event handler to execute the ScrollDown() and JumpDown() functions; the buttons in the bottom form use the onClick event handler to execute the ScrollUp() and JumpUp() functions.

Between the two forms, I placed text to make the page long enough to provide an effective demonstration. Loading this page displays the window shown in Figure 4.8. Clicking on either the Scroll Down or Jump Down button scrolls or jumps the viewing area down to the bottom of the page, where the Scroll Up and Jump Up buttons have been placed.

Figure 4.8. Adding scroll and jump buttons to help visitors navigate your Web page faster

graphic/04fig08.gif

Working with Rollovers

My personal favorite JavaScript effect is the rollover. A rollover is an image that changes when the mouse moves the pointer over it. All the rollover really does is use the onMouseOver and onMouseOut event handlers to toggle between two similar links or images, giving the appearance that they are changing. This very popular technique has become common on the Web.

NOTE

Make sure that both copies of the rollover images you use are the same size. Otherwise, the effect is lost because the second image will look distorted .

In the following script, you will see an example of how to use the rollover affect to animate three images. While the images appear to the user to be text, they actually are graphic images.

 <HTML>   <HEAD>     <TITLE> Script 4.9 - Working with rollovers</TITLE>     <SCRIPT LANGUAGE="JavaScript" TYPE="Text/JavaScript">     <!-- Start hiding JavaScript statements         netscape1 =new Image;          netscape2       =new Image;         microsoft1      =new Image;         microsoft2      =new Image;         opera1            =new Image;         opera2            =new Image;         netscape1.src   ="netscape1.jpg";         netscape2.src   ="netscape2.jpg";         microsoft1.src  ="microsoft1.jpg";         microsoft2.src  ="microsoft2.jpg";         opera1.src      ="opera1.jpg";         opera2.src      ="opera2.jpg";     // End hiding JavaScript statements -->     </SCRIPT>   </HEAD>   <BODY>     <A HREF="http://www.netscape.com"       onMouseover="document.mybutton1.src=netscape2.src"       onMouseout="document.mybutton1.src=netscape1.src">       <IMG SRC="netscape1.jpg" BORDER="0" NAME="mybutton1"> </A><P>     <A HREF="http://www.microsoft.com"       onMouseover="document.mybutton2.src=microsoft2.src"       onMouseout="document.mybutton2.src=microsoft1.src">       <IMG SRC="microsoft1.jpg" BORDER="0" NAME="mybutton2"> </A><P>     <A HREF="http://www.myopera.com"       onMouseover="document.mybutton3.src=opera2.src"       onMouseout="document.mybutton3.src=opera1.src">       <IMG SRC="opera1.jpg" BORDER="0" NAME="mybutton3"></A>    </BODY> </HTML>

The trick to making your rollovers work is to preload the images into cache on your visitor's computers so that when they are referenced in the script, they can be displayed instantly. The script in the head section of the page does this. The rollover menu is comprised of three images, each of which requires a second but slightly different version of each of the three images. I must therefore define six images. The following statements define each image object and preload them into cache as soon as the page starts loading.

 netscape1         =new Image; netscape2         =new Image; microsoft1        =new Image; microsoft2        =new Image; opera1                  =new Image; opera2                  =new Image; netscape1.src           ="netscape1.jpg"; netscape2.src           ="netscape2.jpg"; microsoft1.src          ="microsoft1.jpg"; microsoft2.src          ="microsoft2.jpg"; opera1.src        ="opera1.jpg"; opera2.src        ="opera2.jpg";

When the page is first loaded, three images are displayed. Each of these images is defined by links in the body section. The following HTML tag shows the first link.

 <A HREF=http://www.netscape.com   onMouseover="document.mybutton1.src=netscape2.src"   onMouseout="document.mybutton1.src=netscape1.src">   <IMG SRC="netscape1.jpg" BORDER="0" NAME="mybutton1"></A><P>

As you can see, the onMouseOver event handler automatically loads the other version of the image when the mouse pointer passes over the image; the onMouseOut event handler puts the original image back when the mouse pointer moves away from the image. The other two links are defined in a similar fashion.

Figure 4.9 shows how the page looks after the user has placed the pointer over the Microsoft link. If the user clicks on the link, the URL associated with the link is loaded. Otherwise, when the user moves the pointer away, the original graphic for the Microsoft link is reloaded.

Figure 4.9. Adding rollover effects to menu graphics

graphic/04fig09.gif

NOTE

To really appreciate the rollover example,you need to load it and run it for yourself.It is on the book's accompanying CD-ROM, along with all the other examples that you see in this book.

[ LiB ]