JavaScript - Drop Down Over Image Fader

I would appreciate some help, I want to use the Drop Down Image selector II script on a website, to display fabric, as there is a large number of samples, I want to break the list up alaphabetically.

Is is possible to use the script more than once on a page, when I tried to do this the script did not work, if it can not be used more than once on a page, has anyone seen a program that could be.

Thanks

I'm currently setting up a website that will display, for each link in the drop down, an image below the box, and text or, if necessary, an image to the right, describing the item & listing materials & prices. I've tried iframes with a drop down, but because I'm hosted with BraveHost, I end up with 50 ads on the main page, and 50 more in the iframe, so I'd like to avoid that if possible. If you want to see what I'm looking for, go here. http://andicrafts78.bravehost.com/test.html. How can I modify the drop down selector to make it happen?

Hello All,

I am trying to find a solution for this ..... kindly help incase you know....

I need a drop down menu to appear when I left-click an image....
have tried a lot but failed...

Please help me out on this

Thanks in advance,,,

Regards

Hi I am wondering how I would limit the drop zones to just one image per drop zone?


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>

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;
});

Anyone know?

I'm a complete newbie so please excuse me if this is obvious.

I'd like to have a drop down menu that pops up a small new window with an image. So for, every attempt results in the image appearing in a new tab instead of a small, pop up style window.

Here's my form

<select name="parms">

<option value="AirTemp.jpg">AirTemp</option>
<option value="Humidity.jpg">Humidity</option>
<option value="Windspeed.jpg">Wind Speed</option>

</select>

Many thanks.

I have a drop down menu and an image slider that both use javascript code to function. The image slider appears right below the menu but when the actual menu drops down, the drop down part of the menu goes behind the image slider. How do I make it so that the menu drops above the image slider and not behind it?

Hi all,

I hope you are able to help me out. I have a a page (see code below, I have compressed it to 2 images) where I want to let the user drag and drop images to anywhere on the page (I have achieved this.)

What I want to be able to do is allow the user to dock 2 images together.
In the example below the 2 images are horizontal lines. What I want the user to be able to do is move the images together and dock them so that they form one horizontal line.
When the user moves one of the pictures both will move and stay docked.

my initial idea was that when the user selects "dock" I somehow move both images into a div and make the div dragable, that way both images move together. Then if the user selects "undock" both images are removed from the div and become draggable again.

I hope this makes sense.

Can anyone help?


[CODE]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>drag, Drop and dock</title>
<style type="text/css">
.drag {
border: 1px solid black;
background-color: rgb(240, 240, 240);
position: relative;
padding: 0.5em;
margin: 0 0 0.5em 1.5em;
cursor: move;
}
</style>

<script language="JavaScript" type="text/javascript">
<!--

// this is simply a shortcut for the eyes and fingers
function $(id)
{
return document.getElementById(id);
}

var _startX = 0; // mouse starting positions
var _startY = 0;
var _offsetX = 0; // current element offset
var _offsetY = 0;
var _dragElement; // needs to be passed from OnMouseDown to OnMouseMove
var _oldZIndex = 0; // we temporarily increase the z-index during drag

InitDragDrop();

function InitDragDrop()
{
document.onmousedown = OnMouseDown;
document.onmouseup = OnMouseUp;
}

function OnMouseDown(e)
{
// IE is retarded and doesn't pass the event object
if (e == null)
e = window.event;

// IE uses srcElement, others use target
var target = e.target != null ? e.target : e.srcElement;

// for IE, left click == 1
// for Firefox, left click == 0
if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'drag')
{
// grab the mouse position
_startX = e.clientX;
_startY = e.clientY;

// grab the clicked element's position
_offsetX = ExtractNumber(target.style.left);
_offsetY = ExtractNumber(target.style.top);

// bring the clicked element to the front while it is being dragged
_oldZIndex = target.style.zIndex;
target.style.zIndex = 10000;

// we need to access the element in OnMouseMove
_dragElement = target;

// tell our code to start moving the element with the mouse
document.onmousemove = OnMouseMove;

// cancel out any text selections
document.body.focus();

// prevent text selection in IE
document.onselectstart = function () { return false; };

// prevent IE from trying to drag an image
target.ondragstart = function() { return false; };

// prevent text selection (except IE)
return false;
}
}

function ExtractNumber(value)
{
var n = parseInt(value);
return n == null || isNaN(n) ? 0 : n;
}

function OnMouseMove(e)
{
if (e == null)
var e = window.event;

// this is the actual "drag code"
_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';

}

function OnMouseUp(e)
{
if (_dragElement != null)
{
_dragElement.style.zIndex = _oldZIndex;

// we're done with these events until the next OnMouseDown
document.onmousemove = null;
document.onselectstart = null;
_dragElement.ondragstart = null;

// this is how we know we're not dragging
_dragElement = null;

}
}
//-->
</script>
</head>

<body>

<img class="drag" src="Horizontal_Line.png" alt="A horizontal line" />
<img class="drag" src="Horizontal_Line.png" alt="Another horizontal line" />

</body>
</html>

[CODE]

I saw this on the web the other day and didn't mark the page I found it on. How do I change an image based on what selection is made in a drop down?

Kathy

Something similar to the navigation menu on http://www.gamewearteamsports.com/. You hover over a link and a box appears below that spreads the width of the menu itself. Friend of mine told me it was using actionscript but I have no idea how to create a drop down box (not menu). Any ideas? My friend told me Dreamweaver has the ability t create a drop down box but I have no idea.

Also does anyone know how to create an image slider similar to the one on that site? A slider that fades from one image to the next with the navigation arrows on the left and right side and the dots on top left?

I have added "Swap Image" into a page which already has a Drop Down Menu. However the Drop Down Menu stopped working. I know I have to remove the last line from the Drop Down Script ...window.onload=startList;... and integrate it into the <body tag> but I can't seem to figure it out.

Someone please help...

Below is the script for the drop down menu.

// JavaScript Document

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;

Here is the page I'm trying to work with.

http://sigautoparts.com/home-test.htm

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

I have a problem with a drop down menu showing behind image slider (not flash), as the menu shows up behind the large image slider, and was hoping someone can help me:

http://bedrockstoneanddesign.com/

It only happens in FireFox.....

any help is appreciated. thanks

Hello all,


Essentially what I am trying to get without much success on the issue is this:

I want an icon in my template that, when you click on that certain icon (image), a drop down menu appears. You know when you click the file option in your browser's toolbar, and a drop down menu appears? It can be just like that, but instead of save as and open, links will be there to places within our intranet opened in a new window.

This has to work for IEX 7+ because that's all our company decides to use. I tried to submit a chang erequest for them to move to a better CSS/Javascript supportive browser such as Opera, Firefox, Google Chrome... but they're way too fixed on IEX for some odd reason.

I am obliged for any help on this.

*edit* colors dont matter. It can be the default colors used in a basic drop down menu. I figure javascript would have more options though.

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.