PDA

Click to See Complete Forum and Search --> : using pull-down as selector

derezzz
10-28-2003, 10:52 PM
hey, does anyone know how i can use a drop down menu to take users to a new page?
Say I have a drop down with two options..."yes" and "no" How do I make it so that upon selecting the "yes" option, the "yes" page loads? ...does this have to be achieved by including a "go" button on the side once the selection has been made? If so, how is that done? Anysuggestions? Would Ijust include the "yes" URL in the value?
Chevi54
10-28-2003, 11:24 PM
Here is a way using javascipt. good for version 4 versions of browsers. From "JavaScipt for the world wide web 3rd edition" This is a visual quikstart guide.
<HTML>
<HEAD>
<TITLE>Pop Up</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT" LANGUAGE=JAVASCRIPT>
<!-- Hide script from older browsers

function toggleMenu(currElem) {
if (document.all) {
menuObj = eval("document.all." + currElem + ".style")
menuObj.pixelTop = toggleVal(menuObj.pixelTop)
}
else {
menuObj = eval("document." + currElem)
menuObj.top = toggleVal(menuObj.top)
}
}

function toggleVal(inVal) {
if (inVal == -5) {
return -90
}
return -5
}

// End hiding script -->
</SCRIPT>
<STYLE TYPE="TEXT/CSS">
.menu {position:absolute; font:12px/14px helvetica;
width:75px; background-color:#999999;
layer-background-color:#999999; color:#FFFFFF}
</STYLE>
</HEAD>
<BODY BGCOLOR=WHITE>
<SPAN ID="fileMenu" CLASS=menu STYLE="left:20px; top:-90px"><BR>
<A HREF="javascript:window.open()">Open</A><BR>
<A HREF="javascript:window.print()">Print</A><BR>
<A HREF="javascript:history.back()">Back</A><BR>
<A HREF="javascript:history.forward()">Forward</A><BR>
<A HREF="javascript:window.close()">Close</A>
<HR>
<A HREF="javascript:toggleMenu('fileMenu')">File</A>
</SPAN>
<SPAN ID="searchMenu" CLASS=menu STYLE="left:100px;top:-90px"><BR>
<A HREF="http://www.yahoo.com">Yahoo</A><BR>
<A HREF="http://www.excite.com">Excite</A><BR>
<A HREF="http://www.hotbot.com">HotBot</A><BR>
<A HREF="http://www.lycos.com">Lycos</A><BR>
<A HREF="http://www.infoseek.com">Infoseek</A>
<HR>
<A HREF="javascript:toggleMenu('searchMenu')">Search</A>
</SPAN>
</BODY>
</HTML>

Or you can slide them with...
<HTML>
<HEAD>
<TITLE>Shakespeare's Plays</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT" LANGUAGE=JAVASCRIPT>
<!-- Hide script from older browsers

function toggleMenu(currMenu) {
if (document.all) {
thisMenu = eval("document.all." + currMenu + ".style")
if (thisMenu.display == "block") {
thisMenu.display = "none"
}
else {
thisMenu.display = "block"
}
return false
}
else {
return true
}
}

// End hiding script -->
</SCRIPT>
<STYLE TYPE="TEXT/CSS">
#menu1 {display:none; margin-left:20px}
#menu2 {display:none; margin-left:20px}
#menu3 {display:none; margin-left:20px}
</STYLE>
</HEAD>
<BODY BGCOLOR=WHITE>
<H1>Shakespeare's Plays</H1>
<H3>
<A HREF="page1.html" onClick="return toggleMenu('menu1')">Comedies</A>
</H3>
<SPAN ID="menu1">
All's Well That Ends Well<BR>
As You Like It<BR>
Love's Labour's Lost<BR>
The Comedy of Errors
</SPAN>
<H3>
<A HREF="page2.html" onClick="return toggleMenu('menu2')">Tragedies</A>
</H3>
<SPAN ID="menu2">
Anthony &amp; Cleopatra<BR>
Hamlet<BR>
Romeo &amp; Juliet
</SPAN>
<H3>
<A HREF="page3.html" onClick="return toggleMenu('menu3')">Histories</A>
</H3>
<SPAN ID="menu3">
Henry IV, Part 1<BR>
Henry IV, Part 2
</SPAN>
</BODY>
</HTML>


Good luck
ps Always make a second way for the user to link in case they don't have JavaScript. A few lines of text links at the bottom of the page will do.