JavaScript - Drop Down Image Selector I - Help!!

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.

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

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

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

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

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

Can anyone tell me what I have done wrong here? I have the following html code

Code:

<div id='group1'>
  <tr class='time'>
    <td colspan='3' name='1262815200'></td>
  </tr>
					
  <tr>
    <td class='timeleft group1' name='1262815200' colspan='3'></td>
  </tr>	

  <tr class='game'>
    <td><input type='radio' name='G1' value='NYJ'>NYJ</td>
    <td><input type='radio' name='G1' value='BUF'>BUF</td>
    <td><select name='G1P' class='points' tabindex = '1'></select></td>
  </tr>	

</div>

and when I use the selector $('#group1 input) it does not select anything (namely the inputs in this code). But when I use the selector $('div input') it will select them (and more on the page which I don't want). Is anyone able to see what I have done wrong? I've tried everything I can think of in terms of testing, and I have narrowed it down to the selector. Thanks.

I have a series of hand-made arrays each of which has many elements, eg
Code:

var BlobI  = new Array("id1","id2","id4",..."id32");
var Blob2  = new Array("id1","id3","id5",.."id31");

and I have a script (with much help, some time back) which makes the elements change style, with the changes happening successively, element by element:
Code:

function noBlob (arrayA,visibility,current)  { 
	var arrayB=(typeof arrayA == 'string')? arrayA.split(',') : arrayA; 
	var blob = document.getElementById(arrayB[current]);
		blob.style.visibility = visibility; 
		if (current != arrayB.length - 1) { 
    		current++; 
    		setTimeout(function() {noBlob(arrayB, visibility, current)},100) }}

If I could get rid of all the ids (400+), both in the html and in the arrays, the whole thing would be much lighter. In theory, because of the way the elements in the arrays are arranged, I could use different iterations of the nth-child() selector to round up the elements of each array.

What I'm not clear about is this: there are several stand-alone selector engines, eg, Sly and Yass. They look as if they need to be used in conjunction with some more extensive js library, but I just want to combine the arrays the engine would return with my existing script.

Is this possible? eg, if using YASS (http://yass.webo.in/), something like:
Code:

var newBlob1 = _('div.BLOBS':nth-child(1))
var newBlob2 = _('div.BLOBS':nth-child(2))

Has any one experience with either engine?

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 using the following html & have tested it cross-browser with no malfunction
Code:

<a href="#quicklinks" name="modal">Quick Links</a>
<a href="#Login" name="modal">Login</a>

js part

Code:

     	//select all the a tag with name equal to modal
	$('a[name=modal]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		
		//Get the A tag
		var id = $(this).attr('href');
		//using href as id (already defined in CSS)
		$(id).fadeIn(2000);

Now a senior guy says that what I am doing with selectors is essentially illegal, I quote him
Quote:
Another potential problem is your use of the name attribute. When used with "A" tags, the name attribute is equivalent to the ID attribute, meaning that each name on a page should be unique. It's possible that the javascript engine is only setting the onclick() on the first element with the "modal" name.
Plz guide me

I have been using some javascript to select stylesheets (dependent upon window sizes) without problems, until IE8. I have stripped the code down to the following which seems to be where it fails in IE8.

Code:

<link rel="stylesheet" type="text/css" href="../../css-home.css" title="default" />
<link rel="stylesheet" type="text/css" href="../../css-thin.css" title="thin" />
<link rel="stylesheet" type="text/css" href="../../css-medium.css" title="medium" />
<link rel="stylesheet" type="text/css" href="../../css-large.css" title="large" />
<link rel="stylesheet" type="text/css" href="../../css-home.css" title="normal" />

Code:

<script type="text/javascript">
<!--
function changeStylesheet(description){
   var i, a;
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++){
	   if(a.getAttribute("title") == description){a.disabled = false;} // if the title of the css file is the same as the description, don't disable it 
	   else if(a.getAttribute("title") != "default"){a.disabled = true;} // otherwise if the title of the css file is not default, disable it 
   }
}
function selectLarge(){
changeStylesheet("large");
}

selectLarge();

// -->
</script>

The “normal” stylesheet is the same as “default”. Without this older versions of IE go straight to “large” (without javascript).

For these settings, all browsers display the default (or normal?) stylesheet without the script.

When the script is run Firefox, Opera and older versions of IE will use the “default” stylesheet combined with the “large” stylesheet. IE8 uses only the “default” and ignores “large”. It doesn’t appear to matter where in the page the script is run.

Any suggestions appreciated (it has never worked in Safari, Chrome and older versions of Opera if that helps!).