JavaScript - Modify A Double Drop Menu To A Triple
I am presently using a script provided by http://javascript.internet.com/forms...drop-down.html. This script works great, however I need three sequential drop down menus rather than the two provided in this script. I need Country > Province/State > Cities. Unfortunately I am not a programmer, but generally muddle along to a resolution. In this case I am stumped. Can anyone show me what needs to be added to that existing script to convert it into a three menu script instead of two? I've searched extensively but find nothing about this. I apologize in advance for my lack of scripting knowledge, but much of JavaScript leaves me thoroughly confused. With html I am fine, but at 69 years of age the 'newer' scripts are leaving me behind.
Similar TutorialsDear all, Below are my current script. I need another few more sets of the triple drop down menu same as the below script... (Scenario: creating like a online shopping order form, where customers can have multiple orders.) Please guide me how to do so.. Thank you in advance. <script type="text/javascript"> /* Triple Combo Script Credit By Philip M: http://www.codingforums.com/member.php?u=186 Visit http://javascriptkit.com for this and over 400+ other scripts */ var categories = []; categories["startList"] = ["Wearing Apparel","Books"] categories["Wearing Apparel"] = ["Men","Women","Children"]; categories["Books"] = ["Biography","Fiction","Nonfiction"]; categories["Men"] = ["Shirts","Ties","Belts","Hats"]; categories["Women"] = ["Blouses","Skirts","Scarves", "Hats"]; categories["Children"] = ["Shorts", "Socks", "Coats", "Nightwear"]; categories["Biography"] = ["Contemporay","Historical","Other"]; categories["Fiction"] = ["Science Fiction","Romance", "Thrillers", "Crime"]; categories["Nonfiction"] = ["How-To","Travel","Cookbooks", "Old Churches"]; var nLists = 3; // number of select lists in the set function fillSelect(currCat,currList){ var step = Number(currList.name.replace(/\D/g,"")); for (i=step; i<nLists+1; i++) { document.forms['tripleplay']['List'+i].length = 1; document.forms['tripleplay']['List'+i].selectedIndex = 0; } var nCat = categories[currCat]; for (each in nCat) { var nOption = document.createElement('option'); var nData = document.createTextNode(nCat[each]); nOption.setAttribute('value',nCat[each]); nOption.appendChild(nData); currList.appendChild(nOption); } } function getValue(L3, L2, L1) { alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3); } function init() { fillSelect('startList',document.forms['tripleplay']['List1']) } navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false); </script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <body> <form name="tripleplay" action=""> <select name='List1' onchange="fillSelect(this.value,this.form['List2'])"> <option selected>Make a selection</option> </select> <select name='List2' onchange="fillSelect(this.value,this.form['List3'])"> <option selected>Make a selection</option> </select> <select name='List3' onchange="getValue(this.value, this.form['List2'].value, this.form['List1'].value)"> <option selected >Make a selection</option> </select> </form> </body> </html> I know how to edit the CSS, and minute parts of the JavaScript code (for example; speed of the drop). The problem is, I had a massive amount of help making the Javascript side of the menu, and do not know how to edit it... I want the rules to still apply, where only one can be expanded at a time (one of the first drops, and then only one of the sub-drops). I noticed in the code, I can edit it so there can be more than one drop, but that would mean, the whole menu could be expanded Also, I want my sub-drops. to have different span colour than the main drop. but trhe links and such, (everything else about it) can be the same.... My live demo is here! Thank you for any help and/or advice in advance, Best Regards, Tim I currently have a Drop-Down menu, which has headers you click on to show the links. This menu only allows one drop to be expanded at a time, and can be viewed here. I would like the headers to be able to have 'sub-headers' inside, which also drop-down,to reveal the links. I want them to have a different header colour, and to have the same rule where only one can be open at a time. while keeping the rule with the main headers. I have previously posted asking this, and got no reply, so I would really greatly appreciate any help and/support! Best Regards, Tim (P.S. I am still only learning JavaScript, and to make the current menu I have, took loads of help for a different project) Hi. The triple drop down menu look like this: http://www.trans4mind.com/personal_d...tripleMenu.htm However, I wish there to be an add/delete button beside it, that could add new pages and sub-pages (or delete them) for the drop down module. Is there anyone here that knows the right code for the add/delete-page feature. I thought I was so cool combining both this shopping cart with the double drop down menu, but now my menu isnt working and I can't seem to trouble shoot my way through it anymore. I am sure I am missing just one small part because the page loads fine, but when I select an option from step three where it says "select a subject" it no longer loads the options into the subsequent drop down menu which reads "Pages appear here" (LoL at least I WISH they would appear there) Here is the code. I apologize for not making it smaller, but as I mentioned it is meshed with a shopping cart and I am not skilled enough to seperate my code. Code: <head> <script language="javascript"> <!--// //new Option("text","value") //this code changes menus function nullOptionsDMA(aMenu){ var tot=aMenu.options.length for (i=0;i<tot;i++) { aMenu.options[i]=null } aMenu.options.length=0; } function MySubjectDMA0(aMenu){ nullOptionsDMA(aMenu) with (aMenu){ //Rewrites the text and values options[0]=new Option("Select a page","295"); options[1]=new Option("Drink Low/No Alcohol Beer","295"); options[2]=new Option("Drink Mixed Drinks","295"); options[3]=new Option("Buy Chewing Tobacco","295"); options[0].selected=true } } function MySubjectDMA1(aMenu){ nullOptionsDMA(aMenu) with (aMenu){ //Rewrites the text and values options[0]=new Option("Select a page","295"); options[1]=new Option("Buy Fine Jewelry,<$400","295"); options[2]=new Option("Buy Aerobic/Fitness Shoes, $50+","295"); options[3]=new Option("Dry Cleaning,$100+","295"); options[0].selected=true } } function MySubjectDMA2(aMenu){ nullOptionsDMA(aMenu) with (aMenu){ //Rewrites the text and values options[0]=new Option("Select a page","295"); options[1]=new Option("Lease Most Recent Vehicle","295"); options[2]=new Option("Own/Lease New Vehicle","295"); options[3]=new Option("Own/Lease Used Vehicle","295"); options[0].selected=true } } function MySubjectDMA3(aMenu){ nullOptionsDMA(aMenu) with (aMenu){ //Rewrites the text and values options[0]=new Option("Select a page","295"); options[1]=new Option("Has Satellite Dish","295"); options[2]=new Option("Watch Any Pay-per-View","100"); options[0].selected=true } } function MySubjectDMA4(aMenu){ nullOptionsDMA(aMenu) with (aMenu){ //Rewrites the text and values options[0]=new Option("Select a page","295"); options[1]=new Option("Own Camcorder","295"); options[2]=new Option("Buy Any TV","295"); options[3]=new Option("Own 3+ Television Sets","295"); options[0].selected=true } } function MySubjectDMA5(aMenu){ nullOptionsDMA(aMenu) with (aMenu){ //Rewrites the text and values options[0]=new Option("Select a page","295"); options[1]=new Option("Has Any Homeowner/Per Pr Insurance","295"); options[2]=new Option("Has Auto","295"); options[3]=new Option("Has Disability Insurance","295"); options[0].selected=true } } function MySubjectDMA6(aMenu){ nullOptionsDMA(aMenu) with (aMenu){ //Rewrites the text and values options[0]=new Option("Select a page","295"); options[1]=new Option("Grocery Shop,4+ Times 1wk","295"); options[2]=new Option("Grocery Store, Travel 11+ Miles ","295"); options[0].selected=true } } function MySubjectDMA7(aMenu){ nullOptionsDMA(aMenu) with (aMenu){ //Rewrites the text and values options[0]=new Option("Select a page","295"); options[1]=new Option("Buy Health/Beauty Products for Women,$100+","295"); options[2]=new Option("Go to the Doctor for Check-Ups","295"); options[3]=new Option("Use Hair Growth Products","295"); options[0].selected=true } } function MySubjectDMA8(aMenu){ nullOptionsDMA(aMenu) with (aMenu){ //Rewrites the text and values options[0]=new Option("Select a page","295"); options[1]=new Option("Buy from Fast Food","295"); options[2]=new Option("Dine Out,1+ Times/wk","295"); options[3]=new Option("Dine Out,<1 Times/mo","295"); options[0].selected=true } } function MySubjectDMA9(aMenu){ nullOptionsDMA(aMenu) with (aMenu){ //Rewrites the text and values options[0]=new Option("Select a page","295"); options[1]=new Option("Belong to a Church Board ","295"); options[2]=new Option("Belong to a Country Club ","100"); options[3]=new Option("Buy Any Children's Toys","295"); options[0].selected=true } } function MySubjectDMA10(aMenu){ nullOptionsDMA(aMenu) with (aMenu){ //Rewrites the text and values options[0]=new Option("Select a page","295"); options[1]=new Option("Average Monthly Cell Phone Bill,$100+","295"); options[2]=new Option("Own Cell Phone ","295"); options[3]=new Option("Has Cell Phone for Business Use ","295"); options[0].selected=true } } function MySubjectDMA11(aMenu){ nullOptionsDMA(aMenu) with (aMenu){ //Rewrites the text and values options[0]=new Option("Select a page","0"); options[1]=new Option("Ads Keep Me Up-to-Date about Prods/Svcs I Want","295"); options[2]=new Option("Buy Based on Quality, Not Price","295"); options[3]=new Option("Choose Store b/c Store Personnel Service","295"); options[0].selected=true } } function MySubjectDMA12(aMenu){ nullOptionsDMA(aMenu) with (aMenu){ //Rewrites the text and values options[0]=new Option("Select a page","1650"); options[1]=new Option("Has Cooling Equipment, Heat Pump","1650"); options[2]=new Option("Has Heater System, Central Warm","1650"); options[3]=new Option("Has Heater System, Heat Pump ","1650"); options[0].selected=true } } function MySubjectDMA13(aMenu){ nullOptionsDMA(aMenu) with (aMenu){ //Rewrites the text and values options[0]=new Option("Select a page","1650"); options[1]=new Option("Has Online Game Download Sub","1650"); options[2]=new Option("Has Online Movie Download Sub","1650"); options[3]=new Option("Has Online","1650"); options[0].selected=true } } /* ####################### setUp100 ####################### */ function setUpDMA(){ with (document.orderform) { if (menuSubjectsDMA.selectedIndex==0){ menuSubjectsDMA.options[0].selected=true qty4.options[0].selected=true } if (menuSubjectsDMA.selectedIndex==1) MySubjectDMA0(qty4) if (menuSubjectsDMA.selectedIndex==2) MySubjectDMA1(qty4) if (menuSubjectsDMA.selectedIndex==3) MySubjectDMA2(qty4) if (menuSubjectsDMA.selectedIndex==4) MySubjectDMA3(qty4) if (menuSubjectsDMA.selectedIndex==5) MySubjectDMA4(qty4) if (menuSubjectsDMA.selectedIndex==6) MySubjectDMA5(qty4) if (menuSubjectsDMA.selectedIndex==7) MySubjectDMA6(qty4) if (menuSubjectsDMA.selectedIndex==8) MySubjectDMA7(qty4) if (menuSubjectsDMA.selectedIndex==9) MySubjectDMA8(qty4) if (menuSubjectsDMA.selectedIndex==10) MySubjectDMA9(qty4) if (menuSubjectsDMA.selectedIndex==11) MySubjectDMA10(qty4) if (menuSubjectsDMA.selectedIndex==12) MySubjectDMA11(qty4) if (menuSubjectsDMA.selectedIndex==13) MySubjectDMA12(qty4) if (menuSubjectsDMA.selectedIndex==14) MySubjectDMA13(qty4) } } /* ####################### changeFiles ####################### */ function changeFilesDMA(){ aMenu=document.orderform.menuSubjectsDMA aMenu2=document.orderform.qty4 with (aMenu){ switch (selectedIndex) { case 0: aMenu2.options.length=0; aMenu2.options[0]= new Option("Pages appear here","0") aMenu2.options[0].selected=true; history.go(0) break case 1: MySubjectDMA0(aMenu2) aMenu2.options[0].text="Drink Any Beer" break case 2: MySubjectDMA1(aMenu2) aMenu2.options[0].text="Buy Costume Jewelry" break case 3: MySubjectDMA2(aMenu2) aMenu2.options[0].text="Bought Most Recent Vehicle" break case 4: MySubjectDMA3(aMenu2) aMenu2.options[0].text="Subscribe to Cable TV" break case 5: MySubjectDMA4(aMenu2) aMenu2.options[0].text="Buy Camera" break case 6: MySubjectDMA5(aMenu2) aMenu2.options[0].text="Has Any Credit Card" break case 7: MySubjectDMA6(aMenu2) aMenu2.options[0].text="Grocery Shopping spend $150+ 1wk" break case 8: MySubjectDMA7(aMenu2) aMenu2.options[0].text="Buy Health/Beauty Products for Men,$100+" break case 9: MySubjectDMA8(aMenu2) aMenu2.options[0].text="Buy from Any Fast Food Restaurant" break case 10: MySubjectDMA9(aMenu2) aMenu2.options[0].text="Attend Classical/Opera perform.,1+ Times/mo" break case 11: MySubjectDMA10(aMenu2) aMenu2.options[0].text="Average Monthly Cell Phone Bill,<$26" break case 12: MySubjectDMA11(aMenu2) aMenu2.options[0].text="Ads Are More Manipulative Than Informative100" break case 13: MySubjectDMA12(aMenu2) aMenu2.options[0].text="Has Cooling Equipment, Central Air" break case 14: MySubjectDMA13(aMenu2) aMenu2.options[0].text="Has Wireless home network" break } } } //--> </script> <!-- ######## end copying code (DMA) from the HEAD ####### --> <script> <!-- function wopen(url, name, w, h) { // Fudge factors for window decoration space. // In my tests these work well on all platforms & browsers. w += 32; h += 96; var win = window.open(url, name, 'width=' + w + ', height=' + h + ', ' + 'location=no, menubar=no, ' + 'status=no, toolbar=no, scrollbars=no, resizable=no'); win.resizeTo(w, h); win.focus(); } // --> </script> <SCRIPT SRC="language-en.js"></SCRIPT> <SCRIPT SRC="nopcart.js"> </SCRIPT> <link rel="stylesheet" type="text/css" href="main.css"> </head> <BODY> <table class="Global" cellpadding="0" cellspacing="0" border="0"> <tr><td height="117" colspan="2"> <!-- ============ Navbar Menu ============== --> <table class="NavBar" style="height: 27px;" cellspacing="0" border="0"><tr><td> <table class="NavBarMenu" style="height: 27px;" align="left" border="0" cellspacing="0"><tr> <td><a href="index.html">Home</a> </td> <td><a href="samples.html">Samples</a> </td> <td><a href="ordering.html">Ordering</a> </td> <td><a href="faq.html">F.A.Q.</a> </td> <td><a href="contact.html">Contact</a></td> </tr></table> </td></tr></table> <div style="height: 1px; background: #000000;"><img src="images/space1x1.gif" width="1" height="1" alt="spacer"></div> <noscript> <p style="color:red">You appear to have Javascript disabled. This page requires Javascript. Please <a href="http://support.microsoft.com/gp/howtoscript" target="_blank">enable Javascript</a> and reload this page before continuing.</p> </noscript> <script language="JavaScript"> <!-- function CalculateTotals(){ f=document.orderform; f.total1.value=parseInt(f.qty1.value)*50; f.total2.value=parseInt(f.qty2.value)*((f.qty1.value)*10+10); f.total3.value=parseInt(f.qty3.value)*100; f.total4.value=parseInt(f.qty4.value)*1.2; f.grandtotal.value=parseInt(f.total1.value) +parseInt(f.total2.value) +parseInt(f.total3.value) +parseInt(f.total4.value) +parseInt(f.sh.value);} //--> </script></head> <body> <form name="orderform" method="post" action="formprocessor"> <table border="1" width="100%" cellpadding="4"><tr> <td colspan="2" align="center"><b>Step 1: Select what to include in your report</b><br><i>My report should...</i></td></tr> <tr><td> Evaluate a radius of <select name="qty1" onchange="CalculateTotals()"> <option Selected value="0">5 miles <option value="1">10 miles <option value="2">15 miles <option value="3">20 miles </select> around <INPUT TYPE="text" NAME="Location" VALUE="Full Address OR Zipcode" SIZE="22" MAXLENGTH="45"> </td> <td align="right"><input name="total1" size="7" OnFocus="document.orderform.qty2.select(); document.orderform.qty2.focus();" /></td></tr> <tr><td> <select name="qty2" onchange="CalculateTotals()"> <option Selected value="0">No <option value="1">Yes </select> Include competitive analysis (<a href="whatis1.html" target="popup" onClick="wopen('whatis1.html', 'popup', 350, 450); return false;">what is this?</a>) </td> <td align="right"><input name="total2" size="7" OnFocus="document.orderform.qty3.select(); document.orderform.qty3.focus();" /></td></tr> <tr><td> <select name="qty3" onchange="CalculateTotals()"> <option Selected value="0">No <option value="1">Yes </select> Include target market report (<a href="whatis2.html" target="popup" onClick="wopen('whatis2.html', 'popup', 350, 450); return false;">what is this?</a>) </td> <td align="right"><input name="total3" size="7" OnFocus="document.orderform.qty4.select(); document.orderform.qty4.focus();" /></td></tr> </table><br><table border="1" width="100%" cellpadding="4"> <tr><td colspan="4" align="center"> <b>Step 2: Define your target market</b><br><i>The people I am looking for are...</i></td></tr> <tr><td colspan="2"> Household Age</td><td colspan="2"> <select name="HHAge" onchange="CalculateTotals()"> <option Selected value="">Target Age <option value="Less than 35">Less than 35 <option value="Less than 100">Less than 55 <option value="25to44">25-44 </select> <tr><td colspan="2"> Average Household Education</td><td colspan="2"> <select name="HHEducation" onchange="CalculateTotals()"> <option Selected value="">Target Education <option value="GradPlus">Graduate Plus <option value="CollegeGrad">College Grad </select><br> <tr><td colspan="2"> Household Employment Type</td><td colspan="2"> <select name="HHEmployment" onchange="CalculateTotals()"> <option Selected value="">Target Employment <option value="Management">Management <option value="Professional">Professional </select><br> <tr><td colspan="2"> Household Ethnicity</td><td colspan="2"> <select name="HHEthnicity" onchange="CalculateTotals()"> <option Selected value="">Target Ethnicity <option value="White">White <option value="WhiteAsianMix">White, Asian, Mix </select><br> <tr><td colspan="2"> Household Composition</td><td colspan="2"> <select name="HHComposition" onchange="CalculateTotals()"> <option Selected value="">Target Age <option value="HHwithKids">Household with kids <option value="MostlywithKids">Mostly with kids </select><br> <tr><td colspan="2"> Household Income</td><td colspan="2"> <select name="HHIncome" onchange="CalculateTotals()"> <option Selected value="">Target Income <option value="Wealthy">Wealthy <option value="Upscale">Upscale <option value="UpperMiddle">Upper Middle <option value="Middle">Middle <option value="LowerMid">Lower Middle </select><br> <tr><td colspan="2"> Household Tenure</td><td colspan="2"> <select name="HHTenure" onchange="CalculateTotals()"> <option Selected value="">Target Tenure <option value="Homeowners">Homeowners <option value="Renters">Renters </select><br> </td></tr> </table><br><table border="1" width="100%" cellpadding="4"> <tr><td colspan="4" align="center"><b>Step 3: Add a specialty targeting criteria</b><br><i>I want people who...</i></td></tr><tr></td> <tr><td> <!-- This menu holds the subjects--> <select name="menuSubjectsDMA" onChange="changeFilesDMA()" size="1"> <option value="0">Select a subject <option value="">Alcohol & Tabacco $295 <option value="">Jewelry & Apparel $295 <option value="">Automotive $295 <option value="">TV Media $295 <option value="">Electronics & Internet $295 <option value="">Finance $295 <option value="">Grocery $295 <option value="">Health & Drugs $295 <option value="">Restaurants $295 <option value="">Sports & Leisure $295 <option value="">Telecommunications $295 <option value="">Consumer Behavior $295 <option value="">Home and Utilities $1980 <option value="">Home Technology $1980 </select> </td><td colspan="2"> <!-- this menu holds the files to go--> <select name="qty4" onChange="CalculateTotals()" style="width:200" size="1"> <option value="0">Pages appear here </select> <td align="right"><input name="total4" size="7" OnFocus="document.orderform.qty1.select(); document.orderform.qty1.focus();" /></td></tr> </td></tr> </table><br> <table border="1" width="100%" cellpadding="4"> <tr><td colspan="4" align="center"><b>Step 4: Tell us about your business</b><br><i>Customize my report for...</i></td></tr> <tr><td> <td align="right">Minimum Order:</td><td align="right">$200 </td></tr> <tr><td></td><td></td> <td align="right"><b>GRAND TOTAL:</b></td> <td align="right"><input name="grandtotal" size="7" OnFocus="document.orderform.qty1.select(); document.orderform.qty1.focus();" /></td></tr> </table> <input type="hidden" value="5" name="sh" /> <br /> <center><input type="reset" value="Reset Form"> <input type="submit" value="Proceed to Checkout"> </center> </form> <script language="JavaScript"> <!-- f=document.orderform; f.qty1.value=0; f.qty2.value=0; f.qty3.value=0; f.qty4.value=0; f.total1.value=0; f.total2.value=0; f.total3.value=0; f.total4.value=0; f.sh.value=200; f.grandtotal.value=200; //--> </script> </body></html> <!-- ======= End Content ======== --> </td></tr> <!-- ======== Footer ========== --> <tr><td colspan="2" class="Footer" style="vertical-align: middle;"> Copyright © GrowthEdge </td></tr></table> </body> </html> I also check my email regularly if anyone has any comments or advice. Hello All, I am trying to create a three drop down lists for my job. The three drop downs would be: Degree Type (certificate, associate's, bachelor's, etc) Category (Arts & Humanities, Automotive, Computers & IT etc.) Program (Desktop Publishing, Automotive Technician Training, Network Systems, etc.) The Category list needs to be dependent on the degree type and the Program list needs to be dependent on the Category list. I need to have values that will submit to my form but ONLY for the Program List. For example: <option value="CECS">Cisco</option> <option value="CEIT">Information Technology (General)</option> <option value="CEMS">Microsoft</option> <option value="CENSYS">Network Systems</option> Please note that I must use these program codes as values and I cannot use the option name as the value. This does not have to look good, it just needs to work as it is for internal use only within my company. This form will never be used by random web surfers. If someone can point me to a tutorial for a good triple drop down that will pass ONLY the values of the third list, that would be great! Thanks! I tried implementing a cleaner approach to a web form I had created, but it doesn't seem to be passing the values to the server properly. What gives? This form on the left and right work perfectly, but they have two ridiculously long drop down lists, which would be the "ProgramOfInterest" fields (please use the following values preselected in this form) http://www.nationalcollegesearch.org..._pingpost.html On this form, I tried creating a triple drop down list setup to clean up the older, long lists in this example, but it doesn't pass the values properly. It also seems to not duplicate the new drop down triple drop lists properly as in the original form. You can change the values in the drop downs in the forms to see what I mean. Also just pick Bachelor's > B_Business > Business Administration in the triple drop downs for an example since I don't know how to preselect those values. http://nationalcollegesearch.org/Integrate/PleaseHelpMeWithMyCode/integrate_pingpost_experiment.html Please let me know if there is anything I can do to pass the correct values to the server. Thanks! P.S. Please note that I have disabled the form on the right and intentionally left the action empty. This is the triple drop down script I am using: Code: <script type="text/javascript"> /* Triple Combo Script Credit By Philip M: http://www.codingforums.com/member.php?u=186 Visit http://javascriptkit.com for this and over 400+ other scripts Modified by: jmrker */ var categories = []; categories["startList"] = ["Diploma/Certificate:CE","Associate's:AA","Bachelor's:BA","Master's:MA"]; categories["Diploma/Certificate"] = ["C_Arts & Humanities:CE1","C_Automotive:CE2","C_Computers & IT:CE3","C_Education & Teaching:CE4","C_Health & Medical:CE5","C_Trades & Careers:CE6"]; categories["C_Arts & Humanities"] = ["Desktop Publishing:CEDP","Floral Design:CEFD","General Arts:CEGA","Interior Decorating:CEID","Jewelry:CEJ"]; categories["C_Automotive"] = ["Automotive Technician Training:CAUTO","Collision and Auto Body Repair:CCOLL","Motorcycle Mechanic Training:CMM"]; categories["C_Computers & IT"] = ["Cisco:CECS", "Information Technology:CEIT", "Microsoft:CEMS", "Network Systems:CENSYS", "Oracle:CEOR", "PC Repair:CEPC"]; categories["C_Education & Teaching"] = ["Child Day Ca CEDC", "General Education:CEGE"]; categories["C_Health & Medical"] = ["Dental Assisting:CEDENT", "Fitness:CEFIT", "Healthca CEHC", "Massage Therapy:CMT", "Medical Assisting:CEMEA", "Medical Billing and Insurance Coding:CEMBIC", "Medical Office Administration:CEMOA", "Occupation Therapy:CEOT", "Phlebotomy:CEPHL", "Social Work:CESW"]; categories["C_Trades & Careers"] = ["Administrative Assistant:CEAA", "Animal Ca CEAC", "Appliance Repair:CEAR", "Bookkeeping and Payroll Accounting:CEBOO", "Bridal Consulting:CEBC", "Carpentry and Construction:CECC", "Culinary:CECU", "Drafting:CEDR", "Electronics:CEEL", "Forestry and Wildlife:CEFW", "Gunsmithing:CEGUN", "HVAC:CEHV", "Landscaping:CELS", "Law Enforcement:CELE", " Locksmithing:CELOCK", "Plumbing and Electrical:CEPE", "Private Investigator:CEPI", "Wedding Planner:CEWP"]; categories["Associate's"] = ["A_Arts & Humanities:AA1","A_Business:AA2","A_Criminal Justice:AA3","A_Computers & IT:AA4","A_Education & Teaching:AA5","A_Health & Medical:AA6","A_Science & Technology:AA7","A_Social Sciences:AA8","A_Trades & Careers:AA9"]; categories["A_Arts & Humanities"] = ["Communication:AACOM","Fashion:AAFASH","Game Design:AAGD","General Arts:AAGA","Graphic Design:AAGR","Religion:AAREL","Web Design:AAWD","Writing:AAWR"]; categories["A_Business"] = ["Accounting:AAAC","Administrative Assistant:AAAS","Business Administration:AABA","eBusiness and eCommerece:AAEB","Finance:AAFIN","Human Resources Management:AAHR","International Business:AAIB","Marketing:AAMAR","Organizational Leadership:AAOR","Project Management:AAPM"]; categories["A_Criminal Justice"] = ["Criminal Justice:AACJ","Homeland Security:AAHS","Law:AALAW","Legal Assisting Paralegal:AAPAR","Political Science:AAPS"]; categories["A_Computers & IT"] = ["Computer Networking and Security:AACNS","Computer Science:AACS","Databases:AADB","Information Systems:AAIS","Information Technology:AAIT","Technology Management:AATEM","Web Development:AADEV"]; categories["A_Education & Teaching"] = ["Adult and Higher Education:AAHE","Curriculum and Instruction:AACI","Early Childhood Education:AAEVE","General Education:AAGE","Special Education (K-12):AASE"]; categories["A_Health & Medical"] = ["Gerontology (Study of people as they age):AAGER","Healthca AAHLTH","Healthcare Management:AAHCM","Medical Assisting:AAMA","Medical Billing and Insurance Coding:AAMBIC","Medical Office Administration:AAMOA","Nursing:AANUR","Radiology & Sonography:AARAD"]; categories["A_Science & Technology"] = ["Aviation:AAAV","Engineering Management:AAEN","Environmental Sciences:AAENV","Science:AASCI"]; categories["A_Social Sciences"] = ["Counseling:AACOUN","History:AAHIST","Psychology:AAPSY","Public Administration:AAPA","Public Safety:AAPUBS","Social Science:AASS"]; categories["A_Trades & Careers"] = ["Animal Ca AAAC","Carpentry & Construction:AACAR","Fire and Law Enforcement:AALE","Travel and Tourism:AATR"]; categories["Bachelor's"] = ["B_Arts & Humanities:BA1","B_Business:BA2","B_Computers & IT:BA3","B_Criminal Justice:BA4","B_Education & Teaching:BA5","B_Health & Medical:BA6","B_Science & Technology:BA7","B_Social Sciences:BA9","B_Trades & Careers:BA0"]; categories["B_Arts & Humanities"] = ["Communication:BACOM","Fashion:BAFASH","Game Design:BAGD","General Arts:BAGA","Graphic Design:BAGR","Music:BAMUS","Religion:BAREL","Web Design:BAWD","Writing:BAWR"]; categories["B_Business"] = ["Accounting:BAAC","Business Administration:BABA","eBusiness and eCommerece:BAEB","Entrepreneurial Studies:BAES","Finance:BAFIN","Human Resources Management:BAHR","International Business:BAIB","Marketing:BAMAR","Organizational Leadership:BAOR","Project Management:BAPM"]; categories["B_Computers & IT"] = ["Computer Networking and Security:BACNS","Computer Science:BACS","Databases:BADB","Information Systems:BAIS","Information Technology:BAIT","Technology Management:BATM","Web Development:BADEV"]; categories["B_Criminal Justice"] = ["Criminal Justice:BACJ","Homeland Security:BAHS","Law:BALAW","Legal Assisting Paralegal:BAPAR","Political Science:BAPS"]; categories["B_Education & Teaching"] = ["Adult and Higher Education:BAHE","Curriculum and Instruction:BACI","Early Childhood Education:BAECE","General Education:BAGE","Special Education (K-12):BASE"]; categories["B_Health & Medical"] = ["Gerontology (Study of people as they age):BAGR","Healthca BAHLTH","Healthcare Management:BAHCM","Medical Assisting:BAMA","Nursing:BANUR","Radiology & Sonography:BARAD"]; categories["B_Science & Technology"] = ["Aviation:BAAV","Electronics Engineering:BAEE","Engineering Management:BAEN","Environmental Sciences:BAENV","Mathematics:BAMS","Science:BASCI"]; categories["B_Social Sciences"] = ["Counseling:BACOUN","History:BAHIST","Psychology:BAPSY","Public Administration:BAPA","Public Safety:BAPUBS","Social Science:BASS","Sociology:BASOC"]; categories["B_Trades & Careers"] = ["Fire and Law Enforcement:BALE"] categories["Master's"] = ["M_Arts & Humanities:MA1","M_Business:MA2","M_Computers & IT:MA3","M_Criminal Justice:MA4","M_Education & Teaching:MA5","M_Health & Medical:MA6","M_Science & Technology:MA7","M_Social Sciences:MA9"]; categories["M_Arts & Humanities"] = ["Communication:MACOM","Game Design:MAGD","General Arts:MAGA","Graphic Design:MAGR","Music:MAMUS","Religion:MAREL","Web Design:MAWD","Writing:MAWR"]; categories["M_Business"] = ["Accounting:MAAC","Business Administration:MBA","eBusiness and eCommerece:MAED","Entrepreneurial Studies:MAES","Finance:MAFA","Finacial Planning:MAFPL","Human Resources Management:MAHR","International Business:MAIB","Marketing:MAMAR","Organizational Leadership:MAOR","Project Management:MAPM"]; categories["M_Computers & IT"] = ["Computer Networking and Security:MACNS","Computer Science:MACS","Databases:MADB","Information Systems:MAIS","Information Technology:MAIT","Technology Management:MATM","Web Development:MADEV"]; categories["M_Criminal Justice"] = ["Criminal Justice:MACJ","Homeland Security:MAHS","Law:MALAW","Legal Assisting Paralegal:MAPAR","Political Science:MAPS"]; categories["M_Education & Teaching"] = ["Adult and Higher Education:MAHE","Curriculum and Instruction:MACI","Early Childhood Education:MAECE","General Education:MAGE","Special Education (K-12):MASE"]; categories["M_Health & Medical"] = ["Gerontology (Study of people as they age):MAGR","Healthca MAHLTH","Healthcare Management:MAHCM","Medical Assisting:MAMA","Nursing:MANUR","Radiology & Sonography:MARAD"]; categories["M_Science & Technology"] = ["Aviation:MAAV","Electronics Engineering:MAEE","Engineering Management:MAEN","Environmental Sciences:MAENV","Mathematics:MAMS","Science:MASCI"]; categories["M_Social Sciences"] = ["Counseling:MACOUN","History:MAHIST","Psychology:MAPSY","Public Administration:MAPA","Public Safety:MAPUBS","Social Science:MASS","Sociology:MASOC"]; var nLists = 3; // number of select lists in the set function fillSelect(currCat,currList){ var step = Number(currList.id.replace(/\D/g,"")); for (i=step; i<nLists+1; i++) { document.forms['form1']['List'+i].length = 1; document.forms['form1']['List'+i].selectedIndex = 0; } var tmp = currCat.split(':'); var nCat = categories[tmp[0]]; for (each in nCat) { tmp = nCat[each].split(':'); var nOption = document.createElement('option'); var nData = document.createTextNode(tmp[0]); nOption.setAttribute('value',nCat[each]); nOption.appendChild(nData); currList.appendChild(nOption); } } function getValue(L3, L2, L1) { var l3 = L3.split(':'); var l2 = L2.split(':'); var l1 = L1.split(':'); // alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3); // alert("Your selection was:- \n" + l1[1] + "\n" + l2[1] + "\n" + l3[1]); } function init() { fillSelect('startList',document.forms['form1']['List1']) } navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false); </script> </head> <body> <form name="form1" action=""> <table> <tr> <td class="frmText" style="color: #000000; font-weight: normal;">Degree:</td> <td><select id='List1' onchange="fillSelect(this.value,this.form['List2'])"> <option selected>Select degree</option> </select> </td> </tr> <tr> <td class="frmText" style="color: #000000; font-weight: normal;">Area of Study:</td> <td><select id='List2' onchange="fillSelect(this.value,this.form['List3'])"> <option selected>Select area of study</option> </select> </td> </tr> <tr> <td class="frmText" style="color: #000000; font-weight: normal;">Program of Interest:</td> <td><select class="frmInput" id="List3" name="ProgramOfInterest" onchange="getValue(this.value,this.form['List2'].value, this.form['List1'].value)"> <option selected >Select program</option> </select> </td> </tr> </table> </form> ? how would i make it for a menu so you could press it and it would go down to click on a link.
I have been working with the double combo box w/ description script from javascriptkit, and I attempted to add an additional 3rd combo box that would switch selects based upon selection of the 2nd combo box, but I am having difficulty with this. Any help would be appreciated. Here is the code: Code: <script language="JavaScript"> <!-- //Double Combo Box with Description Code- by Randall Wald (http://www.rwald.com) //Visit JavaScript Kit (http://javascriptkit.com) for script //Credit must stay intact for use var num_of_cats = 4; // This is the number of categories, including the first, blank, category. var open_in_newwindow=1; //Set 1 to open links in new window, 0 for no. var option_array = new Array(num_of_cats); option_array[0] = new Array("You need to select a category"); // This is the first (blank) category. Don't mess with it. option_array[1] = new Array("-- Select One --", "JavaScript Kit", "News.com", "Wired"); option_array[2] = new Array("-- Select One --", "CNN", "ABC News"); option_array[3] = new Array("-- Select One --", "Google", "Ask Jeeves"); var text_array = new Array(num_of_cats); text_array[0] = new Array("Here's how you use this box: First, you select a category in the Category drop-down. Then, select a link from the Link drop-down. Then, read the description in this box, or click Go to go to the page. If you ever need to see this help again, just go back to the top option in the Category box."); // These are general instructions. Change them if you want, or keep them if you don't. text_array[1] = new Array("These are some of my favorite technology sites. You should visit them.", // Note that the first entry here is a general description of this category. After than, they're descriptions of each link. Make sure that you don't put the first link first; the general description must be first. "This is a page with a bunch of nice JavaScripts that you can use. They also have tutorials in all sorts of subjects.", "CNet news. If it's in technology, it's in here.", "Wired magazine is the type of magazine which needs no introduction."); text_array[2] = new Array("These days, it's important to keep up on the news. These sites will help you do that.", "CNN. What list of news sites would be complete without it?", "Here, you can get links to World News Tonight, or see video clips."); text_array[3] = new Array("If you can't find it via other means, you'll need to find it with a search engine. These are some of the best.", "Undoubtedly, the best search engine out there.", "Their natural-language search sometimes comes up with results you won't get with other engines."); var url_array = new Array(num_of_cats); url_array[0] = new Array("#"); // The first category. This should have no items other than "#". url_array[1] = new Array("#", // The second category; the first "real" category. Note the initial #. That is the category which says "Please select a link." It doesn't need a URL. Start putting the other URL's in after that first line. "http://javascriptkit.com/", "http://www.news.com/", "http://www.wired.com/"); url_array[2] = new Array("#", "http://www.cnn.com/", "http://abcnews.go.com/"); url_array[3] = new Array("#", "http://www.google.com/", "http://www.aj.com/"); function switch_select() { for (loop = window.document.form_1.select_2.options.length-1; loop > 0; loop--) { window.document.form_1.select_2.options[loop] = null; } for (loop = 0; loop < option_array[window.document.form_1.select_1.selectedIndex].length; loop++) { window.document.form_1.select_2.options[loop] = new Option(option_array[window.document.form_1.select_1.selectedIndex][loop]); } window.document.form_1.select_2.selectedIndex = 0; } function switch_text() { window.document.form_1.textarea_1.value = text_array[window.document.form_1.select_1.selectedIndex][window.document.form_1.select_2.selectedIndex]; } function box() { if (window.document.form_1.select_2.selectedIndex == 0) { alert("Where do you think you're going?"); } else { if (open_in_newwindow==1) window.open(url_array[window.document.form_1.select_1.selectedIndex][window.document.form_1.select_2.selectedIndex],"_blank"); else window.location=url_array[window.document.form_1.select_1.selectedIndex][window.document.form_1.select_2.selectedIndex] } } function set_orig() { window.document.form_1.select_1.selectedIndex = 0; window.document.form_1.select_2.selectedIndex = 0; } window.onload=set_orig // --> </script> <form name="form_1" onSubmit="return false;"> <textarea WRAP="virtual" name="textarea_1" rows=6 cols=60>Here's how you use this box: First, you select a category in the Category drop-down. Then, select a link from the Link drop-down. Then, read the description in this box, or click Go to go to the page. If you ever need to see this help again, just go back to the top option in the Category box.</textarea><br /> <!-- This should be the same as the general instructions in the above code. --> <select name="select_1" onChange="switch_select(); switch_text();"> <option>-- Categories --</option> <option>Technology Sites</option> <option>News Sites</option> <option>Search Engines</option> </select> <select name="select_2" onChange="switch_text();"> <option>You need to select a category</option> <option> </option> <option> </option> </select> <input type="submit" onClick="box();" value="Go!"> </form> <p align="center">This free script provided by<br /> <a href="http://javascriptkit.com">JavaScript Kit</a></p> i have done dropdown menu dynamic using php in which data fetched from database(mysql).now i've to do that if i'll choose any option from dropdown menu that particular item's rate will also fetch from data base and display in a text box.that value can also be changed.plzz help me .give some idea.
Hi Could you help me please. I am trying to make this drop down menu work in Internet Explorer 7 by inserting the Javascript. I'm obviously doing something wrong. Please be gentle with me I'm a bit of a newcomer to this: HTML and Javascript included below. <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script type="text/javascript"> sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script> <link href="dropdownmenu.css" rel="stylesheet" type="text/css" /> </head> <body> <ul class="nav"> <li><a href="/home/">Home </a></li> <li><a href="/products/">Products </a> <ul> <li><a href="/products/silverback/">Silverback </a></li> <li><a href="/products/fontdeck/">Font Deck </a></li> </ul> </li> <li><a href="/services/">Services </a> <ul> <li><a href="/services/design/">Design </a></li> <li><a href="/services/development/">Development </a></li> <li><a href="/services/ consultancy/">Consultancy </a></li> </ul> </li> <li><a href="/contact/">Contact Us </a></li> </ul> </body> </html> Here is the JS I used for a drop down nav bar from DW8. I need the cursor to become a hand when you scroll over one of the menu items. Can someone tell me what and where to change this. File attached...
I'm trying to make a simple drop down menu for the last item in the menu copied here. I've tried multiple free code on the web without success. <li><a href="http://www.aftershowmusic.com/aftershowmusic.com/After%20Show%20Music%20.html"><span>After Show Music</span></a></li> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta name="keywords" content="RF, producer, engineer, studio, touring, tours, live, managment, sound, mixing, editing, digital recording. Tony Levin Band, Tony Levin, Jerry Marotta, Larry Fast, Pete Levin, Jesse Gress, Todd Rundgren, Bill Bruford, Earthworks, Earthworks Underground Orchestra, BLUE, Joe Jackson, Lance Hoppen, Larry Hoppen, John Hall, Orleans, President Bill Clinton, ETHEL, ABBA's Arrival, ABBA the Tour, Anna Cheek, Jim Weider, The Band, Robbie Dupree, David Sancious, Woodstock, Water's of Eden, BLUE nights, Pieces of the Sun, Resonator, LIARS DVD, Jesse Gress, John Ferenzik, Prairie Prince, Kasim Sulton, Michael Urbano, The Band 3, Joey Eppard, Chris Gartman, Joe Stote, UKZ, Stickmen, Adrian Belew, Stickmen,Adrian Belew Power Trio, Julie Slick, Brian Slick, After Show Music, aftershowmusic.com.. "> <meta name="description" content="Audio engineer, producer, manager RF's home page. His tour schedule, latest news, audio samples, discography, photos, live sound, contact information. Gear used including Roland Digital Mixer, Bose Radiator Speakers, Byerdynamic microphones, Shure, Apple computers, MacIntosh, Logic. Ongoing work with Tony Levin, Todd Rundgren Tour Dates, The ABBA Tour Dates, Bearsville Theatre, The Band 3, ABBA the Tour, Stickmen, UKZ, Adrian Belew, ..."> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>drop down menu help</title> <link href="style2.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> <!-- function showmenu(elmnt) { document.getElementById(elmnt).style.visibility="visible"; } function hidemenu(elmnt) { document.getElementById(elmnt).style.visibility="hidden"; } --> </script> </head> <body> <table align="center" cellpadding="10" cellspacing="10" bordercolor="#B5A642" border="0" bgcolor="#444400"> <tr> <td align="right" width="120" border="0"> <div id="tabs"> <ul> <li></li> <li><a href="index.htm"><span>Home</span></a></li> <li><a href="rlive.html"><span>Live</span></a></li> <li><a href="rdisc.html"><span>Discography</span></a></li> <li><a href="rpress.html"><span>Press</span></a></li> <li><a href="rarch.html"><span>Photos</span></a></li> <li><a href="toursataglance.html"><span>Tours</span></a></li> <li><a href="http://www.aftershowmusic.com/aftershowmusic.com/After%20Show%20Music%20.html"><span>After Show Music</span></a></li> </ul> </div> </td> </tr> <td> <table align="center" cellpadding="10" cellspacing="10" bordercolor="#B5A642" border="0" bgcolor="#444400"> <tr> <td><a href="http://www.aftershowmusic.com/aftershowmusic.com/After%20Show%20Music%20.html"><img src="n140899968868_3330.jpg" width="200" height="183" border="2"></a> <br> <br> </td> <td> </td> <td><a href="MVI_4144AVI.html" target="MVI_4144.AVI" onClick="window.open('','MVI_4144.AVI', config='width=320, height=255, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no')"><img src="LiveMix.jpg" alt="RF Live Mix pic click for video" width="320" height="240" border="1"></a> </td> </tr> <br> <br> </table> <table align="center" cellpadding="0" cellspacing="5" bgcolor="#444400" bordercolor="#B5A642" border="0" height="0"> <tr> <td bgcolor="#B5A642" align="left" width="680"><b><i>Robert Frazza's</i> Latest Tour Details:</b></td> </tr> <!-- <tr> <td align="left" border="0" cellpadding="10" cellspacing="10"> <br> <b>Stick Men</b> March 2010 <br> <b>Tony Levin, Pat Mastelotto, and Michael Bernier</b> <br> <br> Mar 2 - Mexico City -Show <br> Mar 3 - Mexico City Show # 2 ( I've asked Val to verify local promoter!) <br> Mar 5 - Santiago Chile Show <br> Mar 7 - Cordoba Show <br> Mar 8 - Possible TLev clinic offer pending in Buenes Aires for + dollars (If so travel from Cordoba to BA; if not travel to Montevideo) <br> Mar 10 - Montevideo Show <br> Mar 11 - Rosario Argentina - Show <br> Mar 12 - Buenes Aires TBA - Show <br> Mar 14 - Caracas Show <br> </td> </tr> --> <tr> <td align="left" border="0" cellpadding="10" cellspacing="10"> <br> <b>Eddie Jobson's UK – November</b> 2009 <br><br> <i>w/ Edddie Jobson, Marco Minnemann, Greg Howe, Tony Levin, & John Wetton </i> <br> Nov. 3 - Studio Club - Krakow <br> Nov. 4 - Palladium - Warsaw <br> Nov. 5 - Filharmonia Pomorska - Bydgoszcz <br> <br> <i>w/ Edddie Jobson, Marco Minnemann, Greg Howe, Ric Fierabracci, & Adrian Belew </i> <br> Nov. 9 - Philharmonic Hall - Perm <br> Nov.10 - B1 Maximum Club - Moscow <br> <br> <i>w /Edddie Jobson, Marco Minnemann, Greg Howe, & Ric Fierabracci </i> <br> <strike>Nov. 11 - Crossroads Live Club - Rome</strike> <br> </td> </tr> <tr> <td align="left" border="0" cellpadding="10" cellspacing="10"> <br> </td> </tr> </table> <table align="center" cellpadding="3" cellspacing="3" bordercolor="B5A642" border="0" height="25"> <tr> <br> <br> <td span class="contact"><a href="mailto:jen@robertfrazza.com" class="contact">Ashokan Talent Group</a>™ PO Box 676 - Woodstock, NY 12498 <a href="mailto:rfrazza@yahoo.com" class="contact">robert@robertfrazza.com</a> <br> This web site ia a: <a href="mailto:nesbproject@yahoo.com" class="contact">NorthEast SoundBase project</a>™ <br> <script language="JavaScript1.2"> document.write("This web site was last modified on: ", document.lastModified); </script> </span> </td> </tr> </table> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-11025875-1"); pageTracker._trackPageview(); } catch(err) {}</script> </td> </tr> </table> </body> </html> This is the css -style2.css body,td,th { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; } body { background-color: #FFFFFF; } a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; } a:link { text-decoration: none; color: #997700; font-weight: bold; } a:visited { text-decoration: none; color: #005588; font-weight: bold; } a:hover { text-decoration: none; color: #005588; font-weight: bold; } a:active { text-decoration: none; color: #000000; } .tba { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; font-weight: bold; } .contact { text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; font-weight: normal; text-align: center; } a.contact { text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; font-weight: normal; text-align: center; } a.contact:hover { text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #858585; font-weight: normal; text-align: center; } /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ #tabs { float:left; width:100%; font-size:93%; line-height:normal; border-bottom:1px solid #666; margin-bottom:1em; /*margin between menu and rest of page*/ overflow:hidden; } #tabs ul { margin:0; padding:10px 10px 0 0px; list-style:none; } #tabs li { display:inline; margin:0; padding:0; } #tabs a { float:left; background:url("left.png") no-repeat left top; margin:0; padding:0 0 0 6px; text-decoration:none; } #tabs a span { float:left; display:block; background:url("right.png") no-repeat right top; padding:6px 15px 4px 6px; margin-right:2px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span { background-position:100% -42px; } Hi Everyone, Could someone please help? I'm rewriting our website at present, and am quite ok with HTML and CSS, but am not particularly au fait with Javascript. Here's the page I'm having a bit of trouble with: http://www.ambersupplies.co.uk/thomas/miscellaneous.htm If you look at the long button marked 'Diagnostics', you'll see it has an arrow and initiates a drop-down menu on mouse-over. My problem is that I wish to further subdivide the three items on the sub-menu, ie, Visual to become sub-menued into Dermatoscope and Penlight. In other words, the Visual button initiates another drop-down menu on mouse-over. Basically, therefore, I'm trying to expand the Javascript to make this happen, but I just don't seem to able to. I'd be so very grateful for any help anyone can offer. Graham Can anyone tell me how or point me to a tutorial which shows how to go about coding a drop down menu "without a button", where i can store all my links. Thanks Hi, Please look at the following drop-down menu: http://www.w3schools.com/JS/tryit.as...yjs_selectmenu 1. How can I set it so the pages open in the parent frame (instead of the same frame)? 2. How can I set it so the pages open in a new window? Regards Rain Lover I presently have a drop down menu in one of my sites. I wish to break it down one more time so that it opens up on the side. However, not being a javascript expert I cannot figure out how to do it. I assume it is something within the coding that needs to be changed, or even a new section added. I have included the coding, please can someone point me in the right direction. Thank you so much! Monica CODE: var timeout = 500; var closetimer = 0; var ddmenuitem = 0; // open hidden layer function mopen(id) { // cancel close timer mcancelclosetime(); // close old layer if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; // get new layer and show it ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible'; } // close showed layer function mclose() { if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; } // go close timer function mclosetime() { closetimer = window.setTimeout(mclose, timeout); } // cancel close timer function mcancelclosetime() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null; } } // close layer when click-out document.onclick = mclose; </SCRIPT> <script type='text/javascript'> $(function() { $('#nav-drop').droppy(); }); SDDM: #sddm { margin: 0; padding: 0; z-index: 300} #sddm li { margin: 0; padding: 0; list-style: none; float: left; font: 14px Arial, Helvetica, sans-serif} #sddm li a { display: block; margin: 0 1px 0 0; padding: 2px 6px; width: 95px; background: ##333366; color: #FFFFFF; text-align: center; text-decoration: none} #sddm li a:hover { background: #9F8469} #sddm div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #333366; border: 1px solid #FFFFFF} #sddm div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; background: #333366; color: #FFFFFF; font: 14px Arial, Helvetica, sans-serif} #sddm div a:hover { background: #9F8469; color: #FFFFFF} .style12 { color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 12px; } HTML: <tr> <td height="21" colspan="3" bgcolor="#333366"> <ul id="sddm"> <li><a href="index.html" class="style18">HOME</a></li> <li><a href="about_us.html" class="style18">ABOUT US</a></li> <li><a href="criminal_law.html" class="style18" onmouseover="mopen('m2')" onmouseout="mclosetime()">CRIMINAL LAW </a> <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="driving-impared_offences.html">Driving/Impaired Offences</a> <a href="drug_related_chages.html">Drug Related Charges</a> <a href="bail_hearing.html">Bail Hearing</a> <a href="fraud_theft.html">Fraud/Theft</a> <a href="assault.html">Assault</a> would like to break this assault button down to 4 more options <a href="domestic_violence.html">Domestic Violence</a> <a href="break_enter_robbery.html">Break & Enter/Robbery</a> <a href="weapons_offences.html">Weapons Offences</a> <a href="fail_to_comply.html">Fail to Comply</a> </div> </li> <li><a href="family_law.html" class="style18" onmouseover="mopen('m3')" onmouseout="mclosetime()">FAMILY LAW</a> <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="family_law_divorce.html">Divorce</a> <a href="family_law_custody_access.html">Custody and Access</a> <a href="child_spousal_support.html">Child/Spousal Support</a> <a href="division_of_property.html">Division of Property</a> <a href="restraining_orders.html">Restraining Orders</a> <a href="cas_matters.html">CAS Matters</a> <a href="paternity.html">Paternity</a> <a href="adoptions.html">Adoptions</a> <a href="premarital_cohapitation_separtion_agreements.html">Premarital/Cohabitation/Separation Agreements</a> </div> </li> <li><a href="civil.html" class="style18" onmouseover="mopen('m4')" onmouseout="mclosetime()">CIVIL LITIGATION</a> <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="personal_injury.html">Personal Injury</a> <a href="wrongful_dismissal.html">Wrongful Dismissal</a> <a href="contract_disputes.html">Contract Disputes</a> <a href="property_issue_discrepancies.html">Property/Issue Discrepancies</a> <a href="tax_matters.html">Tax Matters</a> </div> </li> <li><a href="wills.html" class="style18" onmouseover="mopen('m5')" onmouseout="mclosetime()">WILLS & ESTATES</a> <div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="wills.html">Wills</a> <a href="power_of_sale.html">Power of Sale</a> <a href="power_of_attorney.html">Power of Attorney</a> </div> </li> <li><a href="administrative_law.html" class="style18" onmouseover="mopen('m6')" onmouseout="mclosetime()">ADMINISTRATIVE LAW</a> <div id="m6" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="board_tribunals.html">Board Tribunals</a> <a href="omb.html">OMB</a> <a href="rental_housing.html">Rental Housing</a> <a href="licensing_tribunals.html">Licensing Tribunals</a> <a href="ministry_challenges.html">Ministry Challenges</a> <a href="consent_compassion_board.html">Consent and Compassion Board</a> <a href="wsib.html">WSIB</a> <a href="fisco.html">FISCO</a> <a href="human_rights_commission.html">Human Rights Commission</a> <a href="conversation_review_board.html">Conservation Review Board</a> </div> </li> <li><a href="resources.html" class="style18">RESOURCES</a></li> <li><a href="contact_us.html" class="style18">CONTACT US</a></li> </ul> I have some Javascript code for a drop-down menu. The code works fine (will show below) but I was wondering how to turn off one of them? I have a total of 8 icons that have drop-down menus, but I only need 6 of them to do so. If I make any sort of change to the code, it makes all the icons change color when the mouse is hovered over, instead of drop-downs. It seems to be an "all or nothing" situation. Can someone show me how to "turn off" just one of the icons (say the "news" one), so a drop-down doesn't appear? Thank you very much. Code: <script language="JavaScript" type="text/JavaScript"> <!-- function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> <script language="javascript"> function init() { if (TransMenu.isSupported()) { TransMenu.initialize(); menu1.onactivate = function() { document.getElementById("news").className = "hover"; }; menu1.ondeactivate = function() { document.getElementById("news").className = ""; }; menu2.onactivate = function() { document.getElementById("raceresults").className = "hover"; }; menu2.ondeactivate = function() { document.getElementById("raceresults").className = ""; }; } } </script> <tr><td> <a href="http://www.littlevalleyspeedway.com/test/news.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('news','','http://www.littlevalleyspeedway.com/test/layout/nav_news_on.jpg',1)" id="news"><img src="http://www.littlevalleyspeedway.com/test/layout/nav_news_off.jpg" border="0" name="news" /></a><img src="http://www.littlevalleyspeedway.com/test/layout/nav_top_divider.gif" /> <a href="http://www.littlevalleyspeedway.com/test/race_results.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('navraceresults','','http://www.littlevalleyspeedway.com/test/layout/nav_raceresults_on.jpg',1)" id="raceresults"><img src="http://www.littlevalleyspeedway.com/test/layout/nav_raceresults_off.jpg" border="0" name="navraceresults" /></a><img src="http://www.littlevalleyspeedway.com/test/layout/nav_top_divider.gif" /> </td></tr> <script language="javascript"> if (TransMenu.isSupported()) { var ms = new TransMenuSet(TransMenu.direction.down, 1, 0, TransMenu.reference.bottomLeft); var menu1 = ms.addMenu(document.getElementById("news")); menu1.addItem(); var menu2 = ms.addMenu(document.getElementById("raceresults")); menu2.addItem(); TransMenu.renderAll(); } </script> Any help would be much appreciated!! |