How to create and modify a redirection drop-down list box in FrontPage 2002 (310713)

SUMMARY

This article describes how to create and modify a drop-down list box control that opens a specific Uniform Resource Locator (URL) by using JavaScript. The procedures are performed in an existing FrontPage 2002 Web site.

NOTE: This article makes use of custom JavaScript that may not be available in all browsers. For more information about compatibility with other browsers, click Microsoft FrontPage Help on the Help menu, type compatibility in the Office Assistant or the Answer Wizard, and then click Search to view the topic.

(back to top)

Creating the Redirection Drop-Down List

NOTE: You may receive an error message if you copy the examples directly from this article and paste them into FrontPage. The angle brackets (< and >) may appear as escaped HTML code (< and >). To work around this behavior, paste the script into a blank Notepad document, and then copy it from Notepad before you paste it into FrontPage.

NOTE: Because there are several versions of Microsoft Windows, the following steps may be different on your computer. If they are, see your product documentation to complete these steps.

Start FrontPage. Open a Web. On the File menu, point to New, and then click Page or Web.
In the New Page or Web task pane, click Blank page.
Click the HTML tab at the bottom of the FrontPage window.
Position the insertion point on a blank line just below the <BODY> tag where you want to place the JavaScript code.
Minimize FrontPage.

Use a copy and paste operation to add the following code sample to the Web page. To do this in Microsoft Internet Explorer, follow these steps:

Select the following code sample:

<h3 align="center">Where Do You Want to Go Today?</h3>
<center>
<form>
  <p><select name="section" size="1" language="javascript" onChange="gotoPage(this.selectedIndex);">
  <option selected>Where do you want to go today?</option>
  <option>- - - - - - - - - - - - - - - - -</option>
  <option>Microsoft Home Page</option>
  <option>MSN Home Page</option>
  </select></p>
</form>
</center>
<script language="JavaScript">
<!--
function gotoPage(varItem)
{
  switch(varItem)
  {
    case 0:
      window.parent.self.status="Goes Nowhere";
      break;
    case 1:
      window.parent.self.status="Goes Nowhere";
      break;
    case 2:
      window.location="http://www.microsoft.com";
      break;
    case 3:
      window.location="http://www.msn.com";
      break;
  }
}
// -->
</script>

On the Edit menu, click Copy.
Start Notepad. To do this, point to Programs on the Start menu, point to Accessories, and then click Notepad.
In Notepad, click Paste on the Edit menu.
On the Edit menu, click Select All.
On the Edit menu, click Copy.
Minimize Notepad and then switch to FrontPage.
On the Edit menu, click Paste.

On the File menu, click Save.
Click the Preview tab at the bottom of the FrontPage window to view the redirection drop-down list box.

NOTE: This code sample uses the window.location property to load new pages. If you are using a frameset, the new page is displayed in the current frame. As an alternative, you can use the window.open() method to load the page and specify a target frame. For example, to display the Microsoft home page in a full screen, use the following JavaScript code:

    case 2:
      window.open("http://www.microsoft.com", target="_top");
      break;

(back to top)

Adding a URL to the Redirection Drop-Down List Box

To add a URL to the sample, make the following changes:

Add an entry to the options list in the HTML code.
Add an entry to the switch section in the JavaScript code.

For example, to add a menu choice for the MSNBC Web site, follow these steps.

NOTE: These instructions assume that you made no changes to the script after you pasted it into FrontPage.

In FrontPage, click the HTML tab at the bottom of the FrontPage window.
Click immediately after the following line
```
<option>MSN Home Page</option>
						
```
and then press ENTER.
Type the following HTML code
```
<option>MSNBC Home Page</option>
						
```
to add this item to the list of menu choices.
Locate the following section in the JavaScript code:
```
    case 3:
      window.location="http://www.msn.com";
      break;
						
```
Click immediately after break; and then press ENTER.
On the blank line, type the following JavaScript code to redirect the URL to the new site you are adding:
```
    case 4:
      window.location="http://www.msnbc.com";
      break;
					
```
On the File menu, click Save.
Click the Preview tab at the bottom of the FrontPage window to test the changes.

(back to top)

Removing a URL from the Drop-Down List Box

If you want to remove a URL from the sample code, you need to make the following changes:

Remove an entry from the options list in the HTML code.
Remove an entry from the switch section in the JavaScript code.

To remove the MSNBC Web site option from the list, follow these steps:

Click the HTML tab at the bottom of the FrontPage window.
Locate the following line of code:
```
<option>MSNBC Home Page</option>
					
```
Select the entire line and then press DELETE.
Locate the following section in the JavaScript code:
```
    case 4:
      window.location="http://www.msnbc.com";
      break;
						
```
Select these three lines of code and then press DELETE.
On the File menu, click Save.
Click the Preview tab at the bottom of the FrontPage window to test the changes.

NOTE: If you remove a menu item that is not the last choice, you also need to renumber the items. For example, if you remove the MSN Web site option from the list of choices, renumber the MSNBC choice so that it is the new case 3 item.

(back to top)