...

View Full Version : a bunch of small dynamic menu questions



canadianjameson
07-17-2003, 04:06 PM
I'm trying to modify a solution that someone provided me for a problem i was having, but so far to no avail. the relevant code can be found at the bottom of this post

The solution provided is as follows: adding this line to the end of the refill_Select2 function.

}
window.open('options'+selected+'_specs.html','win','toolbar=0,width=575,height=200')
}

Questions:
-------------
- how do i change the popup windows X & Y position? i want to have it pop up in a certain place on the screen.

- i was wondering how to modify the
window.open('options'+selected+'_specs.htm','win','toolbar=0,width=575,height=200') code to only activate when a user has put their cursor into a specific textbox down in the form "i.e tabIndex 13" or something like that. if not atleast how to make it do an "onChange", because right now it opens up a window when the page loads due to the "onLoad="refill"" function... and whenever a company is selected it loads another window for the first product of the company... so i have to modify this.


on a semi unrelated point, i have another small problem. in the code in the first post, you see in the body tag a onLoad="refill_Select2('alpha')"
but i realised that this only refills the second menu, leaving the first one (Select1) with whatever values it had in it.

i really hope to be be able to modify the code to something like this:
onLoad="refill_Select2('alpha');refill_Select1('OptionA')".
alas, i know not how

any ideas?

hehe, oh yeah. i realised that in the window.open('options'+selected+'_specs.htm','win','toolbar=0,width=575,height=200') code there may be a small dilema: most of the options i'm displaying are product names, and they are like this:

Company: Widgets
Products: Big bad blue balloons
Chillie Chicken fries

etc...

so how can i name a file "big bad blue balloons_specs.htm"?

if i can let me know by all means, or if i can give the product "big bad blue ballons" some sort of alias like "big bad blue ballons {hide= alias:bbbb}" and then link to bbbb_specs.htm.

i dont know... maybe i just confused the issue...

------------------- Relevant Code -----------------------------

<HTML><HEAD><TITLE>Populating Options</TITLE>
<SCRIPT language=JavaScript type=text/JavaScript>
<!--

// select 2 option values
var alpha_Array = new Array("Abacus","Abduct","Abided","Ablaze","Adapt");
var bravo_Array = new Array("Babies","Backup","Baffle","Bakery");
var charlie_Array = new Array("Cabled","Caches","Cactus");
var delta_Array = new Array("Dabble","Dainty");

function refill_select2(selected) {
form_name=document.forms["feedback"]
var selectedArray = eval(selected + "_Array");
while (selectedArray.length < form_name.select2.options.length) {
form_name.select2.options[(form_name.select2.options.length - 1)] = null;
}
for (var i=0; i < selectedArray.length; i++) {
eval("form_name.select2.options[i]=" + "new Option('" + selectedArray[i]+"')");
}
window.open('options'+selected+'_specs.html','win','toolbar=0,width=575,height=200')
}

// End -->
</SCRIPT>
</HEAD>
<BODY onload="refill_select2('alpha')"><h1>Populating options</h1>
<center>
<FORM name="feedback">

<SELECT name="select1" onChange="refill_select2(this.form.select1.options[this.form.select1.selectedIndex].value)" size="1" style="width:100">
<option value="alpha">Options A</option>
<option value="bravo">Options B</option>
<option value="charlie">Options C</option>
<option value="delta">Options D</option>

</SELECT>

<SELECT name="select2" onChange="" size="1" style="width:100">
<!-- option value=""><-----------</option -->
</SELECT>
</center>
</BODY>
</HTML>

arnyinc
07-17-2003, 07:25 PM
You can change the position of the popup window by using "left" and "top".

window.open('options'+selected+'_specs.html','win','toolbar=0,width=575,height=200, left=10, top=100')

When do you want the popup window to show up? Do you want it to show up when the page loads? Do you want it to show up when someone changes a select box? Are you planning to add a text box in?

canadianjameson
07-17-2003, 08:54 PM
i would like it to pup up when a user selects an option from the second menu box.

as in:
Select Company: "they choose"
Select Product: list changes based on what they chose. once they make the choice here, a questionaire pops up that is related to that specific product

thx for the positioning responce. last question: how do i make the popup window appear with no status bar?

thanks alot
-- Jay

canadianjameson
07-21-2003, 03:56 PM
any ideas guys?

Mr J
07-22-2003, 08:38 PM
Try this amended version



<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<SCRIPT language="JavaScript">
<!--
var options= new Array()

var A_menu = new Array("Abacus","Abduct","Abided","Ablaze","Adapt");
options[0]=new Array("A counting frame or table","To take away by fraud or violence","To wait for, endure, tolerate","On fire","To make fit, accomodate");

var B_menu = new Array("Babble","Badge","Baffle","Bake");
options[1]=new Array("To speak like a baby","A distinguishing mark or emblem","To bewilder, a device for regulating the flow of liquids or gas","To cook by heat");

var C_menu = new Array("Cable","Cache","Cactus");
options[2]=new Array("A strong rope or chain","A hiding place for treasure or stores","A prickly plant");

var D_menu = new Array("Dally","Declare");
options[3]=new Array("To lose time by idleness","To make known, to assert");

var Pages = new Array("Big Bad Blue Balloons","Page 2","Page 3","Page 4","Page 5","Page 6");
options[4]=new Array("bbbb_specs.htm","page2.htm","page3.htm","page4.htm","page5.htm","page6.htm");

function init(){
form_name=document.forms["my_form"]
form_name.menu1.selectedIndex=0
fill_menu2('A_menu')
}

function fill_menu2(selected) {
form_name.menu2.style.visibility="visible"
var selectedArray = eval(selected);
while (selectedArray.length < form_name.menu2.options.length) {
form_name.menu2.options[(form_name.menu2.options.length - 1)] = null;
}
for (var i=0; i < selectedArray.length; i++) {
form_name.menu2.options[i]=new Option(selectedArray[i]);
}
}

function display_result() {
menu1_index=form_name.menu1.selectedIndex // index of selection in menu1
menu2_index=form_name.menu2.selectedIndex // index of selection in menu2

if (options[menu1_index][menu2_index].indexOf("htm") == -1){ // if not loading a page
document.getElementById("display").innerHTML=options[menu1_index][menu2_index];// for displaying text use the following line
}
else{
document.getElementById("display").innerHTML=""
/*
There are 2 options when displaying a new page, using a new window or replacing the current page.
Comment out one of the lines below for the method you don't want.
This is current set to load a page into a new window
*/
window.open(options[menu1_index][menu2_index],'','width=200,height=200,left=250,top=150') // new window
//document.location=options[menu1_index][menu2_index]; // replace current page
}

}

// add onload="init()" to the opening BODY tag

// -->
</SCRIPT>

</HEAD>
<BODY onload="init()">
<FORM name="my_form">
<SELECT name="menu1" onChange="fill_menu2(this.form.menu1.options[this.form.menu1.selectedIndex].value)" size="6" style="width:100">
<option value="A_menu">A menu</option>
<option value="B_menu">B menu</option>
<option value="C_menu">C menu</option>
<option value="D_menu">D menu</option>
<option value="Pages">Load a Page</option> </SELECT>


<SELECT name="menu2" onChange="display_result()" size="6" style="width:150">
<option></option>
</SELECT>


<div id="display">Display</div>



</BODY>
</HTML>

canadianjameson
07-22-2003, 09:07 PM
thank you for the updated script Mr. J, unfortunantly i have already majorly configured your first script so unless i am unable to further format your first one, i am going to simply copy the ammended on for future use.

my question about the refill on both menu's still stands, also i've configured a neat popup window to occur inside the script: i'll post my entire edited script so you can see what i've done / possibly help me configure it further

at this point it work, if possible i'd like to know how to make a var name two words (i.s var "Precision Digital"_Array = new array) but for now i have to use PrcesionDigital. any ideas?

its a buttload of code, but it may prove usefull. Danne helped me with the isPopup function

-----
</script>

<SCRIPT language=JavaScript type=text/JavaScript>
<!--
<!--

// select 2 option values
var optns = {
Start:{isPopup:false},
Null:{isPopup:false},
Celtek:{isPopup:true},
Delphian:{isPopup:true},
Greyline:{isPopup:true},
Intempco:{isPopup:true},
ITSnull:{isPopup:false},
Babbitt:{isPopup:true},
Eurotron:{isPopup:true},
GP50:{isPopup:true},
Smar:{isPopup:true},
TriFlo:{isPopup:true},
Turbo:{isPopup:true},
Multifor:{isPopup:true},
Scaletron:{isPopup:true},
SivaNull:{isPopup:false},
Chino:{isPopup:true},
Delta:{isPopup:true},
Fujo:{isPopup:true},
HayesCleveland:{isPopup:true},
Indumart:{isPopup:true},
KBV:{isPopup:true},
Reigl:{isPopup:true},
Siva:{isPopup:true},
MiscNull:{isPopup:false},
Bebco:{isPopup:true},
HaxPneumatics:{isPopup:true},
PrecisionDigital:{isPopup:true},
Reimelt:{isPopup:true}

};

var Start_Array = new Array("Then choose a corresponding product");
var Null_Array = new Array("");
var Celtek_Array = new Array("Phase Tracking","continuous level monitoring (Dry and Liquids)","Load Cells","Yo-Yo\\'s");
var Delphian_Array = new Array("Gas detectors and monitors","Parking garage gas monitors","toxic and combustible gas detectors and transmitters");
var Greyline_Array = new Array("Ultrasonic Level Transmitters and Switches","Doppler Flow Meters","Open Channel Flow Moniors","Pump Station Level Control","Ultrasonic Tank Farm","Level Systems","Transit Time flow meters","Variable Area flow meters");
var Intempco_Array = new Array("Temperature sensors (RTD\\'s, Thermocouples, Thermowells)","Temperature transmitters; wire and connectors","RF Capacitance Level Switch and continuous probes","Humidity Sensors and Controllers, Wet bulb/Dry bulb","Data Acquisition","High Temperature Vacuum Oven");
var ITSnull_Array = new Array("");
var Babbit_Array = new Array("RF and Ultrasound Level switches","Broken Bag Detectors");
var Eurotron_Array = new Array("Calibrators (for Tc, RTD, ohms, mV, mA, V)","Combustion gas analyzers","Sample conditioners","Infrared thermometers");
var GP50_Array = new Array("Plastic melt pressure and temperature transducers and transmitters");
var Smar_Array = new Array("Temperature and pressure transmitters (4/20+Hart+FIELDBUS), PLCs");
var TriFlo_Array = new Array("Orface plates and flanges","Flow Tubes","Mag and Turbine meters");
var Turbo_Array = new Array("Mag Flow sensors and converters");
var Multifor_Array = new Array("Circuit board manufacturing - prototypes and small quantities. -> Fast delivery.","Thru-hole to surface mount conversion. Assembly available");
var Scaletron_Array = new Array("Silo weighing - load cells and strain guages","Batch control systems for dry bulk and liquid mixtures","RadarTron microwave moisture sensor for granular materials","Avanti concrete mixer","Crane Scales","Pallet Scales","Counting Scales");
var SivaNull_Array = new Array("");
var Chino_Array = new Array("Analog and hybrid temperature recorders and controllers","Radiation Thermometers");
var Delta_Array = new Array("Emission monitors","Dewpoint","Calorimeters","On-Line Liquid Analyzers");
var Fuji_Array = new Array("Transit time flow meters - fixed and portable","Chart recorders","Controllers");
var HayesClevland_Array = new Array("Programmable Controllers and Loop Controllers");
var Indumart_Array = new Array("Pressure gauges and transmitters","Thermometers","Signal conditioning","Pneumatic controller and recorder","Bar graph indicators with relays and RS-232 and 4-20mA retransmitters. ");
var KBV_Array = new Array("Opacity meters for stack gas applications");
var Reigl_Array = new Array("Laser distance sensors","2D & 3D Scanners");
var Siva_Array = new Array("Valve manifolds:","-> 1 to 5 valve","-> Needle","-> Ball and gauge manifolds","-> Headers","-> etc.");
var MiscNull_Array = new Array("");
var Bebco_Array = new Array("Enclosure Protection Systems","Building Pressurization Systems","Purged Industrial Shelters","Wall Mounted Air Conditioning");
var HaxPneumatics_Array = new Array("Dry bulk flow controllers","Gain-in-Weight and Loss-in-Weight feeders","Non contact Motion Meter");
var PrecisionDigital_Array = new Array("Digital Panel Meters - Universal Process Meter","mV Meter","Flow totalizer & Tachometer/Rate Meter","Loop-powered meters","4 Point annunciator");
var Reimelt_Array = new Array("Silos","Discharge systems","Bagging equipment","Conveying, Metering, Grinding, Shifting, and Weighing equipment","Automation");

function refill_Product(selected) {
form_name=document.forms["productchoice"]
var selectedArray = eval(selected + "_Array");
while (selectedArray.length < form_name.Product.options.length) {
form_name.Product.options[(form_name.Product.options.length - 1)] = null;
}
for (var i=0; i < selectedArray.length; i++) {
eval("form_name.Product.options[i]=" + "new Option('" + selectedArray[i]+"')");
}
if (optns[selected].isPopup) {
window.open('options'+selected+'_specs.html','win','toolbar=0,width=575,height=200,top=0,left=0')
} else {
//
}
}
// End -->
<body onload="refill_Product('Start')">

<select name="Producer" onChange="refill_Product(this.form.Producer.options[this.form.Producer.selectedIndex].value)" size="1" style="width:200" tabindex="1">
<option value="Start">Please choose a company</option>
<option value="Null">---------------------------------------></option>
<option value="Celtek">Celtek Electronics</option>
<option value="Delphian">Delphian</option>
<option value="Greyline">Greyline</option>
<option value="Intempco">Intempco Controls</option>
<option value=ITSnull>ITS
<option value=Babbit> -> Babbit
<option value=Eurotron> -> Eurotron
<option value=GP50> -> GP50
<option value=Smar> -> Smar
<option value="TriFlo"> -> Tri Flo
<option value=Turbo> -> Turbo
<option value=Multifor>Multifor
<option value=Scaletron>Scaletron
<option value=SivaNull>Siva
<option value=Chino> -> Chino
<option value=Delta> -> Delta
<option value=Fuji> -> Fuji
<option value="HayesClevland"> -> Hayes Clevland
<option value=Indumart> -> Indumart
<option value=KBV> -> KBV
<option value=Siva> -> Siva
<option value=MiscNull>Misc.
<option value=Bebco> -> Bebco
<option value="HaxPneumatics"> -> Hax Pneumatics
<option value="PrecisionDigital"> -> Precision Digital
<option value=Reimelt> -> Reimelt
</select>
</td></tr>
<tr>
<td> <div align="left">
<select name="Product" onChange="" size="1" style="width:450" tabindex="2">
<!-- option value=""><-----------</option -->
</select>

Mr J
07-23-2003, 12:58 AM
Here's what I have so far with the information from your last post.

For now only the first option in the second select box opens a new window with the respective file.




<HTML><HEAD><TITLE>Populating Options</TITLE>
<SCRIPT language="JavaScript">
<!--
var options= new Array()

var Start = new Array("Then choose a corresponding product");
options[0]=new Array("")

var oNull = new Array("");
options[1]=new Array("")

var Celtek = new Array("Phase Tracking","continuous level monitoring (Dry and Liquids)","Load Cells","Yo-Yo\'s");
options[2]=new Array("Celtek_spec.html","","","")

var Delphian = new Array("Gas detectors and monitors","Parking garage gas monitors","toxic and combustible gas detectors and transmitters");
options[3]=new Array("Delphian_spec.html","","")

var Greyline = new Array("Ultrasonic Level Transmitters and Switches","Doppler Flow Meters","Open Channel Flow Moniors","Pump Station Level Control","Ultrasonic Tank Farm","Level Systems","Transit Time flow meters","Variable Area flow meters");
options[4]=new Array("Greyline_spec.html","","","","","","","")

var Intempco = new Array("Temperature sensors (RTD\'s, Thermocouples, Thermowells)","Temperature transmitters; wire and connectors","RF Capacitance Level Switch and continuous probes","Humidity Sensors and Controllers, Wet bulb/Dry bulb","Data Acquisition","High Temperature Vacuum Oven");
options[5]=new Array("Intempco_spec.html","","","","","")

var ITSnull = new Array("");
options[6]=new Array("") // no file

var Babbit = new Array("RF and Ultrasound Level switches","Broken Bag Detectors");
options[7]=new Array("Babbitt_spec.html","")

var Eurotron = new Array("Calibrators (for Tc, RTD, ohms, mV, mA, V)","Combustion gas analyzers","Sample conditioners","Infrared thermometers");
options[8]=new Array("Eurotron_spec.html","","","")

var GP50 = new Array("Plastic melt pressure and temperature transducers and transmitters");
options[9]=new Array("GP50_spec.html")

var Smar = new Array("Temperature and pressure transmitters (4/20+Hart+FIELDBUS), PLCs");
options[10]=new Array("Smar_spec.html")

var TriFlo = new Array("Orface plates and flanges","Flow Tubes","Mag and Turbine meters");
options[11]=new Array("TriFlo_spec.html","","")

var Turbo = new Array("Mag Flow sensors and converters");
options[12]=new Array("Turbo_spec.html")

var Multifor = new Array("Circuit board manufacturing - prototypes and small quantities. -> Fast delivery.","Thru-hole to surface mount conversion. Assembly available");
options[13]=new Array("Multifor_spec.html","")

var Scaletron = new Array("Silo weighing - load cells and strain guages","Batch control systems for dry bulk and liquid mixtures","RadarTron microwave moisture sensor for granular materials","Avanti concrete mixer","Crane Scales","Pallet Scales","Counting Scales");
options[14]=new Array("Scaletron_spec.html","","","","","","")

var SivaNull = new Array("");
options[15]=new Array("") // no file

var Chino = new Array("Analog and hybrid temperature recorders and controllers","Radiation Thermometers");
options[16]=new Array("Chino_spec.html","")

var Delta = new Array("Emission monitors","Dewpoint","Calorimeters","On-Line Liquid Analyzers");
options[17]=new Array("Delta_spec.html","","","")

var Fuji = new Array("Transit time flow meters - fixed and portable","Chart recorders","Controllers");
options[18]=new Array("Fujo_spec.html","","")

var HayesClevland = new Array("Programmable Controllers and Loop Controllers");
options[19]=new Array("HayesCleveland_spec.html")

var Indumart = new Array("Pressure gauges and transmitters","Thermometers","Signal conditioning","Pneumatic controller and recorder","Bar graph indicators with relays and RS-232 and 4-20mA retransmitters. ");
options[20]=new Array("Indumart_spec.html","","","","")

var KBV = new Array("Opacity meters for stack gas applications");
options[21]=new Array("KBV_spec.html")

var Reigl = new Array("Laser distance sensors","2D & 3D Scanners");
options[22]=new Array("Reigl_spec.html","")

var Siva = new Array("Valve manifolds:","-> 1 to 5 valve","-> Needle","-> Ball and gauge manifolds","-> Headers","-> etc.");
options[23]=new Array("Siva_spec.html","","","","","")

var MiscNull = new Array("");
options[24]=new Array("") // no file

var Bebco = new Array("Enclosure Protection Systems","Building Pressurization Systems","Purged Industrial Shelters","Wall Mounted Air Conditioning");
options[25]=new Array("Bebco_spec.html","","","")

var HaxPneumatics = new Array("Dry bulk flow controllers","Gain-in-Weight and Loss-in-Weight feeders","Non contact Motion Meter");
options[26]=new Array("HaxPneumatics_spec.html","","")

var PrecisionDigital = new Array("Digital Panel Meters - Universal Process Meter","mV Meter","Flow totalizer & Tachometer/Rate Meter","Loop-powered meters","4 Point annunciator");
options[27]=new Array("PrecisionDigital_spec.html","","","","")

var Reimelt = new Array("Silos","Discharge systems","Bagging equipment","Conveying, Metering, Grinding, Shifting, and Weighing equipment","Automation");
options[28]=new Array("Reimelt_spec.html","","","","")

function init(){
form_name=document.forms["productchoice"]
form_name.Producer.selectedIndex=0
refill_Product('Start')
}

function refill_Product(selected) {
form_name.Product.style.visibility="visible"
var selectedArray = eval(selected);
while (selectedArray.length < form_name.Product.options.length) {
form_name.Product.options[(form_name.Product.options.length - 1)] = null;
}
for (var i=0; i < selectedArray.length; i++) {
form_name.Product.options[i]=new Option(selectedArray[i]);
}
}

function display_result() {
menu1_index=form_name.Producer.selectedIndex // index of selection in menu1
menu2_index=form_name.Product.selectedIndex // index of selection in menu2
if (options[menu1_index][menu2_index].indexOf("htm") == -1){ // if not loading a page
//document.getElementById("display").innerHTML=options[menu1_index][menu2_index];// for displaying text use the following line
}
else{
//document.getElementById("display").innerHTML=""
/*
There are 2 options when displaying a new page, using a new window or replacing the current page.
Comment out one of the lines below for the method you don't want.
This is current set to load a page into a new window
*/
window.open(options[menu1_index][menu2_index],'','width=200,height=200,left=250,top=150') // new window
//document.location=options[menu1_index][menu2_index]; // replace current page
}

}

// add onload="init()" to the opening BODY tag

// -->
</SCRIPT>
</HEAD>
<BODY onload="init()"><h1>Populating options</h1>

<form name="productchoice">
<select name="Producer" onChange="refill_Product(this.form.Producer.options[this.form.Producer.selectedIndex].value)" size="5" style="width:200" tabindex="1">
<option value="Start">Please choose a company</option>
<option value="oNull">---------------------------------------></option>
<option value="Celtek">Celtek Electronics</option>
<option value="Delphian">Delphian</option>
<option value="Greyline">Greyline</option>
<option value="Intempco">Intempco Controls</option>
<option value="ITSnull">ITS
<option value="Babbit"> -> Babbit
<option value="Eurotron"> -> Eurotron
<option value="GP50"> -> GP50
<option value="Smar"> -> Smar
<option value="TriFlo"> -> Tri Flo
<option value="Turbo"> -> Turbo
<option value="Multifor">Multifor
<option value="Scaletron">Scaletron
<option value="SivaNull">Siva
<option value="Chino"> -> Chino
<option value="Delta"> -> Delta
<option value="Fuji"> -> Fuji
<option value="HayesClevland"> -> Hayes Clevland
<option value="Indumart"> -> Indumart
<option value="KBV"> -> KBV
<option value="Reigl"> Reigl
<option value="Siva"> -> Siva
<option value="MiscNull">Misc.
<option value="Bebco"> -> Bebco
<option value="HaxPneumatics"> -> Hax Pneumatics
<option value="PrecisionDigital"> -> Precision Digital
<option value="Reimelt"> -> Reimelt
</select>

<SELECT name="Product" onChange="display_result()" size="5" style="width:300">
<option></option>
</SELECT>


<!--div id="display">Display</div-->


</BODY>
</HTML>

Mr J
07-23-2003, 01:00 AM
Just in case the above did not render correctly in this forum here's the file I worked on



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum