PDA

Click to See Complete Forum and Search --> : 2 double drops same page

sol8air
01-14-2003, 06:48 PM
OK I have selected this really easily configurable menu code, but I can't figure what I need to do to use 2 (or more) on a page. (I figured out how to make many single drop menus work by naming them, but this one is a little more complex). It's a BEAUTIFUL code and I know there's a way to identify each menu separately, I just don't know where to start.
Here are the codes for the two menus I want to use:
=======
Menu 1 U.S. Ski sites:
------------
<html>
<head>
<title>Dynamic Select Menus</title>
<SCRIPT language="javascript">
<!-- hide jscript from old browsers ---

function refresh_screen()
{
window.location.reload()
}
/****** this object holds all of the key data **********/
function Link(name, url)
{
this.name = name;
this.title = new Array();
this.url = new Array();
}
/**************************************************************/
var names = new Array ();
var temp = new Array ();
var temp2 = new Array ();
var link = new Link ();
var final_list = new Array ();
/******** array declaration... it holds all of the data for the menus ****/
var menu = new Array (
"Colorado*http://skitravelweb.com/skius/aspenx.html|Aspen#" +
"http://skitravelweb.com/skius/breckenridgex.html|Breckenridge#" +
"http://skitravelweb.com/skius/keystonex.html|Keystone#" +
"http://skitravelweb.com/skius/coppermtx.html|Copper Mountain#" +
"http://skitravelweb.com/skius/crestedbuttex.html|Crested Butte#" +
"http://skitravelweb.com/skius/winterparkx.html|Winter Park#" +
"http://skitravelweb.com/skius/vailx.html|Vail#" +
"http://skitravelweb.com/skius/beavercrkx.html|Beaver Creek#" +
"http://skitravelweb.com/skius/snowmassx.html|Snowmass#" +
"http://skitravelweb.com/skius/purgatoryx.html|Purgatory#" +
"http://skitravelweb.com/skius/telluridex.html|Telluride#" +
"http://skitravelweb.com/skius/steamboatx.html|Steamboat",
"Nevada*http://skitravelweb.com/skius/stahoex.html|Tahoe#" +
"http://skitravelweb.com/skius/squawvlx.html|Squaw Valley",
"New York*http://skitravelweb.com/skius/newyorkx.html|Lake Placid#",
"Wyoming*http://skitravelweb.com/skius/wyomingx.html|Jackson Hole",
"New Mexico*http://skitravelweb.com/skius/newmexx.html|Taos",
"Vermont*http://skitravelweb.com/skius/stowex.html|Stowe#" +
"http://skitravelweb.com/skius/smugnotchx.html|Smugglers Notch#" +
"http://skitravelweb.com/skius/sugarbushx.html|Sugarbush#" +
"http://skitravelweb.com/skius/killingtonx.html|Killington",
"Utah*http://skitravelweb.com/skius/saltlakex.html|Salt Lake#" +
"http://skitravelweb.com/skius/snowbirdx.html|Snowbird#" +
"http://skitravelweb.com/skius/parkcityx.html|Park City");
/*****************************************************************/
function updateMenus ( what ) {
var n = what.selectedIndex;
what.form.myLinks.length = final_list[n].title.length;
for (var x = 0; x < what.form.myLinks.length; x++)
{
what.form.myLinks.options[x].text = final_list[n].title[x];
what.form.myLinks.options[x].value = final_list[n].url[x];
}
what.form.myLinks.selectedIndex = 0;
}
/**************************************************************/
function give_names ()
{
document.myForm.main.length = names.length;
document.myForm.myLinks.length = final_list[0].title.length;
for ( var i=0; i<names.length; i++ )
document.myForm.main.options[i].text = final_list[i].name;
for (var x=0; x<final_list[0].url.length; x++)
document.myForm.myLinks.options[x].value = final_list[0].url[x];
for (var x=0; x<final_list[0].title.length; x++)
document.myForm.myLinks.options[x].text = final_list[0].title[x];

}
/**************************************************************/
function createMenus () {

for ( var i=0; i < menu.length; i++ )
{
names[i] = menu[i].split("*");

link = new Link(names[i][0]);
temp[i] = names[i][1].split("#");
final_list[i] = link;
for (var x=0; x<temp[i].length; x++)
{
temp2[x] = temp[i][x].split("|");
final_list[i].url[x] = temp2[x][0];
final_list[i].title[x] = temp2[x][1];
}
}
give_names();
}

/**************************************************************/

// end jscript hiding -->
</SCRIPT>

</head>
<BODY onLoad="createMenus()">
<FORM NAME="myForm">
<INPUT TYPE="hidden" NAME="myObject" VALUE="none">
<SELECT NAME="main" size=1 onChange="updateMenus(this)">
<option>
<option>
<option>
</SELECT>

<font face="arial"><font color="000066"><font size="2">then <br>Choose Area
<SELECT NAME="myLinks" SIZE=1 >
<option>
<option>
<option>
</SELECT>
<input type=button value=go onClick=window.open(document.myForm.myLinks.options[document.myForm.myLinks.selectedIndex].value)>
</form>
</body>
</html>

=========
menu #2 European Ski Sites
--------

<html>
<head>
<title>Dynamic Select Menus</title>
<SCRIPT language="javascript">
<!-- hide jscript from old browsers ---

function refresh_screen()
{
window.location.reload()
}
/****** this object holds all of the key data **********/
function Link(name, url)
{
this.name = name;
this.title = new Array();
this.url = new Array();
}
/**************************************************************/
var names = new Array ();
var temp = new Array ();
var temp2 = new Array ();
var link = new Link ();
var final_list = new Array ();
/******** array declaration... it holds all of the data for the menus ****/
var menu = new Array (
"France*http://skitravelweb.com/skieurocan/chamonixx.html|Chamonix#" +
"http://skitravelweb.com/skieurocan/morzinex.htmlMorzine#" +
"http://skitravelweb.com/skieurocan/tignesx.html|Tignes#" +
"http://skitravelweb.com/skieurocan/troisvalx.html|Trois Vallees",
"Austria*http://skitravelweb.com/skieurocan/innsbruckx.html|Innsbruck#" +
"http://skitravelweb.com/skieurocan/kitzbuhelx.html|Kitzbuhel",
"Switzerland*http://skitravelweb.com/skieurocan/jungfraux.html|Jungfrau#"+
"http://skitravelweb.com/skieurocan/stmoritzx.htmlSt. Moritz",
"Italy*http://skitravelweb.com/skieurocan/cervinax.html|Cervina#"+
"http://skitravelweb.com/skieurocan/courmayeurx.html|Courmayeur#"+
"http://skitravelweb.com/skieurocan/bormiox.html|Bormio",
"Germany*http://skitravelweb.com/skieurocan/germanyx.html|Garmisch");

/*****************************************************************/
function updateMenus ( what ) {
var n = what.selectedIndex;
what.form.myLinks.length = final_list[n].title.length;
for (var x = 0; x < what.form.myLinks.length; x++)
{
what.form.myLinks.options[x].text = final_list[n].title[x];
what.form.myLinks.options[x].value = final_list[n].url[x];
}
what.form.myLinks.selectedIndex = 0;
}
/**************************************************************/
function give_names ()
{
document.myForm.main.length = names.length;
document.myForm.myLinks.length = final_list[0].title.length;
for ( var i=0; i<names.length; i++ )
document.myForm.main.options[i].text = final_list[i].name;
for (var x=0; x<final_list[0].url.length; x++)
document.myForm.myLinks.options[x].value = final_list[0].url[x];
for (var x=0; x<final_list[0].title.length; x++)
document.myForm.myLinks.options[x].text = final_list[0].title[x];

}
/**************************************************************/
function createMenus () {

for ( var i=0; i < menu.length; i++ )
{
names[i] = menu[i].split("*");

link = new Link(names[i][0]);
temp[i] = names[i][1].split("#");
final_list[i] = link;
for (var x=0; x<temp[i].length; x++)
{
temp2[x] = temp[i][x].split("|");
final_list[i].url[x] = temp2[x][0];
final_list[i].title[x] = temp2[x][1];
}
}
give_names();
}

/**************************************************************/

// end jscript hiding -->
</SCRIPT>

</head>
<BODY onLoad="createMenus()">
<FORM NAME="myForm">
<INPUT TYPE="hidden" NAME="myObject" VALUE="none">
<SELECT NAME="main" size=1 onChange="updateMenus(this)">
<option>
<option>
<option>
</SELECT>

<font face="arial"><font color="000066"><font size="2">then <br>Choose Area
<SELECT NAME="myLinks" SIZE=1 >
<option>
<option>
<option>
</SELECT>
<input type=button value=go onClick=window.open(document.myForm.myLinks.options[document.myForm.myLinks.selectedIndex].value)>
</form>
</body>
</html>
khalidali63
01-15-2003, 12:30 AM
I guess this will do it.
see attached file.

Khalid
sol8air
01-15-2003, 03:46 PM
Thank You, it's awesome! I can kind of see what you did (I'm trying to learn all this experientially), but now how can I separate them into two separate chunks of code -- with my current tool, I place each menu where ever I want in a page inside an "html object" so I can drag each one around till it's where I want it relative to the other stuff on the page.
I tried something, but it made syntax errors, so I'll play with it a little.
Late, gotta get the kid from school. Always interruptions!!
Thanks again!
kj
sol8air
01-15-2003, 05:06 PM
AH! Never mind, dumb question, I just put each table where ever I want it, and all the othe code goes up in the head (and a little snippet in the body). Awesome!

You laid it out so logically, I could extend this logic and put a hundred of these things on a page if I wanted. Now I get it! Thank you so much!
I am learning, slowly.
I love this stuff. I am by profession a nurse: there is nothing logical about bedsores and unspecified siezure disorders. The clean logic of code is so refreshing and relaxing! I'd surely rather be doing this all day :)

kj
sol8air
01-15-2003, 05:48 PM
OK, spoke too soon again. They work beautifully without other j-script on the same page, but somewhere I am messing up when it comes to applying these on the actual web page which also has a couple of single drop menus (one for general navigation and another for the Canadian ski sites)
Instead of uploading reams of code, see the two test pages -- one where the two work well together in a sterile environment, and the second on the completed page where they don't:
http://testsites.awcreations.com/test/test1x.html
http://testsites.awcreations.com/test/test2x.html