Problem with moving a layer. Plz help! [Archive]

troy1984

10-29-2003, 03:46 PM

Hi all,
Im having trouble with a javascript;
I want an image inside of a div move from point to point. This works... only i dont want the layer to move diagonally across the page. The layer must only move horizontally and vertically.

This is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>

<div id="ball" style="position:absolute;"><img src="ball.gif"></div>
<a href="java script: moveit(400, 100)">About</a> <a href="java script: moveit(500, 100)">news</a> <a href="java script: moveit(610, 100)">Sitemap</a> <a href="java script: moveit(720, 100)">Contact</a>
<br> <a href="java script: moveit(140, 192)">Why ADF</a>

<script language="JavaScript" type="text/javascript">
step = 1;

startX = 100;
startY = 200;

currentX = startX;
currentY = startY;

function initialize()
{
//Start positions
document.getElementById("ball").style.left = startX;
document.getElementById("ball").style.top = startY;
}

function moveit(x, y)
{
if (currentX < x)
{
document.getElementById("ball").style.left = currentX + step;
currentX = currentX + step;
}

if (currentX > x)
{
document.getElementById("ball").style.left = currentX - step;
currentX = currentX - step;
}

//-----

if (currentY < y)
{
document.getElementById("ball").style.top = currentY + step;
currentY = currentY + step;
}

if (currentY > y)
{
document.getElementById("ball").style.top = currentY - step;
currentY = currentY - step;
}

if ( (currentX != x) || (currentY != y)) setTimeout("moveit("+x+","+y+")",1);

}

initialize();
</script>

</body>
</html>

Thank you everyone.
Greetings,
Troy

(I've uploaded my script on www.trespassersw.nl/scm ... I want the ball to slide over the darblue line)

Khalid Ali

10-30-2003, 08:00 AM

try playing witht he values in the function moveIt
where
x= will move the item horixontally(gigger number will move it farther towards right)

y= will move the itemvertically(lesser number will move it towards up)
<a href="javascript: moveit(100, 0)">Why ADF</a>

troy1984

10-30-2003, 11:16 AM

Ive positioned the items myself as they should be.
But insn't it possible if (lets take why adf for example)

<a href="javascript: moveit(140, 192)">Why ADF</a>

First move the image to (140, 100) (100 is the heigt of the line on my page i want the layer to move over)

And from that point to (140, 192).

That way the ball doesnt go diagonally over the page. It comes back to a sertain point and then moves down.

Thank you in advance,
Greetings Troy