Solved

Drop down list for navigation in FrontPage 98

Posted on 1998-06-06
11
192 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
  • 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
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…

930 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now