JavaScript - Need Help With Drop Down Menu W/option Box.

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 want to use a <select> drop-down in a form to let my user select a date from a list. The problem is how to easily update the list.

Easiest would be to have a list of dates in a separate file, and have code that would read the dates and write them into the <option> statements of the <select> control. Then when the page with the <select> control opens, the code will open the other file, get the dates, and update the <option>s. And all I have to do is periodically FTP a new date file.

I'm stuck in Visual Basic and FileSystemObject, where I can open a file, read line by line into an array, concatenate a string, and write it into a doc. I can't seem to find similar methods in JavaScript - no duh, because this isn't VB!

So _is_ there a way to do this? Maybe a certain way to create the date file so the code can easily find the values? (Like putting the dates into a table with each <TD> having a unique ID?) And assuming I manage to get the dates, I need to write them into the source HTML, vice in the document body.

What objects, methods, properties do I look at? Are there any samples floating around out there? A drop-kick in a good direction is greatly appreciated!

Ed

If i have a drop down list on my website, and i want to use javascript to change its selected value, however, i do not have the id/name attribute of the option i want to select, only have the "value" attribute of the option, can it be done?

<select name="category">
<option value="">No Preference</option>
<option value="Apples">Apples</option>
<option value="Oranges">Oranges</option>
<option value="Pears">Pears</option>
<option value="Banana">Banana</option>
</select>

I imagine somehow.. selecting the options and looping through them and match the value. Really new to javascript, can anyone advise?

Thanks in advance!

I have a button given like this:
<a href="test.php"><input class="test" type="test"></a>

I have a CSS that defined the button as an image, and on hover the button changes.

However, on hover, I'd like there to come a drop down that for example link to test 1, test 2, test 3. Is this possible? Thank you!

I have a radio button that asks Does your URL exist or need to be purchased? and a drop down menu that lists different types of web projects (i.e. new website and website redesign).

What I'm trying to achieve is, if the user selects that the URL exists, I would like the drop down menu option new website to be removed from the list.

Form:
Code:

<form>
<input type="radio" name="website_status" value="exists"/> Exists
<input type="radio" name="website_status" value="purchase_required"/> Needs to be purchased

<select name="projects">
<option></option>
<option value="new_website">New Website</option>
<option value="website_redesign">Website Redesign</option>
</select>
</form>

JavaScript:
[CODE]
<script>
window.onload = initForms;

function initForms() {
for (var i=0; i<document.forms.length; i++) {
document.forms[i].onsubmit = function() {return validForm();}
}
}

function validForm() {
var inputarray = document.getElementsByTagName("input");
var selectarray = document.getElementsByTagName("select");
var textarea = document.getElementsByTagName("textarea");

if (inputarray[0].checked == true) {
selectarray[0].remove(options[1]);
return false;
}
</script>

I've been experimenting with this for the last couple hours and am getting nothing! Could someone please point me in the right direction?

Tonight is one of those nights - which seem to be coming more often - where I just can't seem to do anything right.

Here is the menu I'm using embedded in HTML:

Code:

<td width="40%" align="center"><font color="#000099"><b>
<select id="Aircraft">
 <option value="0">N148LH</option>
 <option value="1">N149LH</option>
 <option value="2">N150LH</option>
 <option value="3">N151LH</option>
 <option value="4">N152LH</option>
 <option value="5">N153LH</option>
 <option value="6">N155LH</option>
 <option value="7">N156LH</option>
 <option value="8">N157LH</option>
 <option value="9">N159LH</option>
 <option value="10">N162LH</option>
 <option value="11">N163LH</option>
</select></b></font></td>

Now I want to use that code to trigger default values for my Empty Weights. This is what I have and isn't working:

Code:

  

  var selectmenu=document.getElementById("Aircraft")
  
  if (Aircraft=0) {
  df.ew.value = 1569.41;
  df.ew_mom.value = 135909.2;
  }
  
  if (Aircraft=1) {
  df.ew.value = 1570.11;
  df.ew_mom.value = 135929.76;
  }

Any help is appreciated. If anyone is interested the page this is on is here.

hi guys! i would like to know the script for me to auto select an option in a menu on a single click. so i have two pages. on the first page is the button. second page is the drop down menu. menu has selection "fruit" "vegies" "meat". by default fruit is selected. when i click on that button it will automatically select the menu on the second page for "meat".


thanks!!

Hi People,

I've used the Concertina Menu from Stu Nicholls on one of my websites and am trying to get the Menu slider to slide up automatically after a certain time. Currently it only slides up on a mouseclick.

The working link can be found at
www.atomwhale.com/share/clients/branch/website/home.html

Hope someone can help me in getting this to work.

thanks,
Jeriel.

I'm tearing my hair out with this one and can't figure out why it won't work, and am hoping someone could help a Javascript noobie out.

Basically, I need the script to hide two divs if one of the options in a <select> menu is selected.

Here's the code I've got for the Javascript:
Code:

function typeoflisting() {

	var selectform = document.getElementById('propertytype');
	
	if (selectform.options[selectedIndex].value == "sell") {
		document.getElementById('per_week').style.display = 'none';
		document.getElementById('bond').style.display = 'none';
	}
	else {
		document.getElementById('per_week').style.display = 'block';
		document.getElementById('bond').style.display = 'block';
	}	
}

Here's the <select> form:
Code:

<select id="propertytype" name="propertytype" class="select" onchange="typeoflisting()">	
	<option value="lease">I'd like to lease a property to tenants</option>
	<option value="sell">I'd like to sell a property</option>
	<option value="share">I'd like to share a property</option>
</select>

And here's the first div I'm attempting to hide:
Code:

<div id="per_week" style="float: left;"> per week</div>

And the second div I'm attempting to hide:
Code:

<div style="float: left; padding: 20px 20px 0px 0px;" id="bond">
<h3>Bond</h3>
<input type="text" class="text" value="$"/>
</div>

Could anyone please tell me what I'm doing wrong?

? how would i make it for a menu so you could press it and it would go down to click on a link.

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

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 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!!

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>&nbsp;</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>&nbsp; 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 &ndash; November</b> 2009 <br><br>
<i>w/ Edddie Jobson, Marco Minnemann, Greg Howe, Tony Levin, &amp; 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, &amp; 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, &amp; 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">

&nbsp;
<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>&trade;

&nbsp;PO Box 676 - Woodstock, NY 12498

&nbsp;<a href="mailto:rfrazza@yahoo.com" class="contact">robert@robertfrazza.com</a>
<br>
This web site ia a: &nbsp;<a href="mailto:nesbproject@yahoo.com" class="contact">NorthEast SoundBase project</a>&trade;
<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,

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