Using Javascript to shift location of divs w/ Up, Down, Left and Right buttons

StackOverflow https://stackoverflow.com/questions/16745492

Pergunta

I'm just getting into jquery and javascript but, I'm slamming my head against a wall trying to figure this one out. I've tried using .css and .animate commands, but I think I'm doing them improperly, or i'm failing to differentiate the variables.

In the End there will be DIV's for body, eyes, face, teeth, etc. Each with their own id.

There will be at least 20 in each 'category'

The end goal is to have a sort of 'creature creator' whereby you have a series of eyes, teeth, etc. Each of them being a transparent png, with z-index if necessary while layering.

Currently I'm using the following to target/replace the div imagery:

function showimagename(){document.getElementById('centraldiv').innerHTML="<a href='#'>
<img src='images/imagethumb2.png' border='0'></a>";}

and that part works flawlessly.

Instead of a previous drag-and-drop method (which had limited compatibility), I'm attempting to add a set of up, down, left, right arrows which when clicked will shift that particularly named div say 5 pixels. After the user is happy with their choices, I was planning to use canvas to capture the image (and then maybe share? send? implement further?) I've removed any actual images to keep it simple.

Would this work in flash? Of course! I just have no interest in coding in flash, as i'm going for as much compatibility as possible.

THE PROBLEM:

I have 4 'arrows' which I can designate to shift up, down, left, or right. But for some reason I can only do either up/down or left/right, and furthermore when I add a second set for another div (say the creature's feet) it only respects the last iteration of the script.

I apologize if my code is inefficient, sloppy, or otherwise insults your senses, im new :D.

<!DOCTYPE html>
<html><head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
var imgObj =null;function init()
{imgObj = document.getElementById('centraldiv');
imgObj.style.position= 'relative'; 
imgObj.style.top = '0px';}function moveDown()
{imgObj.style.top = parseInt(imgObj.style.top)+5+'px';}
window.onload =init;

var imgObj =null;function init()
{imgObj = document.getElementById('centraldiv');
imgObj.style.position= 'relative'; 
imgObj.style.top = '0px';}function moveUp()
{imgObj.style.top = parseInt(imgObj.style.top)-5+'px';}
window.onload =init;
</script>

<script type="text/javascript">
var imgObj =null;function init()
{imgObj = document.getElementById('centraldiv');
imgObj.style.position= 'relative'; 
imgObj.style.left = '0px';}function moveRight()
{imgObj.style.left = parseInt(imgObj.style.left)+5+'px';}
window.onload =init;

var imgObj =null;function init()
{imgObj = document.getElementById('centraldiv');
imgObj.style.position= 'relative'; 
imgObj.style.left = '0px';}function moveLeft()
{imgObj.style.left = parseInt(imgObj.style.left)-5+'px';}
window.onload =init;
</script>
</head>
<body>
<div id="centraldiv"><img height="50" width="50" src="//upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia- logo.png"></div><P>
<a href="#" onclick="moveLeft()">LEFT</A>
<a href="#" onclick="moveRight()">RIGHT</A>
<a href="#" onclick="moveDown()">DOWN</A>
<a href="#" onclick="moveUp()">UP</A>
</body></html>

please help, i'm irritating my coding buddies!

Foi útil?

Solução

You can achieve the intended effect quite simply with JQuery (which you seem to be getting into).

Not sure exactly how you plan to lay it all out, but something like this should work:

moveImageLeft = function () {
   $('img').animate({'left', '-5px'});
}
$("#moveLeft").click(moveImageLeft);

This example will move all images to the left, so you'll want to name your images carefully. Having said that, the drag and drop method you originally thought of will work fine in lots of browsers. Check out JQuery UI's Draggable Widget. We're always here if you need help with implementation.

db

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top