|
JavaScript - Css/js Drop Downs
Hi,
Im trying to create a drop down menu using the following code JS Code: function showMenu(theMenu) {
thisMenu = document.getElementById(theMenu);
var str = theMenu;
if (thisMenu.className == str.slice(4)+'_off') {
thisMenu.className = str.slice(4)+'_on';
}
else {
thisMenu.className = str.slice(4)+'_off';
}
}
function hideMenu(theMenu) {
thisMenu = document.getElementById(theMenu);
var str = theMenu;
if (thisMenu.className == str.slice(4)+'_on') {
thisMenu.className = str.slice(4)+'_off';
}
else {
thisMenu.className = str.slice(4)+'_on';
}
}
CSS Code: #wrapper
{
width: 770px;
margin:10px auto;
border:none;
text-align:left;
position:relative;
z-index:0;
}
#wrapper div.1_off
{
/* visibility:hidden;
z-index:-1;
*/
width:100px;
position:absolute;
top:40px;
left:10px;
height:70px;
width:200px;
margin:0px;
visibility:visible;
z-index:1;
}
#wrapper div.2_off
{
visibility:hidden;
z-index:-1;
}
#wrapper div.1_on
{
width:100px;
position:absolute;
top:40px;
left:10px;
height:70px;
width:200px;
margin:0px;
visibility:visible;
z-index:1;
background-color:#000;
}
#wrapper div.2_on
{
width:100px;
position:absolute;
top:40px;
left:110px;
height:70px;
width:200px;
margin:0px;
visibility:visible;
z-index:1;
background-color:#000;
}
with the anchors tags onmouseover/out containting the relevant JS functions: Code: <a href="" onmouseover="showMenu('menu1')">Hello</a></td><td name="dropdown">
<a href="" onmouseover="showMenu('menu2')">Goodbye</a>
and these divs nested within the wrapper div: Code: <div id="menu1" class="1_off">Yes</div><div id="menu2" class="2_off">No</div> Unfortunately the JS does not seem to be changing class of the div attributes. Any help would be greatly appreciated. Thanks Sol Similar Tutorialsi'm trying to make a form where if 2 particular options are chosen from 2 dropdown boxes, it puts a value in a text field. Its not working and i hope you can help so far i've got Code: if (document.profile_quote.thickness.selectedIndex == "3" && document.profile_quote.machine.selectedIndex == "1") document.profile_quote.cutspeed.value = "34444" I have a date of birth drop down for 'Day', 'Month' and a text field for Year. How can I get the select value of the drop down and year text field into a single text field, separated by '-'? The single text field would need to update if someone changed the drop down / year selections. Hope someone can help - I'm stumped! Hi guys, it's a bit of a large question but I've been messing around with code for a while, and nothing seems to work... Basically, I need to make, a 'dynamic theme changer'. Basically what I need to do is have several drop down boxes, each one with some colours available as options. When you select one, it automatically (without refreshing the page) updates a certain element's style. For example, if you selected green as one colour and red as another, the element linked to the first drop-down would turn green, and the element linked to the second drop-down would turn red, and so on so forth. It then needs to have a 'save' button, which saves the settings, and adds a cookie with the style details so that when they visit the page again it's still personalized. There also needs to be a cancel button which discards all changes. I know it's a large question but I'm ripping my hair out over this one! =P Your help is much appreciated. I am using the following code to show / hide form elements within a div based upon the drop down choice. Does anyone know how this code can be amended to use multiple drop downs within one form? Code: <html>
<head>
<title>Show and Hide</title>
<script>
//*********************************************
// Function that Shows an HTML element
//*********************************************
function showDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = ""; //display div
}
//*********************************************
// Function that Hides an HTML element
//*********************************************
function hideDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = "none"; // hide
}
//*****************************************************************************
// Function that Hides all the Div elements in the select menu Value
//*****************************************************************************
function hideAllDivs()
{
//Loop through the seclect menu values and hide all
var selectMenu = document.getElementById("selectMenu");
for (var i=0; i<=selectMenu.options.length -1; i++)
{
hideDiv(selectMenu.options[i].value);
}
}
//*********************************************
// Main function that calls others to toggle divs
//*********************************************
function toggle(showID)
{
hideAllDivs(); // Hide all
showDiv(showID); // Show the one we asked for
}
</script>
</head>
<body onload="hideAllDivs();">
<select id="selectMenu" onchange="toggle(this.options[this.options.selectedIndex].value)">
<option value="formNumber1"> Show Form 1 </option>
<option value="formNumber2"> Show Form 2 </option>
<option value="formNumber3"> Show Form 3 </option>
<option value="formNumber4"> Show Form 4 </option>
</select>
<div id="formNumber1"> I am Form Number one. Any content within this div will be showed</div>
<div id="formNumber2"> I am Form Number two. Any content within this div will be showed</div>
<div id="formNumber3"> I am Form Number three. Any content within this div will be showed</div>
<div id="formNumber4"> I am Form Number four. Any content within this div will be showed</div>
</body>
</html>
Thanks in advance! Hi all, I think I have posted in the right place, if not appologies. Anyhow, I am currently creating a website for my canvas printing business and run into a few javascripting issues. I am trying to create a small navigation form whereby a customer can select from a dropdown the required width of canvas, this selection will then populate a second dropdown with a choice of canvas heights. Ok, so trawling many sites I came across some javascript that I was able to chop about and have this part sorted. The problem now is that I would like to include a submit button that when clicked takes the customer to a webpage based on their two dropdown choices, and being a complete newby when it comes to javascript I am stuck trying to include the script to enable this. eg: if they select '20" (51cm)' from the first dropdown and '16" (41cm)' from the second dropdown, they will navigate to "http: / / 20x16.co.uk" canvas print page. I have not currently created the canvas print pages so am unable to give the URLs of the pages. However if somebody can lend a hand to get me started and indicate where the desitnation URLs need to be added, I can drop these in later. The way that the script is currently written, the linked url could be based soley on the choice made in the second dropdown. I have a draft page with the working dropdowns he http://merchant.auctivacommerce.com/...iewtheme=32189 And the code that I currently have is: Code: <script type="text/javascript">
var SELECT_WIDTH_FIRST = []; var WIDTH08 = []; var WIDTH10 = []; var WIDTH12 = []; var WIDTH14 = []; var WIDTH16 = []; var WIDTH18 = []; var WIDTH20 = []; var WIDTH24 = []; var WIDTH30 = []; var WIDTH36 = []; var WIDTH42 = []; var WIDTH48 = []; var WIDTH60 = []; var WIDTH72 = [];
SELECT_WIDTH_FIRST[0] = new Option("Please Select Width First", "SelWidFir");
WIDTH08[0] = new Option("8'' (20cm)", "0808"); WIDTH08[1] = new Option("10'' (25cm)", "0810"); WIDTH08[2] = new Option("12'' (30cm)", "0812"); WIDTH08[3] = new Option("14'' (35cm)", "0814"); WIDTH08[4] = new Option("16'' (41cm)", "8016"); WIDTH08[5] = new Option("18'' (46cm)", "0818"); WIDTH08[6] = new Option("20'' (51cm)", "0820"); WIDTH08[7] = new Option("24'' (61cm)", "0824");
WIDTH10[0] = new Option("8'' (20cm)", "1008"); WIDTH10[1] = new Option("10'' (25cm)", "1010"); WIDTH10[2] = new Option("12'' (30cm)", "1012"); WIDTH10[3] = new Option("14'' (35cm)", "1014"); WIDTH10[4] = new Option("16'' (41cm)", "1016"); WIDTH10[5] = new Option("18'' (45cm)", "1018"); WIDTH10[6] = new Option("20'' (51cm)", "1020"); WIDTH10[7] = new Option("24'' (61cm)", "1024"); WIDTH10[8] = new Option("30'' (76cm)", "1030");
WIDTH12[0] = new Option("8'' (20cm)", "1208"); WIDTH12[1] = new Option("10'' (25cm)", "1210"); WIDTH12[2] = new Option("12'' (30cm)", "1212"); WIDTH12[3] = new Option("14'' (35cm)", "1214"); WIDTH12[4] = new Option("16'' (41cm)", "1216"); WIDTH12[5] = new Option("18'' (45cm)", "1218"); WIDTH12[6] = new Option("20'' (51cm)", "1220"); WIDTH12[7] = new Option("24'' (61cm)", "1224"); WIDTH12[8] = new Option("30'' (76cm)", "1230"); WIDTH12[9] = new Option("36'' (91cm)", "1236");
WIDTH14[0] = new Option("8'' (20cm)", "1408"); WIDTH14[1] = new Option("10'' (25cm)", "1410"); WIDTH14[2] = new Option("12'' (30cm)", "1412"); WIDTH14[3] = new Option("14'' (35cm)", "1414"); WIDTH14[4] = new Option("16'' (41cm)", "1416"); WIDTH14[5] = new Option("18'' (45cm)", "1418"); WIDTH14[6] = new Option("20'' (51cm)", "1420"); WIDTH14[7] = new Option("24'' (61cm)", "1424"); WIDTH14[8] = new Option("30'' (76cm)", "1430"); WIDTH14[9] = new Option("36'' (91cm)", "1436"); WIDTH14[10] = new Option("42'' (107cm)", "1442");
WIDTH16[0] = new Option("8'' (20cm)", "1608"); WIDTH16[1] = new Option("10'' (25cm)", "1610"); WIDTH16[2] = new Option("12'' (30cm)", "1612"); WIDTH16[3] = new Option("14'' (35cm)", "1614"); WIDTH16[4] = new Option("16'' (41cm)", "1616"); WIDTH16[5] = new Option("18'' (45cm)", "1618"); WIDTH16[6] = new Option("20'' (51cm)", "1620"); WIDTH16[7] = new Option("24'' (61cm)", "1624"); WIDTH16[8] = new Option("30'' (76cm)", "1630"); WIDTH16[9] = new Option("36'' (91cm)", "1636"); WIDTH16[10] = new Option("42'' (107cm)", "1642"); WIDTH16[11] = new Option("48'' (122cm)", "1648");
WIDTH18[0] = new Option("8'' (20cm)", "1808"); WIDTH18[1] = new Option("10'' (25cm)", "1810"); WIDTH18[2] = new Option("12'' (30cm)", "1812"); WIDTH18[3] = new Option("14'' (35cm)", "1814"); WIDTH18[4] = new Option("16'' (41cm)", "1816"); WIDTH18[5] = new Option("18'' (45cm)", "1818"); WIDTH18[6] = new Option("20'' (51cm)", "1820"); WIDTH18[7] = new Option("24'' (61cm)", "1824"); WIDTH18[8] = new Option("30'' (76cm)", "1830"); WIDTH18[9] = new Option("36'' (91cm)", "1836"); WIDTH18[10] = new Option("42'' (107cm)", "1842"); WIDTH18[11] = new Option("48'' (122cm)", "1848"); WIDTH18[12] = new Option("60'' (152cm)", "1860"); WIDTH18[13] = new Option("72'' (183cm)", "1872");
WIDTH20[0] = new Option("8'' (20cm)", "2008"); WIDTH20[1] = new Option("10'' (25cm)", "2010"); WIDTH20[2] = new Option("12'' (30cm)", "2012"); WIDTH20[3] = new Option("14'' (35cm)", "2014"); WIDTH20[4] = new Option("16'' (41cm)", "2016"); WIDTH20[5] = new Option("18'' (45cm)", "2018"); WIDTH20[6] = new Option("20'' (51cm)", "2020"); WIDTH20[7] = new Option("24'' (61cm)", "2024"); WIDTH20[8] = new Option("30'' (76cm)", "2030"); WIDTH20[9] = new Option("36'' (91cm)", "2036"); WIDTH20[10] = new Option("42'' (107cm)", "2042"); WIDTH20[11] = new Option("48'' (122cm)", "2048"); WIDTH20[12] = new Option("60'' (152cm)", "2060"); WIDTH20[13] = new Option("72'' (183cm)", "2072");
WIDTH24[0] = new Option("8'' (20cm)", "2408"); WIDTH24[1] = new Option("10'' (25cm)", "2410"); WIDTH24[2] = new Option("12'' (30cm)", "2412"); WIDTH24[3] = new Option("14'' (35cm)", "2414"); WIDTH24[4] = new Option("16'' (41cm)", "2416"); WIDTH24[5] = new Option("18'' (45cm)", "2418"); WIDTH24[6] = new Option("20'' (51cm)", "2420");
WIDTH30[0] = new Option("10'' (25cm)", "3010"); WIDTH30[1] = new Option("12'' (30cm)", "3012"); WIDTH30[2] = new Option("14'' (35cm)", "3014"); WIDTH30[3] = new Option("16'' (41cm)", "3016"); WIDTH30[4] = new Option("18'' (45cm)", "3018"); WIDTH30[5] = new Option("20'' (51cm)", "3020");
WIDTH36[0] = new Option("12'' (30cm)", "3612"); WIDTH36[1] = new Option("14'' (35cm)", "3614"); WIDTH36[2] = new Option("16'' (41cm)", "3616"); WIDTH36[3] = new Option("18'' (45cm)", "3618"); WIDTH36[4] = new Option("20'' (51cm)", "3620");
WIDTH42[0] = new Option("14'' (35cm)", "3614"); WIDTH42[1] = new Option("16'' (41cm)", "3616"); WIDTH42[2] = new Option("18'' (45cm)", "3618"); WIDTH42[3] = new Option("20'' (51cm)", "3620");
WIDTH48[0] = new Option("16'' (41cm)", "4816"); WIDTH48[1] = new Option("18'' (45cm)", "4818"); WIDTH48[2] = new Option("20'' (51cm)", "4820");
WIDTH60[0] = new Option("18'' (45cm)", "6018"); WIDTH60[1] = new Option("20'' (51cm)", "6020");
WIDTH72[0] = new Option("18'' (45cm)", "7218"); WIDTH72[1] = new Option("20'' (51cm)", "7220");
function populateSub(mainSel, subSel){ var mainMenu = mainSel; var subMenu = subSel; var subMenuItems; subMenu.options.length = 1;
switch (mainMenu.selectedIndex) {
case 0: subMenuItems = SELECT_WIDTH_FIRST; break;
case 1: subMenuItems = WIDTH08; break;
case 2: subMenuItems = WIDTH10; break;
case 3: subMenuItems = WIDTH12; break;
case 4: subMenuItems = WIDTH14; break;
case 5: subMenuItems = WIDTH16; break;
case 6: subMenuItems = WIDTH18; break;
case 7: subMenuItems = WIDTH20; break;
case 8: subMenuItems = WIDTH24; break;
case 9: subMenuItems = WIDTH30; break;
case 10: subMenuItems = WIDTH36; break;
case 11: subMenuItems = WIDTH42; break;
case 12: subMenuItems = WIDTH48; break;
case 13: subMenuItems = WIDTH60; break;
case 14: subMenuItems = WIDTH72; break;
}
for (var i = 0; i < subMenuItems.length; i++) { subMenu.options[i] = subMenuItems[i];
}
}
</script>
<div style="width:320px; text-align:right;">
<form name="Menus">
<label style="font-size:14px; font-variant:small-caps;">Width</label>
<select style="width:250px; margin-bottom:10px;" name="Width" onchange="populateSub(this, this.form.Height);">
<option>Please Select</option>
<option value="W08">8'' (20cm)</option>
<option value="W10">10'' (25cm)</option>
<option value="W12">12'' (30cm)</option>
<option value="W14">14'' (35cm)</option>
<option value="W16">16'' (41cm)</option>
<option value="W18">18'' (46cm)</option>
<option value="W20">20'' (51cm)</option>
<option value="W24">24'' (61cm)</option>
<option value="W30">30'' (61cm)</option>
<option value="W36">36'' (61cm)</option>
<option value="W42">42'' (61cm)</option>
<option value="W48">48'' (61cm)</option>
<option value="W60">60'' (61cm)</option>
<option value="W72">72'' (61cm)</option>
</select>
<label style="font-size:14px; font-variant:small-caps;">Height</label>
<select style="width:250px; margin-bottom:10px;" name="Height">
<option>Please Select Width First</option>
</select>
<input type="button" value="View Canvas!">
</form>
</div>
As mentioned, Javascript is completely new to me but I am attempting to learn. Any help would be greatly appreciated. Wayne Hello, I am trying to use select options to get birthdate and calculate the age. I got the birthday with "birthDay = document.form1.selDate;" However i'm lost on the birthMonth and birthYear. I've looked at lots of examples. The birthMonth probably needs to be converted to integer, or use 1 thru 12 rather than Jan thru Dec. But birthYear i'd think would come back as a valid number. Is anyone familiar with this? Thanks. Code: <html>
<head>
<title>Main</title>
<script language="javascript">
<!--
function Age()
{
var birthDay;
var birthMonth;
var birthYear;
var userAge;
var currentDay = new Date();
var dayNow = currentDay.getDate();
var monthNow = (currentDay.getMonth());
var yearNow = (currentDay.getFullYear());
birthDay = document.form1.selDate;
// Don't know how to get birthmonth????
// birthMonth = (parseInt(document.form1.selMonth.value)-1);
birthYear = document.form1.selYear;
// alert("birthyear " + birthYear); ( gives "birthYear [object HTMLSelectElement]")
if((monthNow > birthMonth)||(monthNow == birthMonth & dayNow >= birthDay))
{ userAge = birthYear; }
else { userAge=birthYear+1;}
alert("As of today, " + currentDay +' \n'+", you a " + (yearNow - userAge) + " years old");
}
//-->
</script>
</head>
<body>
<form name="form1" id="startOfForm">
<table><tbody>
<tr>
<td class="question"><label for="birthdate">Enter Birthdate</label></td>
<td>
<select name=selMonth>
<option value=0 selected>Month</option> <option selected value="Jan">Jan</option>
<option selected value="Feb">Feb</option> <option selected value="Mar">Mar</option>
<option selected value="Apr">Apr</option> <option selected value="May">May</option>
<option selected value="Jun">Jun</option> <option selected value="Jul">Jul</option>
<option selected value="Aug">Aug</option> <option selected value="Sept">Sept</option>
<option selected value="Oct">Oct</option> <option selected value="Nov">Nov</option>
<option selected value="Dec">Dec</option>
</select>
<select name=selDate>
<option value=0 selected>Date</option> <option selected value="1">1</option>
<option selected value="2">2</option> <option selected value="3">3</option>
<option selected value="4">4</option> <option selected value="5">5</option>
<option selected value="6">6</option> <option selected value="7">7</option>
<option selected value="8">8</option> <option selected value="9">9</option>
</select>
<select name=selYear>
<option value=0 selected>Year</option> <option value="2001">2001</option>
<option value="2000">2000</option> <option value="1999">1999</option>
<option value="1998">1998</option> <option value="1997">1997</option>
<option value="1996">1996</option> <option value="1995">1995</option>
</select>
</td>
</tr>
<tr>
<td>
<input name="cmd" type=button value="Age"
onclick="Age()" style="width:150px; height:30px;">
</td>
</tr>
</tbody></table>
</form>
</body>
</html>
I have been searching for a long time but have been unsuccessful on how to develop a drop down menu but have the menu items show in a list above the main nav. Not below. I really like the way this functions: http://www.sohtanaka.com/web-design/examples/toggle/ But I would like the item in the list to appear above the main nav so it animates up not down. Can anyone help me on how to alter this js code to perform this task? Here is the jQuery file link: http://code.jquery.com/jquery-latest.js I tried going through this js file but it very complex. Can anyone tell me what I need to change to have the animation roll up instead of down? Any help would be most appreciated. Hello everyone! So, what it does: You can successfully drag something anywhere, but when you click it again, it resets to its original position (I don't know why), and when you try to drag it again, as soon as your cursor touches the object it disappears (I don't know why). I'm hoping someone can tell me why it is happening and how to fix it! Code: // JavaScript Document
var posX;
var posY;
var element;
function drag(event) {
element = document.getElementById("square");
posX = event.clientX;
posY = event.clientY;
element.addEventListener("mousemove", move, false);
}
function move(event) {
if (typeof(document.getElementById("square").mouseup) == "undefined")
element.addEventListener("mouseup", drop, false);
//Prevents redundantly adding the same event handler repeatedly
element.style.left = event.clientX - posX + "px";
element.style.top = event.clientY - posY + "px";
}
function drop() {
element.removeEventListener("mousemove", move, false);
element.removeEventListener("mouseup", drop, false);
}
the html is a simple (position is set to relative): <p id="square" onmousedown="drag(event)">meep</p> Lastly, and most importantly, thank you all for your time =] EDIT: This is the first time I've written javascript code and would like to learn the basics, which is why I am not using a library. Hello there, CodingForums.com! I'm a newbie to Javascript, HTML, XHTML, CSS-- and oh god, everything, so please bear with me! I have come to understand that to get any better, I'll need support. I hope you guys (and gals) can assist! Here is my issue: I'm currently trying to develop a first-draft calculator that will allow me to calculate some values for work and the way I want it requires me to do it with a pair of drop-downs. Take a look at it he http://www.projectvoid.co.uk/ I would like to select the first drop-down, on the left-hand side (Current Lighting Products -> Type of Lamp) and for the right-hand side to copy it's selected value (Energy Efficient Products -> Type of Lamp). Furthermore, it shouldn't interfere with the fact that I'm also using those values with my dependent drop-down, below (Wattage). The only piece of code I've found that might help is this: Code: function setSelect(name1, name2)
{
var select1 = document.forms.formname.elements[name1];
var select2 = document.forms.formname.elements[name2];
select1.selectedIndex = select2.selectedIndex;
}
I am also unsure how to utilize it. I look forward to your aid! Thank you in advance. Okay, I'm having some trouble getting my head around how to do this.. Code: <select> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <select> <option value="Rhino">Rhino</option> <option value="Bird">Bird</option> <option value="Rooster">Rooster</option> </select> <select> <option value="0202A">Rhino - Text</option> <option value="0203A">Rhino - Text2</option> <option value="0204A">Bird - Text1</option> <option value="0205A">Bird - Text2</option> <option value="0202B">Rhino - Text</option> <option value="0204B">Rhino - Text2</option> <option value="0204C">Rooster - Text1</option> <option value="0205C">Rooster - Text2</option> <option value="0206C">Rooster - Text3</option> </select> So say we had those three drop-downs. I'm looking to make it so that second drop-down only has options corresponding to a relationship between the first and the third drop-down. Example - if you select A in the first drop-down you only see Rhino and Bird in the second drop-down. If you select B you will only see Rhino in the second drop-down. Lastly, if you select C you will only see Rooster in the second drop-down. Just can't figure this out. >.< 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 Hello, Current Live View: https://tornhq.com/AroundTheWorld/Lo...WorkingOn.html This content is going to be implemented into a form I am currently working on once completed. As you can see, not all of the countries have yet been broken down as some we're having difficulties doing so. Code: SList.getSelect = function (slist, option) {
document.getElementById('scontent').innerHTML = ''; // empty option-content
if (SList[slist][option]) {
// if option from the last Select, add text-content, else, set dropdown list
if (slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
else {
var addata = '<option>- - -</option>';
for (var i = 0; i < SList[slist][option].length; i++) {
addata += '<option value="' + SList[slist][option][i] + '">' + SList[slist][option][i] + '</option>';
}
// cases for each dropdown list
switch (slist) {
case 'slist2':
document.getElementById('slist2').innerHTML = txtsl2 + ' <select name="slist2" onchange="SList.getSelect(\'slist3\', this.value);">' + addata + '</select>';
document.getElementById('slist3').innerHTML = '';
break;
case 'slist3':
document.getElementById('slist3').innerHTML = txtsl3 + ' <select name="slist3" onchange="SList.getSelect(\'scontent\', this.value);">' + addata + '</select>';
break;
}
}
} else {
// empty the tags for select lists
if (slist == 'slist2') {
document.getElementById('slist2').innerHTML = '';
document.getElementById('slist3').innerHTML = '';
} else if (slist == 'slist3') {
document.getElementById('slist3').innerHTML = '';
}
}
}
I need to know how to edit the following, if there is a simple way to set the case for each one as they are not all split up into the same way, some are Districts, some states and whatnot so the new question varies. Or do I simply need to make another big list to do them all? Best Regards, Tim Reply With Quote 03-21-2013, 06:35 AM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts Well, for starters, this is generally a really bad way to add <select>s and <option>s. Period. I would certainly toss out your entire getSelect() function and rewrite it. But I'm also not clear on what your question is. Are you asking *HOW* to implement the third level? I don't see any countries with any third level data, at this point. If that's what you are asking, one possible way: Code: SList.slist2 = {
...
"United Kingdom" :
{ "England" : ["Staffordshire", "Derby", ... ],
"Scotland" : ["Edinburgh", ... ],
"Wales" : [ ... ],
"Northern Ireland" : [ .... ]
},
...
};
I have to ask: Why would you name that Slist.slist2 instead of Slist.countries ?? Not that it really matters, but why not make code more self documenting? 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 Hi Everyone, I'm trying to put a drop-down menu onto my website, but desperately need some help; I'd be so grateful if someone could offer some assistance. If you click on this link to see the webpage, http://www.ambersupplies.co.uk/newsite/pageone.htm you'll see the drop down menu, and the two problems I'm having with it. Please don't take any notice of the menu content; I'll be styling it all when these problems are sorted. Firstly, you'll see that the external drop down list is lying within the table (with the red background) when it should appear outside. I've obviously missed a closing table or td tag somewhere, but can't find it. Secondly, the drop down menu should appear on mouseover, and disappear on mouseout; which it does, but as you can see, when the page is firstly or reloaded, the menu is showing. I didn't write this drop-down menu code, I copied it from this page with the intention of styling it to my own webpage: http://www.w3schools.com/DHTML/tryit...rydhtml_menu10, perhaps this will give someone a clue. Can anyone shed a bit of light on this for me, please? I'd be really grateful for any help whatsoever. Many thanks in advance. Graham I need some code to make it so if one option is selected on drop down A then only certain options are available on dropdown B. Likewise, if a different option on dropdown A is selected, different options are available on dropdown B etc etc. They can either be greyed out, or not visible at all I think i can use Code: <option disabled="disabled"> but i'm not sure how to implement it any help appreciated All I Want To Make Happen Is That If You Drag and Drop A Div Into A Table An Action Happens
I've got 2 drop down boxes, dropdown1 and dropdown2, and i want certain options on dropdown2 to be greyed out or unavailable if certain selections are made in dropdown1. is this possible? and if so, how? thanks 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; } 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> Hello, I need your help. I have the following drop-down box as an example: [== FRUITS ==] apples oranges pairs kiwi lemon How can I use the code below to set the value of the drop down without knowing its value number (3)? document.getElementById('BOX1').value = 'pairs' Much thanks and appreciation for everyones help. Cheers, J |
|||||||