JavaScript - Drop Down Box Img Change Problem

Hi guys,

I am having an issue changing a piece of Javascript and hoped you guru's could help?I am not awful with Javascript but it is fair to say I am still at the beginning of my learning! I can't find the correct answer in forums and tutorials and you guys are literally my last hope! Here it is ....

I have a drop-down menu on a website I am working on which is made up of HTML, CSS and a little bit of Javascript. At the moment it is set so that when the user hovers over the menu it operates the drop-down. This obviously does not work for iPads etc as there is no mouse to hover. I want to keep my menu but alter the Javascript so the menu drops when clicked instead.

Here is my code:

Javascript

Code:

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

//--><!]]></script>

HTML

Code:

<div id="menuPadding">
	<div id="menu">
<ul id="nav">
<li id="m1"><a href="">HOME</a></li>
<li id="m2">ABOUT US 					       
<ul>
<li><a href="">Our Values</a></li>
<li><a href="">Facilities</a></li>
<li><a href="">Arena</a></li>
<li><a href="">Jobs</a></li>
</ul>
</li>
<li id="m3">SUCCESS 					       
<ul>
<li><a href="">Jobs</a></li>
<li><a href="">Results</a></li>
<li><a href="">Awards</a></li>
<li><a href="">Testimonials</a></li>
</ul>
</li>
</div>
</div>

CSS

Code:

#menu {
	margin-top: 16px;
	width: 879px;
	height: 30px;
	z-index: 1000;
	font-family: Verdana, Geneva, sans-serif;
	font-size:11px;
	font-weight:bold;
}

#menuPadding {
	margin: 0px 0px 0px 0px;
	padding: 10px 0px 10px 0px;
	text-align:center;
	z-index: 1000;
}

#menuPadding ul {
	height: 29px;
	margin: 0px 0px 0px 0px;
	padding: 5px 0px 5px 0px;
z-index: 1000;
}

#menuPadding ul li {
/*	display: inline;*/
	line-height: 29px;
	padding:0px;
	margin-left:1px;
	display:block;
	float:left;
	font-weight:bold;
	color:#fff;
z-index: 1000;
}

#menuPadding ul li a {
	text-align:center;
z-index: 1000;
}

#menuPadding ul li li {
	padding:0px;
	margin:0px;
z-index: 1000;
}

#menuPadding ul li li a {
	text-align:left;
	padding-left:14px;
	text-transform:uppercase;
z-index: 1000;
	font-size:90%;
}

#menuPadding ul li li a.notupper {
	text-transform:none;
z-index: 1000;
}

/* coloured menus */
#menuPadding ul li#m1 {
	background:#FF0000;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m1 li {
	background:#FF0000;
	width:146px;
z-index: 1000;
}

#menuPadding ul li#m2 {
	background:#0099CC;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m2 li {
	background:#0099CC;
	width:166px;
z-index: 1000;
}

#menuPadding ul li#m2 li a {
	width:166px;
z-index: 1000;
}

#menuPadding ul li#m3 {
	background:#999999;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m3 li {
	background:#999999;
	width:176px;
z-index: 1000;
}

#menuPadding ul li#m3 li a {
	width:176px;
z-index: 1000;
}

#menuPadding ul li#m4 {
	background:#9966CC;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m4 li {
	background:#9966CC;
	width:156px;
z-index: 1000;
}

#menuPadding ul li#m4 li a {
	width:156px;
z-index: 1000;
}

#menuPadding ul li#m5 {
	background:#AAC619;
	width:96px;
z-index: 1000;
}

#menuPadding ul li#m5 li {
	background:#AAC619;
	width:230px;
	padding-right:20px;
z-index: 1000;
}

#menuPadding ul li#m5 li a {
	width:230px;
z-index: 1000;
}

#menuPadding ul li#m6 {
	background:#FF9900;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m6 li {
	background:#FF9900;
	width:146px;
z-index: 1000;
}

#menuPadding ul li#m7 {
	background:#FF0099;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m7 li {
	background:#FF0099;
	width:216px;
	color:#fff;
z-index: 1000;
}

#menuPadding ul li#m7 li a {
	width:216px;
	color:#fff;
z-index: 1000;
}

#menuPadding ul li#m7 li li {
	font-size:87%;
z-index: 1000;
}

#menu li ul ul { /* third-and-above-level lists */
	margin: -30px 0 0 216px;
z-index: 1000;
}

#menu li:hover ul ul, #menu li.sfhover ul ul {
	left: -999em;
z-index: 1000;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
z-index: 1000;
}

#menuPadding ul li#m8 {
	background:#660099;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m8 li {
	background:#660099;
	width:146px;
z-index: 1000;
}

#menuPadding ul li#m9 {
	background:#A80017;
	width:97px;
z-index: 1000;
}

#menuPadding ul li#m9 li {
	background:#A80017;
	width:146px;
z-index: 1000;
}

#menuPadding ul li a:link,#menuPadding ul li a:active,#menuPadding ul li a:visited {
	color:#fff;
z-index: 1000;
}

#menuPadding ul li a:hover {
	color:#000;
z-index: 1000;
}

/* suckerfish */
#menu, #menu ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;color:#fff;
}

#menu a {
	display: block;
	width: 96px;
}

#menu li { /* all list items */
	float: left;
	width: 96px; /* width needed or else Opera goes nuts */
	border-top:1px solid #fff;
}

#menu li ul { /* second-level lists */
	position: absolute;
	background: orange;
	width: 106px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	font-size:90%;
}

#menu li ul ul { /* third-and-above-level lists */
/*	margin: -1em 0 0 96px;*/
	font-size:110%;	
}

#menu li li { 
	font-size:100%;
	color:#fff;
}


#menu li:hover ul ul, #menu li.sfhover ul ul {
	left: -999em;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}

I realise that this must be quite an easy thing for you guys but - as I said - I am at the beginning of my learning and it is confusing the hell out of me! All of the things I have tried have not worked! Any help would be truly appreciated!

Thanks in advance!

all i have to do is the image to change automatically based on the option you selected from the drop down list.
here is the code, any help is appreciable. thanks in advance.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
img{
height:95px;
width:95px;
display:block;
margin-top:10px;
}
#caption{
font-family:Verdana,tahoma,arial;
font-size:8pt;
text-align:left;
display:block;
width:250px;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var caption=['Default Image Caption',
'begonia',
'daffodils',
'mixture',
'natural',
'purple',
'red flower',
'sunflower',
'tulip',
'two flowers'], // This will be your images caption
bp='..\images', //base url of your images
imgnum=9, //Number of your images. This should match on your comboboxes options.
thumb=document.getElementById('thumb'), //id of your image that will be changing
description=document.getElementById('caption'), //id of your caption
combobox=document.getElementById('selection'); // id of your combobox.

combobox.onchange=function()
{
thumb.src=bp+'Picture'+this.value+'.jpg';
description.innerHTML=caption[this.value];
}
}
</script>
</head>
<body>
<label>Please Change the pictu </label>
<select id="selection">
<option>Change Picture</option>
<option value="1">begonia</option>
<option value="2">daffodils</option>
<option value="3">mixture</option>
<option value="4">natural</option>
<option value="5">purple</option>
<option value="6">red flower</option>
<option value="7">sunflower</option>
<option value="8">tulip</option>
<option value="9">two flowers</option>
</select>
<br>
<img src="..\images" alt="mypic" id="thumb">
<span id="caption">Caption for the default Image</span>
</body>
</html>
thanks again

Doing a project for class and we are not allowed to use any libraries. That being said, I am having a problem getting my information to appear. I have looked over my code and have no problem what the problem is. I am a novice, first real class with in depth javascript implementation and it all appears on my final assignment.

What I am trying to get done is, when I click on one of the 4 images on the left column on my queue.html only those episodes of that show appear in the right column. So If I click on the Modern Family image only the 5 episdoes will appear on the right. Same for the other two. What happens with mine, is nothing. I spent all night on the code trying to get it to work and nothing is happening. Below are some of the parameters of this assignment.

-*‐ The queue page is a two-column layout. Column one (left) contains a list of saved shows, and column two (right) contains a list of episodes
-*‐ The queue page should use DOM scripting to update data, and at no point should a page refresh occur

I think I used the wrong element somewhere, but cant for the life of me figure it out. I hope someone can point me in the right direction.

http://sulley.dm.ucf.edu/~zz669709/d...nt3/queue.html - Queue Page(working on Modern Family function, other two once I get this one working)

http://sulley.dm.ucf.edu/~zz669709/d...ment3/js/a3.js - Javascript(Disregard Modal Window stuff, still working on that)

http://sulley.dm.ucf.edu/~zz669709/d...css/styles.css - css

Thank you.

Hi

I need a help with my code.

When i'm trying to put a picture in empty div it works fine, but when i put the second picture to the div where already is picture, then second picture "disappear".
If i have only one div, then everything is ok, but with 2 or more divs i have issue.


PHP Code:
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drop2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="http://images.photo.bikestats.eu/zdjecie,600,79346,20091201,zdjecia-wiewiorek.jpg" draggable="true" ondragstart="drag(event)" width="80" height="80">
<img id="drag2" src="http://www.tech-blog.pl/wordpress/wp-content/uploads/2011/12/gaba-16-12-2011.jpg" draggable="true" ondragstart="drag(event)" width="80" height="80">
<style>
#drop {
    border: 1px solid black;
    width:80px;
    height:80px;
}
#drop2 {
    border: 1px solid black;
    width:80px;
    height:80px;
}
</style>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text/html", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text/html");
    
    var parent = ev.target.parentNode;
    if( parent.id == 'drop' ) {
        parent.removeChild(ev.target);
        parent.appendChild(document.getElementById(data));
    }
    else
        ev.target.appendChild(document.getElementById(data));
}
</script> 

Hi everyone

I am having a bit of trouble with a question that I have been given for my Javascript assignment.

I was given a web page with a series of boxes (created by <div> tags) which could be dragged and dropped anywhere on the web page, and they were dragged by holding the mouse down and dragging, and released when the mouse button was released. The web page can be viewed at http://adamr.hitwebs.net/dragDropOriginal.html and the source can be viewed at http://adamr.hitwebs.net/dragDropOriginal.js.

The assignment was to make any other element drag-and-droppable, so I chose to make a jigsaw puzzle and hence make images drag-and-droppable, but with minimal changes to the script (simply changing the class name and id of my images), the dragging and dropping process is visually very different (the images appear to "stick" to the cursor on mouse up, and you have to actually click a second time to drop the image).

Can someone please help me to fix this so that the drag and drop looks like what the boxes did (an example of what I want is exactly how the smiley faces are dragged-and-dropped at http://elouai.com/javascript-drag-and-drop.php).

My jigsaw puzzle can be viewed at http://adamr.hitwebs.net/drag&Drop.html and the source can be downloaded from http://adamr.hitwebs.net/dragDrop.js.

As you will see, apart from the large sections of script that I added, I only changed about two or three words of the original script, and it stopped working properly as soon as I started using images, which was long before I made my own additions to the script.

Also note that there are A LOT of comments in my code because this is an assignment, and I have to note every change that I made to the original code, as well as put explanatory comments in my own code.

P.S. Please don't tell me to use the script on the smiley face web page that I have provided, as this would not be useful to me. I must amend the script that I was originally given with the boxes. As for the assignment, I have checked this with the teacher, and I will not lose any marks for the terrible drag-and-drop effect as it does not appear to be my fault. This post is purely for my curiosity and because I hate not being able to solve a problem, and to me, this is a problem.

Thanks heaps,
- Adam

This drop down works great in Firefox, Safari, IE 8, etc... But not in IE 6 & 7. the drop down appears to the far left instead of right under the navigation. The people in the CSS area have no feedback so I thought I'd try the Javascript section because this may be a Javascripting thing for all I know. Any help or advice would be totally appreciated. Thanks...

Example link: http://www.millermillerllc.com/dynamicdrive/index.html

Files: http://www.millermillerllc.com/dynam...website_01.zip

Hi there. I recently put a news ticker on my work's homepage and it works fine. The only problem is that the drop-down menus above it are appearing behind the news ticker. I tried trouble-shooting for the last couple days to no avail. I am hoping someone might be able to give me some hints or a way to resolve this. Here is a link to the beta page, and below is the newsticker javascript I used. This is my first time posting here and I'm really new to the world of scripting so please let me know if there is anything else you might need to help me crack this thing. Thanks to everyone in advance.

Code:

// Create namespace
if (at == undefined) var at = {};
if (at.bartelme == undefined) at.bartelme = {};

// Newsticker Class
at.bartelme.newsticker = Class.create();
at.bartelme.newsticker.prototype = {
	initialize: function()
	{
		// Get elements
		this.interval = 10000;
		this.container = $("newsticker");
		this.messages  = $A(this.container.getElementsByTagName("li"));
		this.number_of_messages = this.messages.length;
		if (this.number_of_messages == 0)
		{
			this.showError();
			return false;
		}
		this.current_message = 0;
		this.previous_message = null;
		// Create toggle button
		this.toggle_button = document.createElement("a");
		this.toggle_button.href = "#";
		this.toggle_button.id = "togglenewsticker";
		this.toggle_button.innerHTML = "Toggle";
		Event.observe(this.toggle_button, "click", this.toggle.bindAsEventListener(this), false);
		
		this.hideMessages();
		this.showMessage();
		// Install timer
		this.timer = setInterval(this.showMessage.bind(this), this.interval);
  	},
	showMessage: function()
	{
		Effect.Appear(this.messages[this.current_message]);
		setTimeout(this.fadeMessage.bind(this), this.interval-2000);
		if (this.current_message < this.number_of_messages-1)
		{
			this.previous_message = this.current_message;
			this.current_message = this.current_message + 1;
		} else {
			this.current_message = 0;
			this.previous_message = this.number_of_messages - 1;
		}
	},
	fadeMessage: function()
	{
		Effect.Fade(this.messages[this.previous_message]);
	},
	hideMessages: function()
	{
		this.messages.each(function(message)
		{
			Element.hide(message);
		})
	},
	toggle: function()
	{
		Effect.BlindUp(this.container, 1000);
	},
	showError: function()
	{
		if (this.container.getElementsByTagName("ul").length == 0)
		{
			this.list = document.createElement("ul");
			this.container.appendChild(this.list);
		} else {
			this.list = this.container.getElementsByTagName("ul")[0];
		}
		this.errorMessage = document.createElement("li");
		this.errorMessage.className = "error";
		this.errorMessage.innerHTML = "Could not retrieve data";
		this.list.appendChild(this.errorMessage);
	}
}

Event.observe(window, "load", function(){new at.bartelme.newsticker()}, false);

hey im newish to javascript.

ive completely handwritten this script, based on a working drop down menu script i had. this new script is supposed to incorporate the menu 'rolling' down. this is based on pixel increment by time.
problems with the code:

doesnt work at all with ie, only FF
can only open one menu item per refresh of page
when you go to click on a menu sub-item the menu disappears as soon as your mouse leaves the first header link.

didnt have any of these problems with the basic drop down menu this is based on.

so heres the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div, a, ul, li, body,  {padding:0;margin:0; text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}
li {font-size: 15px;}

body{margin:0;}

#container {width:800px; margin: 0 auto; font-family:Tahoma, Geneva, sans-serif;}

.drop {overflow: hidden; width: 180px; height: 20px; float: left; background: #f1f1f1; display: block; list-style:none; padding: 5px 10px; opacity: 0.9; filter: alpha(opacity=90); border-bottom: 1px solid blue;margin: 0;}
.menuItemHolder {width: 200px; height: 20px; float:left;}
.topLi {margin-bottom: 10px; text-align: center; font-size: 16px;}
.relDiv {border: 1px solid green; background: blue; color: #fff;}

#nav-container {height: 30px; margin: 0;}

/*THIS BIT SHOULD BE UNCOVERED IF USING 6 MENU ITEMS, (instead of 5)*/
.menuItemHolder {width: 160px;}
.drop {width: 140px;}

</style>

<script type="text/javascript">
height=20; //set initial height of top menu links
var timer_is_on=0; //set timer value to 0 (off)

function dropper(dropN)
{
menu = document.getElementById(dropN); //select menu to open

var links=menu.innerHTML; //select link holder
numLinks=(links.split("</li>").length-1); //calculate number of links in each link holder

height++; //increase value of height by '1' each time
maxHeight=10+(numLinks*18); //calculate height of expanded Li holder
   if (height<=maxHeight) //code to run if menu is fully extended
	{
	menu.style.height=height+"px"; //reformat for pixel declaration
	menu.style.position = "absolute"; //change menu to absolutely positioned
	setTimeout("dropper("+dropN+")",10); //call function from within itself after 10 miliseconds
	}
   else
	{
	}
}

function doTimer(dropN)
{
   if (!timer_is_on) //check if timer is set, if not, set it and redirect
	{
	timer_is_on=1;
	dropper(dropN); //redirect to the function to bring the menu down
	}
}

function backup(dropN)
{
menu = document.getElementById(dropN); //select menu to close
menu.style.height = '20px'; //change to closed height (height of first link only)
height=20; //change height variable back to 20
var timer_is_on=0; //reset time set variable to 0
}
</script>
</head>

<body>
    <div id="nav-container">
		<div class="menuItemHolder">
		<ul id="1" class="drop" onMouseOver="doTimer('1');" onMouseOut="backup('1');">
			<li class="topLi"><a href="#">Top bit</a></li>
			<li><a href="#">link 1</a></li>
			<li><a href="#">link 1</a></li>
			<li><a href="#">link 1</a></li>
			<li><a href="#">link 1</a></li>
			<li><a href="#">link 1</a></li>
			<li><a href="#">link 1</a></li>
		</ul>
		</div>

		<div class="menuItemHolder">
		<ul id="2" class="drop" onMouseOver="doTimer('2');" onMouseOut="backup('2');">
			<li class="topLi"><a href="#" class="topLi">Longer Top bit</a></li>
			<li><a href="#">link 2</a></li>
			<li><a href="#">link 2</a></li>
			<li><a href="#">link 2</a></li>
		</ul>
		</div>
</body>
</html>

any help much appreciated

Hi guys,

The code in question is www.spectral.og.uk/test5/work2.htm

I am trying to change the main 'SPECTRAL' video content mid-right when I click on the 'Change Movie' at the bottom. Eventually I want to be able to do this from the thumbnails but Im just running a simple test first.

So I defined the function 'ChangeMOVIE' on line 14 using document.getElementById & innerHTML, etc, to replicate the flash player script contents that are incidentally ID'd as "BIGCHANGE" (ie, part of the main flash player on line 249) but simply replacing a different name for the video when it reaches the Flashvars "&file=Splash.flv" to something else to effect the change of video content I'm after, 'Olay.flv' I think.

I have tried so hard to research into this but it just doesn't work.

Is the problem to do with that :-

1) You can't ID something within <script>, ie BIGCHANGE in this instance.

2) innerHTML is only really for text replacement, not the amount of script I've stuck into it to replace within the whole <TD> cell with ID 'VID' (ie the main flash player) even though I've used delimiters and everything within the innerHTML data to try and not confuse it with apostrophes within speach marks, etc

Any thoughts where I'm going wrong? Maybe Im barking up the wrong tree on this!

Thanks so much guys for any headsup on a solution to this as I've been up all night for about a week on this!

Dom

Hello,

I'm in the process of setting up an online store for our company. I'm adding a function whereby the user can view all products for their particular motorcycle model by selecting first the make and then the model they own via drop down boxes. I have the two boxes working fine, that's no problem. The problem I'm running into is in the re-direct to the proper page. What's happening is this:
the URL is ending up like this: http://rekluse.mybigcommerce.com/?ma...ucts&x=11&y=16
when it should end up like this: http://rekluse.mybigcommerce.com/cat...F250R-Products
Here is what I believe is the relevant code:

Code:

<script type="text/javascript">
<!--
function MM_jumpMenuGo(objId,targ,restore){ //v9.0
var selObj = null; with (document) {
if (getElementById) selObj = getElementById(objId);
if (selObj) eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0; }
}
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 KW_updateItems(d,o,fn) { //v2.6 By Paul Davis www.kaosweaver.com
var i,s,l=MM_findObj(d),b,z=o.options[o.selectedIndex].value;
l.length=0;l.options[0]=new Option('tbd','tbd');b=(z!='nill')?eval(z+'_items'):0;
for(i=0;i<b.length;i++){s=b[i].split("|");l.options[i]=new Option(s[1],s[0]);}
l.selectedIndex=0;if (!fn) return;eval(fn)
}
//-->
</script>

Code:

<form name="form" id="form">
<select name="make" id="make" onchange="KW_updateItems('model',this)">

...

<input type="image" src="%%GLOBAL_IMG_PATH%%/%%GLOBAL_SiteColor%%/GoButton.gif"  value="%%LNG_Subscribe%%" class="Button" id= "go_button" onclick="MM_jumpMenuGo('model','parent',0)" />
</form>

...

<script language="JavaScript">
var honda_items = new Array();
honda_items[2]='categories/Honda-CRF250R-Products|CRF250R';
</script>

Any hints?

Thanks in advance.

Im coding with AnyLink JS drop down menu and I am running into a annoying Java Script Problem or CSS not sure.

Here is the site ip http://96.0.177.61 if you view it in FF it looks fine but in IE 8 you will find a space about 5 - 10px wide straight across the bottom of the top Nav. I cant figure out why that is happening can someone please help

Thanks

The code below is a download form,, the number after the P= are the index idents for each file to be downloaded..
The destination_folder is set for C:\temp as default location.

the code below works as needed for one file,,however i need to create a drop down list which will show all file names,and automatically throw the right ident for that file after the P=.
sounds simple enough but there are other sections that are tied to this form so the solution has to use the CFForm_1(this) else i'll have to redo all the other sections as well. as well as javascript
if anyone has a quick and clean way to do this i'd be very appreciative. i've pulled my hair out trying to find examples using this config and none are even close..or don't have a drop down menu
Code:

<form name="CFForm_1" 
action="http://www.XXX.cfm?p=6D6F615CC&rt=2&st=2" method="POST" onsubmit="CFForm_1(this)">

<input name="destination_folder" id="destination_folder" type="text" value="C:\Temp" 
maxlength="200"  size="60"  />
												
<input type="Submit" value="Resume">

thanks in advance, Rick

I've been running into a brick wall on this problem, and have gone over my html, css and PHP dozens of times, so I'm thinking it's a Javascript issue (where my skills are lacking). I'm using a drop-down menu script that I got he http://www.php-development.ru/javascripts/dropdown.php, which I have modified slightly to eliminate timeout and change styles on closing the menu (by clicking on it).

It works fine everywhere except in IE 6 and 7. In IE 7, the menu appears where it should, but looks blank. If you leave the sub-menu open and hover over another link, the menu appears as it should. Both drop-down menus do this. In IE6, the problem is similar, except that only the bottom border of the menu items appear, not the whole link. The page can be found he http://www.georgekoury.com/index_test.php, and the only options with drop-down are "Individual Insurance" and "Group Insurance". I realize the code isn't entirely compliant, I inherited this code from another programmer and I'm trying to avoid having to rewrite the whole structure. I'm not sure what code you may need me to post, so if more information is needed, please let me know and I'll provide it.

My problem has to do with having more then two drop down menus and disabling selected items. In this example whenever anyone selects an option from either of the drop-down menus the opposing drop-down menu greys out the selection:

Code:

<script type="text/javascript"> 

function updateSelect(changedSelect, selectId) {
   var otherSelect = document.getElementById(selectId);
   for (var i = 0; i < otherSelect.options.length; ++i) {
       otherSelect.options[i].disabled = false;
   }
   if (changedSelect.selectedIndex == 0) {
      return;
   }
   otherSelect.options[changedSelect.selectedIndex].disabled = true;
}

</script>

Code:

<select id="subject1" name="indication_subject[]" onchange="updateSelect(this,'subject2');" >
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
</select>

<select id="subject2" name="indication_subject[]" onchange="updateSelect(this,'subject1');" >
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
</select>

The above code works perfect. My problem is extending this to even more drop-down menus. I'm not a javascript guy but my logic was thinking something like this:

Code:

ARRAY = "subject1, subject2, subject3"; 

<select id="subject1" name="indication_subject[]" onchange="updateSelect(this,'ARRAY');" >

...either an array to include multiple drop-down menus or what about something like this?

Code:

<select id="subject2" name="indication_subject[]" onchange="updateSelect(this,'subject1, subject2, subject3, subject4');" >

Obviously I know my code solutions don't work, however, I'm hoping they can provide someone with clarity with respect to what I'm trying to accomplish.

I sincerely would appreciate anyone's help on this.

Firstly, I'm not trying to 'fix' the code below. (eg: not interested in links to other drag & drop scripts).
I'm mearly trying to understand what's happening & what I've missed or done wrong.
For instance, why in FF & IE does it wait until after onmouseup (release) before moving the object, because it works fine with a DIV with only text in it, but not with a DIV with an image in it, or a stand alone image. In Chrome it seems to highlight the image and onmousemove also highlights the surrounding areas.
I've tried forcing focus() & blur() & covering with a higher zIndexed transparent DIV but nothing seems to work. Any help in understanding would be greatly appreciated.

dragscript.js
Code:

document.onmousemove = mouseXY;
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;

var mouseX = 0;
var mouseY = 0;
var drag;
var dragObject = null;
var mouseOffsetX;
var mouseOffsetY;

function mouseXY(e) {
	e = e || window.event;
		
		if (e.pageX || e.pageY) {
			mouseX = e.pageX; mouseY = e.pageY;
		}
		else if (e.clientX || e.clientY) {
			mouseX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
			mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
		}
	
	document.getElementById('mouseposX').value = mouseX;
	document.getElementById('mouseposY').value = mouseY;
	
				if (dragObject) {
		
			document.getElementById(dragObject.id).style.left = mouseX - mouseOffsetX;
			document.getElementById(dragObject.id).style.top = mouseY - mouseOffsetY;
		}
}


function mouseDown(x) {

	if (!x) var x = window.event;
	if (x.target) drag = x.target;
	else if (x.srcElement) drag = x.srcElement;
	if (drag.nodeType == 3) drag = drag.parentNode;
		
	if (drag.className == 'dragable') {
		dragObject = drag;
		document.getElementById('ObjectId').value = dragObject.id;
		mouseOffsetX = mouseX - document.getElementById(dragObject.id).offsetLeft;
		mouseOffsetY = mouseY - document.getElementById(dragObject.id).offsetTop;
	}
	
}


function mouseUp() {
	dragObject = null;
	document.getElementById('ObjectId').value = '';
}

test.html
Code:

<html>
<head>
<META HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<script type="text/javascript" src="dragscript.js"></script>
<style type="text/css">
.dragable {position:absolute; left:200; top:200; border:2px solid black;}
</style></head><body>

MouseX : <input id="mouseposX" type="text" size=3>&nbsp;&nbsp;&nbsp;&nbsp;
MouseY : <input id="mouseposY" type="text" size=3>&nbsp;&nbsp;&nbsp;&nbsp;
dragObject Id : <input id="ObjectId" type="text" size=10>


<image id="image1" class="dragable" src="test.gif" border=0>

</body></html>

Many thanks,

Paul

PS: Login for posting timeout too short.