Solved

Drop down list for navigation in FrontPage 98

Posted on 1998-06-06
11
194 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
css, html 5 42
HTML &#0153 2 17
Select case on click 3 15
Hide cell in a table 2 12
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

770 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