PDA

View Full Version : Dropdown menu blues... 1 more step...



kramer336
Jul 1st, 2002, 04:35 AM
Ok, here we go...

I have been trying this problem for a while now and with no solution. Perhaps the smartest of the smart can help with this problem.

A simple drop down menu.... Check it out...
http://www.austinweddings.com/

Yes I did that menu! (WOW, I can copy and paste a script)

Now, the problem happens when you have 100+ pages to update and the categories on the dropdown menu are changing daily.

I was wondering how to update a centrall file, such as a .js file and have it update all the pages automaticly.

BUT WAIT THERES MORE>>>>>
Many sugguest using an external file...
such as...
<script src="/buildmenu.js"
type="text/javascript"
language="Javascript1.1">
<!--
build_menu();
// -->
</script>

BUT...

the problem happens when the build menu function is called.

If you think about the structure of the simple dropdown menu you will see 2 parts...

The part that is java...

<script language="JavaScript">

function surfto(form) {

var myindex=form.dest.selectedIndex

location=form.dest.options[myindex].value;

}

//-->

</SCRIPT>


and the part that is a form...

</SCRIPT>

<FORM NAME="myform">

<SELECT NAME="dest" SIZE=1>

<OPTION SELECTED VALUE="http://URL#1">URL #1 DESCRIPTION

<OPTION VALUE="http://URL#2">URL #2 DESCRIPTION

<OPTION VALUE="http://URL#3">URL #3 DESCRIPTION

<OPTION VALUE="http://URL#4">URL#4 DESCRIPTION

</SELECT>

<INPUT TYPE="BUTTON" VALUE="GO NOW!" onClick="surfto(this.form)">

</FORM>

Now we all know (or at least i think i know.) that you CANT HAVE A FORM IN A .js file.
So...

Referring to an external .js file wouldnt work.

But wait theres even more!!!
A good friend of mine sugguestd a code like this...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript" language="Javascript1.1">
<!--
function build_menu() {
document.writeln('<select name="mymenu">');
document.writeln('<option value="index.html">Home<' + '/option>');
document.writeln('<option value="other.html">Elsewhere<' + '/option>');
document.writeln('<' + '/select>');
}
//-->
</script>
</head>
<body>
<form action="foo.pl" method="get">

<script type="text/javascript" language="Javascript1.1">
<!--
build_menu();
// -->
</script>
</form>
</body>
</html>

It works fine in IE but...
when i link to it or referrer to the java in a .js file that looks like this...


<!--
function build_menu() {
document.writeln('<select name="mymenu">');
document.writeln('<option value="index.html">Home<' + '/option>');
document.writeln('<option value="other.html">Elsewhere<' + '/option>');
document.writeln('<' + '/select>');
}
//-->

... and referr to it like this...


<script src="/buildmenu.js"
type="text/javascript"
language="Javascript1.1">
<!--
build_menu();
// -->
</script>

It doesnt do anything... I get a blank screen.

If you have read to here perhaps you understand my delema... Soo simple but yet i cant seem to get it. Any help or sugguestions you supply would be of great help... 5 bucks for the winner.. :)
Yours truely,
Steven

kramer336
Jul 1st, 2002, 04:51 AM
I also wrote it like that... but no luck...

glenngv
Jul 1st, 2002, 07:55 AM
Originally posted by kramer336

It works fine in IE but...
when i link to it or referrer to the java in a .js file that looks like this...


<!--
function build_menu() {
document.writeln('<select name="mymenu">');
document.writeln('<option value="index.html">Home<' + '/option>');
document.writeln('<option value="other.html">Elsewhere<' + '/option>');
document.writeln('<' + '/select>');
}
//-->

... and referr to it like this...


<script src="/buildmenu.js"
type="text/javascript"
language="Javascript1.1">
<!--
build_menu();
// -->
</script>

It doesnt do anything... I get a blank screen.
Steven

What browser are you using?
Make sure you inserted the script tags inside the form tag like this:

<form>
<script language="Javascript1.1" src="/buildmenu.js" type="text/javascript"></script>
<script language="Javascript1.1">
<!-- // Begin
build_menu();
// End -->
</script>
</form>

Gordo
Jul 1st, 2002, 09:04 AM
Upon reading your VERY informative (initial) post and checking out your web site, I have the following recommendation/observation/suggestion/whatever...

...what about an "include page"?

Since you're using FrontPage2002 to design the site, you could put any and all (combined or separate) dropdowns into their own page (keep it super-simple and uncluttered) and name it something like dropdown.htm. Then, include this page in all your main pages. Then, all you'd need to update would be the dropdown.htm page and upload it to the server.

I'd take just the

<form name="jump">
<p>
<select name="menu" size="1">
<option selected>Select a Category...</option>
...........
</form>

portion and put it in a separate page. Then, include the new page inside that <td></td>. It just might work.

In FP2000, what you need can be found by going to:
INSERT -- COMPONENT -- INCLUDE PAGE

It works VERY well for me...just like a shared border, but much better. Plus, it can be placed anywhere in a page.

Good luck! Hopefully I read your post correctly, and have not made too much of a fool of myself. It is 3am....I really need some sleep.

P.S. I live in South Austin!

kramer336
Jul 1st, 2002, 08:45 PM
Ok, i got the menu to call to the external .js file......... Take a look!

http://www.austinweddingguide.com/steves_menu.htm

BUT< how do i make the code to change the page!!!!
(I have no submit button or auto change.....)

so so close!

help please!

Yours truely
Steve

kramer336
Jul 1st, 2002, 08:50 PM
http://www.austinweddingguide.com/stevesJava.js

whammy
Jul 2nd, 2002, 12:06 AM
<!--
function build_menu() {
myselect = '<select name="mymenu" onchange="window.location=this.options[this.selectedIndex].value">';
myselect += '<option selected>Select a Category...<' + '/option>';
myselect += '<option>- - - - - - - - - - - - - - -<' + '/option>';
myselect += '<option value="accomms.htm">Accommodations<' + '/option>';
myselect += '<option value="alts.htm">Alterations<' + '/option>';
myselect += '<option value="aptlocate">Apartment Locating<' + '/option>';
myselect += '<option value="brregistry.htm">Attendant Gifts<' + '/option>';
myselect += '<option>- - - - - - - - - - - - - - -<' + '/option>';
myselect += '<option value="facilities.htm">Bachelor/Bachelorette Parties<' + '/option>';
myselect += '<option value="decos.htm">Balloons<' + '/option>';
myselect += '<option value="facilities.htm">Banquet Facilities<' + '/option>';
myselect += '<option value="caterer.htm">Bar Staff<' + '/option>';
myselect += '<option value="beauty.htm">Beauty<' + '/option>';
myselect += '<option value="accomms.htm">Bed &amp; Breakfasts<' + '/option>';
myselect += '<option value="caterer.htm">Beverages<' + '/option>';
myselect += '<option value="birthcon.htm">Birth Control<' + '/option>';
myselect += '<option value="brwear.htm">Bridal Accessories<' + '/option>';
myselect += '<option value="consults.htm">Bridal Consultants<' + '/option>';
myselect += '<option value="brregistry.htm">Bridal Registry &amp; Gifts<' + '/option>';
myselect += '<option value="brwear.htm">Bridal Shoes<' + '/option>';
myselect += '<option value="show_events.htm">Bridal Shows<' + '/option>';
myselect += '<option value="photogs.htm">Bridal Portraits<' + '/option>';
myselect += '<option value="brwear.htm">Bridal Wear<' + '/option>';
myselect += '<option value="brwear.htm">Bridal Wear - Custom<' + '/option>';
myselect += '<option value="brwear.htm">Bridal Wear - Rental<' + '/option>';
myselect += '<option>- - - - - - - - - - - - - - -<' + '/option>';
myselect += '<option value="cakes_candy.htm">Cake Tops<' + '/option>';
myselect += '<option value="cakes_candy.htm">Cakes Candies<' + '/option>';
myselect += '<option value="cakes_candy.htm">Candies<' + '/option>';
myselect += '<option value="invites.htm">Candles<' + '/option>';
myselect += '<option value="transport.htm">Carriages<' + '/option>';
myselect += '<option value="caterer.htm">Caterers<' + '/option>';
myselect += '<option value="wedsites.htm">Chapels<' + '/option>';
myselect += '<option value="wedsites.htm">Churches<' + '/option>';
myselect += '<option value="clergy.htm">Clergy<' + '/option>';
myselect += '<option value="consults.htm">Consultants<' + '/option>';
myselect += '<option value="beauty.htm">Cosmetic Dentistry<' + '/option>';
myselect += '<option value="beauty.htm">Cosmetic Enhancements<' + '/option>';
myselect += '<option>- - - - - - - - - - - - - - -<' + '/option>';
myselect += '<option value="decos.htm">Decorations<' + '/option>';
myselect += '<option value="honeymoons.htm">Destination Resorts<' + '/option>';
myselect += '<option value="releases.htm">Dove Butterfly Releases<' + '/option>';
myselect += '<option>- - - - - - - - - - - - - - -<' + '/option>';
myselect += '<option value="facilities.htm">Facilities<' + '/option>';
myselect += '<option value="favorsgifts.htm">Favors Gifts<' + '/option>';
myselect += '<option value="flowers.htm">Floral Preservation<' + '/option>';
myselect += '<option value="brwear.htm">Flower Girl Ring Bearer<' + '/option>';
myselect += '<option value="flowers.htm">Flowers Fresh Silk<' + '/option>';
myselect += '<option>- - - - - - - - - - - - - - -<' + '/option>';
myselect += '<option value="brregistry.htm">Gift Baskets<' + '/option>';
myselect += '<option value="cakes_candy.htm">Groom s Cakes<' + '/option>';
myselect += '<option>- - - - - - - - - - - - - - -<' + '/option>';
myselect += '<option value="beauty.htm">Health Clubs Fitness Centers<' + '/option>';
myselect += '<option value="brregistry.htm">Home Furnishings<' + '/option>';
myselect += '<option value="homes.htm">Homes<' + '/option>';
myselect += '<option value="honeymoons.htm">Honeymoon Resorts<' + '/option>';
myselect += '<option value="honeymoons.htm">Honeymoons<' + '/option>';
myselect += '<option value="accomms.htm">Hotels<' + '/option>';
myselect += '<option value="brregistry.htm">Housewares<' + '/option>';
myselect += '<option>- - - - - - - - - - - - - - -<' + '/option>';
myselect += '<option value="decos.htm">Ice Sculptures<' + '/option>';
myselect += '<option value="insure.htm">Insurance<' + '/option>';
myselect += '<option value="invites.htm">Invitations Annoucements<' + '/option>';
myselect += '<option>- - - - - - - - - - - - - - -<' + '/option>';
myselect += '<option value="jewelry.htm">Jewelry<' + '/option>';
myselect += '<option value="jewelry.htm">Jewelry Care<' + '/option>';
myselect += '<option>- - - - - - - - - - - - - - -<' + '/option>';
myselect += '<option value="transport.htm">Limousines<' + '/option>';
myselect += '<option value="brwear.htm">Cool & Lingerie<' + '/option>';
myselect += '<option value="accomms.htm">Lod / gings<' + '/option>';
myselect += '<option>- - - - - - - - - - - - - - -<' + '/option>';
myselect += '<option value="beauty.htm">Make-Up Artists<' + '/option>';
myselect += '<' + '/select>';
}
document.write(myselect)
//-->

kramer336
Jul 2nd, 2002, 07:02 PM
Here are my 2 files.....

http://www.austinweddings.com/steves_menu.htm

http://www.austinweddings.com/stevesJava.js

One files calls the script and one is the script... I used your code above to speed up things but to no avail.

What could be the problem?

Sincerely,
Steve

whammy
Jul 3rd, 2002, 01:49 AM
To be honest, I'm not sure... I downloaded your .js file, and it looks like everything is double spaced for some reason... I don't THINK that could cause it... I'm going to execute it to see where the problem might lie.

Looks like you were calling a function for no apparent reason...

whammy
Jul 3rd, 2002, 02:03 AM
OK.... I'm too tired to see what the real problem was, but this works:

<html>
<head>
<script language="JavaScript" type="text/javascript" src="stevesjava.js"></script>
</head>

<body>

<form>
<script language="JavaScript" type="text/javascript">
<!--
document.write(myselect);
//-->
</script>

</form>

</body>
</html>

Here's the .js file:



myselect = '<select name="mymenu" onchange="window.location=this.options[this.selectedIndex].value">';
myselect += '<option selected>Select a Category...<' + '/option>';
myselect += '<option>- - - - - - - - - - - - - - -<' + '/option>';
myselect += '<option value="accomms.htm">Accommodations<' + '/option>';
myselect += '<option value="alts.htm">Alterations<' + '/option>';
myselect += '<option value="aptlocate">Apartment Locating<' + '/option>';
myselect += '<option value="brregistry.htm">Attendant Gifts<' + '/option>';
myselect += '<option>- - - - - - - - - - - - - - -<' + '/option>';
myselect += '<option value="facilities.htm">Bachelor/Bachelorette Parties<' + '/option>';
myselect += '<option value="decos.htm">Balloons<' + '/option>';
myselect += '<option value="facilities.htm">Banquet Facilities<' + '/option>';
myselect += '<option value="caterer.htm">Bar Staff<' + '/option>';
myselect += '<option value="beauty.htm">Beauty<' + '/option>';
myselect += '<option value="accomms.htm">Bed & Breakfasts<' + '/option>';
myselect += '<option value="caterer.htm">Beverages<' + '/option>';
myselect += '<option value="birthcon.htm">Birth Control<' + '/option>';
myselect += '<option value="brwear.htm">Bridal Accessories<' + '/option>';
myselect += '<option value="consults.htm">Bridal Consultants<' + '/option>';
myselect += '<option value="brregistry.htm">Bridal Registry & Gifts<' + '/option>';
myselect += '<option value="brwear.htm">Bridal Shoes<' + '/option>';
myselect += '<option value="show_events.htm">Bridal Shows<' + '/option>';
myselect += '<option value="photogs.htm">Bridal Portraits<' + '/option>';
myselect += '<option value="brwear.htm">Bridal Wear<' + '/option>';
myselect += '<option value="brwear.htm">Bridal Wear - Custom<' + '/option>';
myselect += '<option value="brwear.htm">Bridal Wear - Rental<' + '/option>';
myselect += '<option>- - - - - - - - - - - - - - -<' + '/option>';
myselect += '<option value="cakes_candy.htm">Cake Tops<' + '/option>';
myselect += '<option value="cakes_candy.htm">Cakes Candies<' + '/option>';
myselect += '<option value="cakes_candy.htm">Candies<' + '/option>';
myselect += '<option value="invites.htm">Candles<' + '/option>';
myselect += '<option value="transport.htm">Carriages<' + '/option>';
myselect += '<option value="caterer.htm">Caterers<' + '/option>';
myselect += '<option value="wedsites.htm">Chapels<' + '/option>';
myselect += '<option value="wedsites.htm">Churches<' + '/option>';
myselect += '<option value="clergy.htm">Clergy<' + '/option>';
myselect += '<option value="consults.htm">Consultants<' + '/option>';
myselect += '<option value="beauty.htm">Cosmetic Dentistry<' + '/option>';
myselect += '<option value="beauty.htm">Cosmetic Enhancements<' + '/option>';
myselect += '<option>- - - - - - - - - - - - - - -<' + '/option>';
myselect += '<option value="decos.htm">Decorations<' + '/option>';
myselect += '<option value="honeymoons.htm">Destination Resorts<' + '/option>';
myselect += '<option value="releases.htm">Dove Butterfly Releases<' + '/option>';
myselect += '<option>- - - - - - - - - - - - - - -<' + '/option>';
myselect += '<option value="facilities.htm">Facilities<' + '/option>';
myselect += '<option value="favorsgifts.htm">Favors Gifts<' + '/option>';
myselect += '<option value="flowers.htm">Floral Preservation<' + '/option>';
myselect += '<option value="brwear.htm">Flower Girl Ring Bearer<' + '/option>';
myselect += '<option value="flowers.htm">Flowers Fresh Silk<' + '/option>';
myselect += '<option>- - - - - - - - - - - - - - -<' + '/option>';
myselect += '<option value="brregistry.htm">Gift Baskets<' + '/option>';
myselect += '<option value="cakes_candy.htm">Groom s Cakes<' + '/option>';
myselect += '<option>- - - - - - - - - - - - - - -<' + '/option>';
myselect += '<option value="beauty.htm">Health Clubs Fitness Centers<' + '/option>';
myselect += '<option value="brregistry.htm">Home Furnishings<' + '/option>';
myselect += '<option value="homes.htm">Homes<' + '/option>';
myselect += '<option value="honeymoons.htm">Honeymoon Resorts<' + '/option>';
myselect += '<option value="honeymoons.htm">Honeymoons<' + '/option>';
myselect += '<option value="accomms.htm">Hotels<' + '/option>';
myselect += '<option value="brregistry.htm">Housewares<' + '/option>';
myselect += '<option>- - - - - - - - - - - - - - -<' + '/option>';
myselect += '<option value="decos.htm">Ice Sculptures<' + '/option>';
myselect += '<option value="insure.htm">Insurance<' + '/option>';
myselect += '<option value="invites.htm">Invitations Annoucements<' + '/option>';
myselect += '<option>- - - - - - - - - - - - - - -<' + '/option>';
myselect += '<option value="jewelry.htm">Jewelry<' + '/option>';
myselect += '<option value="jewelry.htm">Jewelry Care<' + '/option>';
myselect += '<option>- - - - - - - - - - - - - - -<' + '/option>';
myselect += '<option value="transport.htm">Limousines<' + '/option>';
myselect += '<option value="brwear.htm">Cool & Lingerie<' + '/option>';
myselect += '<option value="accomms.htm">Lod / gings<' + '/option>';
myselect += '<option>- - - - - - - - - - - - - - -<' + '/option>';
myselect += '<option value="beauty.htm">Make-Up Artists<' + '/option>';
myselect += '<' + '/select>';

kramer336
Jul 3rd, 2002, 07:05 PM
Thanks for the help everyone and wammy, It works!!! perhaps Coding Forums should save this problem and archive it for future. I know many people would like to have a simple menu with centrall database.

Sincerely,
Steve

whammy
Jul 3rd, 2002, 11:37 PM
Actually there's a tutorial on it somewhere here. And a nifty little tool that John Krutsch made to convert your HTML to javascript, as above. I just don't have the links handy! I'll see if I can find them and post them here. :)

And you're welcome.

kramer336
Jul 9th, 2002, 08:06 PM
Here is the working code....

http://www.saweddings.com/

You can see the "Select A Category" pulldown menu is using the new code. Thanks again all, the database will surely help...

Any luck finding that tutorial?

Steven

SlatFats
Jul 9th, 2002, 08:45 PM
I'm no expert with JavaScript but I think you may want to edit your "----------" lines to link to "#". When dialup user click on those lines by mistake that will cause your main page to reload. I know how frustrating that can be because i've been making my own page and I had that problem with a couple of scripts that would open new windows and refresh the originating window. I hope that this might help you.

Thanks,
Ken;)

kramer336
Jul 14th, 2002, 12:36 AM
I will try to do that. Thanks.