Solved

Drop down list for navigation in FrontPage 98

Posted on 1998-06-06
11
198 Views
Last Modified: 2010-04-09
I want to have a drop down menu on an HTML page similar to a form, except it will allow a viewer to navigate to another page on my site, according to the selection.  I am using FrontPage98 and have tried unsuccessfully to do this with the Script Wizard.  An example of what I want is on the top of http://www.golf.com/
0
Comment
Question by:dpate
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 3
  • +1
11 Comments
 
LVL 5

Accepted Solution

by:
Christian_Wenz earned 100 total points
ID: 1844127
I don't know FrontPage good enough, but here's how it's generally done

a) give each option in the pulldown list a value: the URL where you want this selection to point to.
In the source code view, each option should now read like this:
<OPTION NAME="Microsoft" VALUE="http://www.microsoft.com">
b1) set the NAME attribute of your form to "MyForm"
b2) set the NAME attribute of your select list in your form to "MySelect"

c) go to the view source view and enter the following in the <HEAD> section of your page:

<SCRIPT LANGUAGE="JavaScript"><!--
function gothere(){
  var selIdx = document.MyForm.MySelect.selectedIndex
  location.href = document.MyForm.MySelect.topions[selidx].value
}
//--> </SCRIPT>

d) now set the onChange attribute of your select list to "gothere()"

Hope this helps. If you need more info on that, please leave me a comment here.

  -Christian
0
 

Author Comment

by:dpate
ID: 1844128
Additional info for Christian Wenz:

I think i'm almost there.  I've done everything you've suggested but when I uploaded my page with the menu on it to the server and tried to select a menu item, it makes the browser go to a page named "gothere" (http://www.webgrafxinc.com/acdispensing/gothere()), instead of the page I want.  The actual URL of the page with my menu on it is:

http://www.webgrafxinc.com/acdispensing/menu.htm

The actual source code for the page is as follows:

<html>

<head><script LANGUAGE="JavaScript" FOR="window" EVENT="onfocus()">
<!--
Window.location.href = "gothere"

//-->
    </script>

<title>New Page 1</title>
<script LANGUAGE="JavaScript">
<!--
function gothere(){
var selIdx = document.MyForm.MySelect.selectedIndex
location.href = document.MyForm.MySelect.topions[selidx].value
}
//-->
    </script>

<meta name="Microsoft Theme" content="technolo 111, default">
<meta name="Microsoft Border" content="tlb, default">
</head>

<body>

<p>&nbsp;</p>

<p><a href="map.htm">ert</a></p>

<p>&nbsp;</p>

<form METHOD="POST" NAME="MyForm" action="--WEBBOT-SELF--">
  <!--webbot bot="SaveResults" startspan U-File="_private/form_results.txt"
  S-Format="TEXT/CSV" S-Label-Fields="TRUE" --><input TYPE="hidden" NAME="VTI-GROUP" VALUE="0"><!--webbot bot="SaveResults" endspan --><p><select
  LANGUAGE="JavaScript" ONCHANGE="window.location.href = &quot;gothere()&quot;" SIZE="1"
  NAME="MySelect">
    <option value="http:/webgrafxinc.com/acdispensing/map.htm">Map</option>
    <option value="http://webgrafxinc.com/acdispensing/news.htm">News</option>
  </select> <input TYPE="submit" VALUE="Submit" NAME="B1"> <input TYPE="reset" VALUE="Reset"
  NAME="B2"> </p>
</form>

<p>&nbsp;
</body>
</html>

In addition, when I make a menu selection, I get a message advising of a scripting error, which states:

Line:   5
Char:   1
Error:  'Window' is undefined
Code:   0

If you can make any further suggestions it would be greatly appreciated.  Thanks Christian.

Dave

0
 
LVL 3

Expert Comment

by:bigelos
ID: 1844129
Try this code:



      <html>

      <head>
      <title>New Page 1</title>
      <script LANGUAGE="JavaScript">
      <!--
      function gothere(){
      var selIdx = document.MyForm.MySelect.selectedIndex
      location.href = document.MyForm.MySelect.topions[selidx].value
      }
      //-->
      </script>

      </head>

      <body>

      <form METHOD="POST" NAME="MyForm" action="gothere()">
      <select NAME="MySelect">
          <option value="http:/webgrafxinc.com/acdispensing/map.htm">Map</option>
          <option value="http://webgrafxinc.com/acdispensing/news.htm">News</option>
      </select>
      <input TYPE="submit" VALUE="GO!" NAME="B1">
      </form>

      </body>
      </html>

No, I don't want the points....give them to Christian.      </form>
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Expert Comment

by:bigelos
ID: 1844130
In my above comments, change
location.href = document.MyForm.MySelect.topions[selidx].value

to
location.href = document.MyForm.MySelect.options[selidx].value

And, you'll probably want to put the </form> before my comments about the points.
0
 
LVL 5

Expert Comment

by:Christian_Wenz
ID: 1844131
thanks bigelos, you are right. so dpate, tell us if this works
0
 

Author Comment

by:dpate
ID: 1844132
No luck, browser still tries to go to a location with URL

http:www. ...gothere(), instead of the menu selection.

Also, still getting error message that "Window" id undefined.
0
 
LVL 3

Expert Comment

by:bigelos
ID: 1844133
Change
location.href = document.MyForm.MySelect.topions[selidx].value

to

window.location  = document.MyForm.MySelect.topions[selidx].value

(Yes, I really should run the code before I post it.)

OK, here is code that I am actually using:

<form name="form1" method="post" action="">
Select Desination:
<select name="dest" size="1">
      <option selected value="http://home.com">Home</option>  
      <option value="../../department.html">Departments Page</option>
      <option value="../engineering.html">Engineering Page</option>
         <option value="../smoke/index.html">Other Engineering</option>
      <option value="../testeng/job.html">What We Do</option>
      <option value="../testeng/projects.html">Current Projects</option>
         <option value="../testeng/benchmarks/benchmarks.html">Benchmarks Report</option>
      <option value="../testeng/quality/QAG.html">Quality at a Glance</option>
</select>


<input type=button
onClick="location=document.form1.dest.options[document.form1.dest.selectedIndex ].value;"

value="Beam Me Up"
</form>

0
 

Author Comment

by:dpate
ID: 1844134
Found my answer on the FrontPage98 newsgroup.  code I was looking for is on site:

http://www.sitecrafters.com/support/fp98/listbox.htm

Dave
0
 
LVL 5

Expert Comment

by:Christian_Wenz
ID: 1844135
do you want to delete this question now?!
0
 

Author Comment

by:dpate
ID: 1844136
Yes, please delete question.

Thanks.

Dave Pate
0
 
LVL 84

Expert Comment

by:ozo
ID: 1844137
(wouldn't it be nice if one could just withdraw an answer that's locking a question, thus allowing the asker to delete the question without having to either bother linda in the customer service area, or reject the answer and wait three weeks?)

0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question