JavaScript - Drop Down Menus And Images

Hi there. This is my first thread. I'm completely new to javascript. I want to use dreamweaver with javascript to do a litter project in which I want to move value "Saleman" from drop-menu 1 and value "Billy" from drop-down 2 to a list box. The result should be as follows:

dropdown 1
Manager
Salesman (to be selected)
Cleaner

dropdown 2
Billy (to be selected)
Susan
Ivan

--- [Add button]

Listbox
Salesman - Billy


Thank you for your help.

Cheers
Raymond

I wish to get the values for the 3rd and 4th cell of each row where these contain drop down menus. I've tried various ways but my code doesn't seem to iterate through rows of a table. I can get the values for the first row, but not the rest. There's isn't a fixed row size for the table as the user will be able to add and delete them.

I've put the values in separate arrays but instead of the array containing say [10, 20] it contains [10, 10] as it just duplicates the first row's values.

Here's my code that I have so far:
Code:

 function calculate(){
        var len = document.getElementById(arguments[1]).rows.length;
        var cMenus = [];
        var gMenus= [];
        for(var j = 1; j<len; j++){
            for(var i = 2; i<arguments.length; i++){
                var c = document.getElementById(arguments[2]);
                var g = document.getElementById(arguments[3]);
						
                cMenus[a] = c.options[c.selectedIndex].value;
                gMenus[a] = g.options[g.selectedIndex].value;	
            }
            a++;
        }

    <button type="button" onclick="calculate('text','course', 'credits', 'grade')">Calculate</button>

HTML Code up to the first dropdown menu:
Code:

 <table id="course" summary="add/remove course details" width="350px" border="1">
<tr>
    <td><input type="checkbox" name="tick"/></td>
<td><input type="text"/></td>   
    <td>
        <select name="credits" id="credits">
            <option value="10">10</option>
            <option value="20">20</option>
        </select>	
    </td>
    </td>
        <select name=....

I've tried adding j to the arguments or putting it in "[]" but nothing seems to work. I don't think the platform I'm using supports jquery, so help would be really appreciated for using javascript, thanks.

[This is an updated question from my previous thread as I was unable to edit or delete my question]

Hello All,
I'm trying to find a script that would be able to do the following:
The are two drop down boxes, the first one populating the second (state/county --> town)
The first box is single choice, the second is multiple choice. I'm looking for a script that would be able to deal with generating the code for all possible values that could be chosen in the second drop down box.
The drop down boxes are part of a form which allow people to search for educational courses within areas of a state/county.

I've had a good root around the internet but am rapidly getting confused ...

many thanks in advance.
Si.

Hi,

I have created a global navigation includes document. Unfortunately the drop down menus that are part of the navigation aren't working. They worked fine when they were part of the page, but now that they are separated from the page as includes the drop down menus don't appear in my test site (posted to a web server). All other content in the includes file appears and works. Any ideas?

Thanks for your help.

I got no idea how to create a filter based on multiple drop menus to filter & sort data from php mysql query. Can anyone help me to write javascipt for this problem?

My php mysql query as below:-
mysql_select_db($database_winwin, $winwin);
$query_rsMobile = "SELECT product_detail.product_Id, product_detail.product, product_detail.product_category, product_detail.product_brand, product_detail.product_name, product_detail.product_price, product_detail.thumbnail_url, product_detail.product_url, product_detail.product_status, product_detail.commission, product_detail.product_added_date FROM product_detail WHERE product_detail.product='Mobile Devices' AND product_detail.product_status='For sales'";
$rsMobile = mysql_query($query_rsMobile, $winwin) or die(mysql_error());
$row_rsMobile = mysql_fetch_assoc($rsMobile);
$totalRows_rsMobile = mysql_num_rows($rsMobile);

Whereby:-
Product Brand: product_brand
Product price: product_price
Commission: commission
Product name: product_name
Product Thumbnail: thumbnail_url
Product URL: product_url

HTML for filters & sorter:-
<div id="filters">
<form action="" method="post" name="form_filters" id="form_filters">
<table width="750" border="0">
<tr>
<td>Brand:</td>
<td><select name="productBrand" id="productBrand">
<option value="All Brands">All Brands</option>
<option value="Sony Ericsson">Sony Ericsson</option>
<option value="Samsung">Samsung</option>
<option value="Nokia">Nokia</option>
</select></td>
<td>Price:</td>
<td><select name="priceRange" id="priceRange">
<option value="All Price">All Price</option>
<option value="Below RM1000">Below RM1000</option>
<option value="RM1000-RM1999">RM1000-RM1999</option>
<option value="RM2000 & Above">RM2000 & Above</option>
</select></td>
<td>Sort by:</td>
<td><select name="productSort" id="productSort">
<option value="Sort By Name">Name</option>
<option value="Sort By Price">Price</option>
</select></td>
<td><input name="Apply Filters" type="submit" value="Apply Filters"/></td>
<td><input name="Reset Filters" type="Reset" value="Reset Filters"/></td>
</tr>
</table>
</form>
</div>

Once user click on "Apply Filters" javascript has to sort list the product items.

HTML for Pager (Value for total items, display some page numbers with hyperlink (1,2,3....10,11,12), hyperlink to previous page, hyperlink to next page) :-

<div id="pager">
No. of items per page:
<select name="NumOfItem" id="NumOfItem">
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
Total Item:
Pages ...
Next...
Previous
</div>

Javascript has to manage pager column.

HTML for Product display:-
<div id="product">
<div id="Thumbnail">
Here Javascript has to display Thumbnail image based on filters & sorter drop menus inputs. When click on this image page must redirect to "Product URL".
</div>
<div id="Price">
Here Javascript has to display "Price" based on filters & sorter drop menus inputs. When click on this "Price" page must redirect to "Product URL".
</div>
<div id="Commission">
Here Javascript has to display "Commission" image based on filters & sorter drop menus inputs. When click on this "Commission" page must redirect to "Product URL".
</div>
</div>

Javascript has to repeat regions (<div id="product"></div>)based on "NumOfItem" drop menu (number of items display per page) and also update the pager column

Hello,

I REALLY like the dropdown menus that are on the Patagonia website. How difficult would this be to replicate? Is there a write-up or tutorial somewhere I can read and learn how to do this?

Any help would be greatly appreciated,
Thanks

Here is the link:

http://www.patagonia.com/web/us/home

All,
I'm trying to create a calendar application that users can upload pictures and then put them on a calendar. I'd like to display all of the images and then drag them from one pane to the calendar. I'd like it to be something similar to the following link:

http://www.vistaprint.com/studio/cal...id=button&rd=2

Does anyone have any scripts that can do the drag and drop or could you possibly give me an idea on where to start with something like this? I really appreciate the help in advance!

Thanks!

Hello;

New to Javascripting, new to forum. I searched the forum, and tried to adapt, to no avail.

I am building a store and want users to be able to see how two items look together. I have it working, but it uses a drop down.

I would like to display many items and have the user click on one "image", from the display of "top" images, to display it on top, and from another section of "bottom" images, click another image to display it on bottom.

For instance to see what one plant would look like in different vases.


If I could be picky, is there a way to make it all happen in the BODY of the page? I use DW and a template.

Code:

<html>
<head>

<script language="javascript">

function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
document.images.pictures2.src=
document.mygallery2.picture2.options[document.mygallery2.picture2.selectedIndex].value
}
//-->
</script>

</head>

<body>
<p class="style1">Try a few selections for your gift.</p>
<table border="0" align="center" cellpadding="0" cellspacing="0"> 
<tr> 
<td><form name="mygallery"><select 
name="picture" size="1" onChange="showimage()"> 
<option selected value="images/bear1.jpg">Bear 1</option> 
<option value="images/bear2.jpg">Bear 2</option> 
<option value="images/plant1.jpg">Plant 1</option> 
<option value="images/plant2.jpg">Plant 2</option> 
<option value="images/plant3.jpg">Plant 3</option> 
</select> 
</form> 
</td> 
 
<td><a href="javascript:linkrotate(document.mygallery.picture.selectedIndex)" onMouseover="window.status='';return true"><img src="images/bear1.jpg" name="pictures" width="150" border=0></a></td> 
</tr> 
 
<tr> 
<td><form name="mygallery2"><select 
name="picture2" size="1" onChange="showimage()"> 
<option selected value="images/cup1.jpg">Mug 1</option> 
<option value="images/cup2.jpg">Mug 2</option> 
</select> 
</form> 
</td> 
 
 
<td><a href="javascript:linkrotate(document.mygallery2.picture2.selectedIndex)" onMouseover="window.status='';return true"><img src="images/cup1.jpg" name="pictures2" width="150" border=0></a></td> 
</tr> 
 
</table>
</body>
</html>

Hi there, i've run into a bit of a problem, i've managed to get javascript to change an image when choosing an option from a dropdown menu, but when i try to get it to change multiple images it only ever changes one image...

Code:

   <script type="text/javascript"> 
function changeWalls(what, whatimg) 
{ 
if(what != "none")
{
document.images[whatimg].src = what;
}
} 
      </script>
      <select name="Walls" onchange="changeWalls(this.value,'walls')">
        <option value="images/white.gif" selected="selected">Please Select a Colour</option>
        <option value="images/WALLCC.png">Classic Cream</option>
        <option value="images/WALLSG.png">Shale Grey</option>
        <option value="images/WALLDO.png">Deep Ocean</option>
        <option value="images/WALLSM.png">Surfmist</option>
      </select>

then the images i want are multiples so i want to change 2 of these
Code:

<img src="images/front_0002_front-wall-colour.png" alt="" name="walls" border="0" id="walls2" />

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.

I am having a problem sending info to a database. I have set up drag and drop with HTML5 and it is working, but I need to be able to get the values of the images uploaded to the database when each one is dropped into a dropzone. I don't need to upload the images to the database - just need the value of each image sent to it.

Here is the HTML:
Code:

<ul id="images">
  <li><a id="1" draggable="true"><img src="images/1.jpg" value = "flower"></a></li>
  <li><a id="2" draggable="true"><img src="images/2.jpg" value = "boy"></a></li>
  <li><a id="3" draggable="true"><img src="images/3.jpg" value = "girl"></a></li>
</ul>

<form name = "objects" id="form" action = "form.php" method = "post">

<div class="drop_zones">
  <div class="drop_zone" id="drop_zone1" droppable="true" type = "text" name =    "drop_zone1">
  </div>

  <div class="drop_zone" id="drop_zone2"  droppable="true" type = "text" name = "drop_zone2">
  </div>

  <div class="drop_zone" id="drop_zone3" droppable="true" type = "text" type = "file" name = "drop_zone3">
  </div>
</div>

and the javascript
Code:

var addEvent = (function () {
if (document.addEventListener) {
return function (el, type, fn) {
  if (el && el.nodeName || el === window) {
    el.addEventListener(type, fn, false);
  } else if (el && el.length) {
    for (var i = 0; i < el.length; i++) {
      addEvent(el[i], type, fn);
    }
  }
 };
} else {
return function (el, type, fn) {
  if (el && el.nodeName || el === window) {
    el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
  } else if (el && el.length) {
    for (var i = 0; i < el.length; i++) {
      addEvent(el[i], type, fn);
     }
   }
 };
 }
})();


var dragItems;
updateDataTransfer();
var dropAreas = document.querySelectorAll('[droppable=true]');


function cancel(e) {
if (e.preventDefault) {
e.preventDefault();
}
return false;
}


function updateDataTransfer() {
dragItems = document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
    addEvent(dragItems[i], 'dragstart', function (event) {
        event.dataTransfer.setData('obj_id', this.id);
        return false;
    });
}
}


 addEvent(dropAreas, 'dragover', function (event) {
if (event.preventDefault) event.preventDefault();


this.style.borderColor = "#000";
return false;
});


addEvent(dropAreas, 'dragleave', function (event) {
if (event.preventDefault) event.preventDefault();


this.style.borderColor = "#ccc";
return false;
});


 addEvent(dropAreas, 'dragenter', cancel);

// drop event handler
addEvent(dropAreas, 'drop', function (event) {
if (event.preventDefault) event.preventDefault();

// get dropped object
var iObj = event.dataTransfer.getData('obj_id');
var oldObj = document.getElementById(iObj);

// get its image src
var oldSrc = oldObj.childNodes[0].src;
oldObj.className += 'hidden';

var oldThis = this;

setTimeout(function() {
    oldObj.parentNode.removeChild(oldObj); // remove object from DOM

    // add similar object in another place
    oldThis.innerHTML += '<a id="'+iObj+'" draggable="true"><img src="'+oldSrc+'" />    </a>';

    // and update event handlers
    updateDataTransfer();

    // little customization
    oldThis.style.borderColor = "#ccc";
}, 500);

return false;
});

and the php
PHP Code:
<?php 

$sql="INSERT INTO table_answers (drop_zone1, drop_zone2, drop_zone3) VALUES      ('$_POST[drop_zone1]','$_POST[drop_zone2]','$_POST[drop_zone3]')";

if (!mysql_query($sql,$db))
{
    die('Error: ' . mysql_error());
}

echo $_POST["drop_zone1"]; 
echo $_POST["drop_zone2"]; 
echo $_POST["drop_zone3"]; 

?>


There is no error, it is not registering that there is something in the dropzone - nothing is being sent through the php. I have tried doing it with just text(instead of the image) and that won't work either. I am unsure of how to target the value of each image through javascript/php.

Please help if you can,
Thanks

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.

I want to make a menu like this web site :http://www.petrobras.com.br/pt/
When your move the cursor on it , a new windows open and there is a picture in left side and submenues in right side

I myself think it is a jquery tool but I don't know how to make some thing like this

How can I do so ?

thanks

Hello, i am trying to implement JavaScript menus for my website. I've used a ready-made one from apycom.
The menu works fine, however the problem is that whenever i try to have more than one of the same menu, the second menu does not work.

I'm generally a PHP coder, and i'm not very useful when it comes to JavaScript, so please excuse me. I'll bring some code into this:

Quote:
<div id="menu">
<ul class="menu" id="menu">

<li><a href="browse.php?id=44&<?php echo "sort=".$sort; ?>" class="parent"><span>My Account</span></a>
<div><ul>
<!-- <li><a href="browse.php?id=84&<?php echo "sort=".$sort; ?>"><span>Sign-In</span></a></li> -->
<li><span><input type="text" name="title"></span></li>
<li><a href="browse.php?id=85&<?php echo "sort=".$sort; ?>"><span>Register</span></a></li>
<li><a href="browse.php?id=86&<?php echo "sort=".$sort; ?>"><span>Upload</span></a></li>
</ul></div>
</li>
</ul>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="menu">
<ul class="menu" id="menu2">

<li><a href="browse.php?id=44&<?php echo "sort=".$sort; ?>" class="parent"><span>My Account</span></a>
<div><ul>
<!-- <li><a href="browse.php?id=84&<?php echo "sort=".$sort; ?>"><span>Sign-In</span></a></li> -->
<li><span><input type="text" name="title"></span></li>
<li><a href="browse.php?id=85&<?php echo "sort=".$sort; ?>"><span>Register</span></a></li>
<li><a href="browse.php?id=86&<?php echo "sort=".$sort; ?>"><span>Upload</span></a></li>
</ul></div>
</li>
</ul>
</div>
You can ignore the hrefs, there for local use. I'm under the impression the identities of each menu is duplicated, but i'm not sure how to allow separation of identities. The second menu works, mouseover the menu comes up but the fade effect does not work.
Can someone please help?
Thank you.

Hi everyone,

I am very new to javascript & web editing in general, so I apologize if this is a silly question.

I am designing a site using this menu:
http://dynamicdrive.com/dynamicindex1/slideinmenu.htm

I would like to have two of these menus on the page. Ideally, each will pop out on a rollover. Currently, when I copy and paste the code, only one works (and pops out no matter which menu is rolled over).

How do I need to change the code so that both will work independently of each other on the same page? The CSS styling will be the same for both, however they will have different menu items.

Thank you in advance!!!