Java Menu

The tables are all relative -- so they will stretch at higher resolutions. If you want one to not stretch, set it with absolute pixels and leave the others to sort themselves out (no width set at all).

Try this:

<INPUT type="button" value="Go" onclick="location.href = document.selecter.select1.options[document.selecter.select1.selectedIndex].value">

For the go button to make sure it works properly. Adding a list under it as <noscript></noscript> would be useful, too, so that folks without JavaScript can use the menu as well.

I found I had a harder time getting the drop-downs to work in Netscape because it wasn't updating them when I refreshed (this was a while ago, though). I notice that sometimes I have to clear the cache to get a page on my hard drive to reload properly.

hth, maybe someone has a better option?

Suzanne

------------------
Zero Cattle
Suzanne
Tables DeMystified

Hi Vy,

I only saw one dropdown; I did notice that you are document.writing() the list. So...if you are using the same code for the second menu (as in the same select name), you will get either an error or confusion from the browser.
You might be interested in the "Select & Go Menus" script at my site. It demonstrates 2 types of dropdowns (with & without go button) and discusses pros & cons of each.

Vinny

------------------
GrassBlade: cut&paste javascript

Vincent tried nicking your dropdown from your site but got a script error on that too.
I think i am doing something wrong here. All I need is a few drope down menu's that will go in a table ok. I tried using a java one but it messed up my tables. Here is the one I tried from your site:

<form>
<p><select name="whatsNew" size="1"
onchange="doSel(this)">
<option selected value>What's New</option>
<option
value="location.href='html/selCascade1.html'">Cascading Selects 1</option>
<option
value="location.href='html/snippet4.html'">Changing Button Values</option>
<option
value="location.href='html/randBanner.html'">Read Banner Data from File</option>
<option
value="location.href='html/rolodex3.html'">Rolodex version 3</option>
<option
value="location.href='html/dHTML3.html'">dHTML: Moving Layers</option>
</select></p>
</form>

Is there anything I can do to the original one on my site to allow ie and netscape to use it twice?

Thanks

~Vy~

Hi Vy,

What error did you get?
Did you also snip the doSel() function? If you read the explanation at the "Select & Go Menus" script, you'll see that you can have more than one menu. (My home page is evidence; 4 dropdowns, 1 function)
The trick is to send "this" when calling the function and using different names for the select element. (as in What's New, Learning Curve, I Object, etc)
BTW: why are you docWriting?

Vinny

------------------
GrassBlade: cut&paste javascript

<FORM NAME="Mills44">
<SELECT NAME="E">
<OPTION VALUE = "index/links.htm">Links to Everything!
<OPTION VALUE = "psycho/psycho.htm">PsychoBabble Articles
<OPTION VALUE = "photos/portfolio.htm">Photographic Portfolio
<OPTION VALUE = "verses/verses.htm">Verses Veritas
<OPTION VALUE = "suzanne/suzanne.htm">From the Mind of Suzanne
<OPTION VALUE = "resume/resume.htm">Resume
<OPTION VALUE = "quilts/quilts.htm">Quilt Designs by Scott
<OPTION VALUE = "baby/home.htm">Baby Carter-Jackson
</SELECT>
<INPUT TYPE="button" VALUE="Go!" onclick="location.href = document.Mills44.E.options[document.Mills44.E.selectedIndex].value">
</FORM>
<noscript><ul>
<li><A href="index/links.htm">Links (PsychoBabble and others)</a><br>
<li><A href="psycho/psycho.htm">PsychoBabble Articles</a><br>
<li><A href="photo/portfolio.htm">Photographic Portfolio</a><br>
<li><A href="verses/verses.htm">Verses Veritas</a><br>
<li><A href="suzanne/suzanne.htm">From the Mind of Suzanne</a><br>
<li><A href="resume/resume.htm">Resume</a><br>
<li><A href="quilts/quilts.htm">Quilt Designs by Scott</a><br>
<li><a href="baby/home.htm">Baby Carter-Jackson</a><br>
</ul></noscript>

That's mine above.

The difference I see between yours (with the error) and mine (which has been working for almost 3 years now) is that you have:

document.location

and I have

location.href

And that I have the value="go" before the JavaScript.

hth,

Suzanne

------------------
Zero Cattle
Suzanne
Tables DeMystified

Vincent,

I am sorry but you are speaking a language I know nothing about and you are confusing me a bit. I appreciate your time though. I had a look at your page and still can't figure out what you mean by the doselect() function

I want to use the html one so people that do not have java enabled can choose from the non java menu. I tried getting the script to work by basically copyeng the script and pasting it in another table cell. Like shown below. IF I do this I get a script debug error when I press go

1

<form name="htmlMenu">
<select name="htmlSelList" size="1">
<option selected value="#">Select a page, then Go!
<option value="dHTML1.html">Dynamic HTML 1</option>
<option value="validForm.html">Validating Forms 1</option>
<option value="../index.html">GrassBlade Home Page</option>
<option value="validSSN.html">Validating SSNs</option>
<option value="selSwitch.html">Multiple Select Swap</option>
</select>
<input type="button" onClick="document.location = document.htmlMenu.htmlSelList.options [document.htmlMenu.htmlSelList.selectedIndex].value;"
value="GO">
</form>

2

<form name="htmlMenu">
<select name="htmlSelList" size="1">
<option selected value="#">Select a page, then Go!
<option value="dHTML1.html">Dynamic HTML 1</option>
<option value="validForm.html">Validating Forms 1</option>
<option value="../index.html">GrassBlade Home Page</option>
<option value="validSSN.html">Validating SSNs</option>
<option value="selSwitch.html">Multiple Select Swap</option>
</select>
<input type="button" onClick="document.location = document.htmlMenu.htmlSelList.options [document.htmlMenu.htmlSelList.selectedIndex].value;"
value="GO">
</form>

Hi Vy,

Sorry for the confusion. We'll start over again, ok?

Now this is the only selection list I found on the home page (your link). I presume you are testing somewhere else.

If your second menu calls the exact same go() function, you cannot have more than one popup menu on the page. The reason is that you are "hardcoding" the DOM (document object model) into the function. "document.selecter.select1" is hardcoding. This means it will only work with the first menu that has those same names.
Your code:

function go(){
if (document.selecter.select1.options[document.selecter.select1.selectedIndex].value != "none") {
location = document.selecter.select1.options[document.selecter.select1.selectedIndex].value
}

Your choices are as follows:

1) use my no "go" button script -- the one with the doSel() function. (The number of people who disable their browser's javascript and use only HTML is inconsequential -- especially for a site that is pushing web services.)

2) send the option's value as an argument. This means you should kill the "document.write(...selector...) code and just use straight HTML. Other necessary changes would be:

...onclick="go(document.selecter.select1.options[document.selecter.select1.selectedIndex].value)"

and

function go(selValue){
location.href = selValue;

3) write a different "go" function for each dropdown menu -- this is the worst choice. (It's bad programming.)

Hope this isn't too confusing.
(BTW: there is no function difference between using document.location and location.href -- the browser will load the desired page in any event.)

Vinny

------------------
GrassBlade: cut&paste javascript

Thanks you two! Your help has been much appreciated!

~Vy~

Hi Vy,

You're welcome; I hope the problem is solved.

Vinny

------------------
GrassBlade: cut&paste javascript