Notice: This website is an unofficial Microsoft Knowledge Base (hereinafter KB) archive and is intended to provide a reliable access to deleted content from Microsoft KB. All KB articles are owned by Microsoft Corporation. Read full disclaimer for more details.

How to create and modify a redirection drop-down list box in SharePoint Designer 2007 and in FrontPage 2003


View products that this article applies to.

For a Microsoft FrontPage 2002 version of this article, see 310713 (http://support.microsoft.com/kb/310713/ ) .
For a Microsoft FrontPage 2002 version of this article, see 310713 (http://support.microsoft.com/kb/310713/ ) .

↑ Back to the top


Summary

This article describes how to create and modify a drop-down list box control that opens a specific URL by using JavaScript in Microsoft Office FrontPage 2003 and in Microsoft Office SharePoint Designer 2007.

Note This article uses custom JavaScript/JScript that may not be available in all Web browsers.

↑ Back to the top


More information

Create the redirection drop-down list box

Microsoft provides programming examples for illustration only, without warranty either expressed or implied. This includes, but is not limited to, the implied warranties of merchantability or fitness for a particular purpose. This article assumes that you are familiar with the programming language that is being demonstrated and with the tools that are used to create and to debug procedures. Microsoft support engineers can help explain the functionality of a particular procedure. However, they will not modify these examples to provide added functionality or construct procedures to meet your specific requirements.

To create the redirection drop-down list box, follow these steps:
  1. Start SharePoint Designer 2007 or FrontPage 2003, and then open your site.
  2. In SharePoint Designer 2007, click the New Document button on the toolbar.

    In FrontPage 2003, click the New Page button on the toolbar.
  3. On the View menu, click Page if it is not already selected, and then click Code at the bottom of the page.
  4. Insert the following code sample between the <body> tag and the </body> tag on your page:
    <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>
    
    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. If you want, you can use the window.open method to load the page and then 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;
    
    Note You may receive an error message, or the page may not display correctly if you copy the examples directly from this article and paste them into SharePoint Designer 2007 or into FrontPage 2003. The angle brackets (< and >) may appear as HTML code.

    To work around this behavior, first paste the code sample into a blank document in Notepad, and then copy the code sample from the document in Notepad to your page in SharePoint Designer 2007 or in FrontPage 2003. To do this, follow these steps:
    1. Copy the code sample from step 4.
    2. Start Notepad, and then open a blank document.
    3. On the Edit menu, click Paste.
    4. On the Edit menu, click Select All.
    5. On the Edit menu, click Copy.
    6. In SharePoint Designer 2007 or in FrontPage 2003, position the insertion point on a blank line immediately below the <body> tag where you want to insert the JavaScript code.
    7. On the Edit menu, click Paste.
  5. On the File menu, click Save.
  6. In the Save As dialog box, specify a file name and a location where you want to save the page, and then click Save.
  7. On the File menu, point to Preview in Browser, and then click the Web browser that you want to use to preview the page.

Add a URL to the redirection drop-down list box

To add a URL to the list that is displayed in the drop-down list box, you must do both of the following:
  • Add an entry to the option list in the HTML code.
  • Add an entry to the "switch(varItem)" section in the JavaScript code.
For example, to add a list item for the Microsoft Help and Support Web site, follow these steps:

Note These steps assume that you did not make any changes to the code sample after you pasted it into SharePoint Designer 2007 or into FrontPage 2003.
  1. Start SharePoint Designer 2007 or FrontPage 2003 if it is not already started, and then open the page that contains the drop-down list box.
  2. On the View menu, click Page if it is not already selected, and then click Code at the bottom of the page.
  3. Position the insertion point immediately after the following HTML code on your page, and then press ENTER to create a new line:
    <option>MSN Home Page</option>
  4. On the new line, type the following HTML code to add this item to the list:
    <option>Microsoft Help and Support Home Page</option>
  5. Position the insertion point immediately after the following JavaScript code on your page, and then press ENTER to create a new line:
    case 3:
          window.location="http://www.msn.com";
          break;
  6. On the new line, type the following JavaScript code to redirect the URL to the Web site that you are adding:
    case 4:
          window.location="http://support.microsoft.com";
          break;					
    
  7. On the File menu, click Save.
  8. On the File menu, point to Preview in Browser, and then click the Web browser that you want to use to preview the page.

Remove a URL from the drop-down list box

To remove a URL from the list that is displayed in the drop-down list box, you must do both of the following:
  • Remove the entry from the option list in the HTML code.
  • Remove the entry from the "switch(varItem)" section in the JavaScript code.
For example, to remove the list item for the Microsoft Help and Support Web site, follow these steps:
  1. Start SharePoint Designer 2007 or FrontPage 2003 if it is not already started, and then open the page that contains the drop-down list box.
  2. On the View menu, click Page if it is not already selected, and then click Code at the bottom of the page.
  3. Locate the following code:
    <option>Microsoft Help and Support Home Page</option>
  4. Select the code that you located in step 3, right-click the code, and then click Delete.
  5. Locate the following code:
    case 4:
          window.location="http://support.microsoft.com";
          break;
  6. Select the code that you located in step 5, right-click the code, and then click Delete.
  7. On the File menu, click Save.
  8. On the File menu, point to Preview in Browser, and then click the Web browser that you want to use to preview the page.

↑ Back to the top


References

For more information about SharePoint Designer 2007, visit the following Microsoft Web site:For more information about FrontPage, visit the following Microsoft Web site:

↑ Back to the top


Keywords: KB825545, kbhowto

↑ Back to the top

Article Info
Article ID : 825545
Revision : 9
Created on : 1/24/2007
Published on : 1/24/2007
Exists online : False
Views : 332