PDA

View Full Version : Moving Image over time?

dommy
10-03-2006, 11:14 AM
Hey,

I want to be able to move an image from a start point to an end point over a given number of days. How can I do this?

i.e.

START------------------------------------------------FINISH

And the image slowly moves from one side to the other over a given time. I can't use Flash so looking at other options.

Cheers
BubikolRamios
10-03-2006, 03:12 PM
can't do it by java script, unless u expect someone having browser opened several days on your page ? The logic must be on server.
Beagle
10-03-2006, 03:16 PM
set myImage.style.position = 'absolute'
then use setInterval or setTimeout

either way, you execute a function that changes the image.style.left by adding to it (you'll have to keep track of the current position in some other variable, because the style.left property is a string with 'px' at the end ('5px'). Then, you test against a max left, and if it is equal to or greater than your max, you clearInterval or clearTimeout


var currentLeft = 0;
var maxLeft = 500;
var img = document.getElementById('myImage');
var moveMyImg = setInterval(moveIt, 25);

function moveIt()
{
if (currentLeft < maxLeft)
img.style.left = ++currentLeft;
else
clearInterval(moveMyImg);
}


Untested code, but that should get you started.
Beagle
10-03-2006, 03:18 PM
Oh whoops, you need it moving over days!

use the javascript Date object and do some math to determine the style.left of the image based on the date.


var d = new Date();
var day = d.getDate();

img.style.left = day+'px';
dommy
10-03-2006, 09:21 PM
Thanks Beagle,

Thing is I'm a little new to this, would be great if u could write out an example?...or rather continue from below...

:)

UPDATE: I found this... http://www.c-point.com/javascript_tutorial/MMTutorial/lMoveImage.htm
which moves an image from left to right and I understand the code... but how can I add in a time variable to move right over a period of time say 200 days - yup its a long race....

I've included the script here from the link above...

<html>
<head>
<title>Moving an Image</title>

<script language="JavaScript">

Hmove=100;
function moveObjRight(obj)
{
obj.style.left=Hmove;
Hmove+=2;
if(Hmove<200)
window.setTimeout("moveObjRight(" +obj.id+ ");", 0);
}

</script>
<body>


<p><img id=JS style="z-index: 0; left: 100px; position: absolute; top: 50px"
height=32 width=101 align=baseline border=0 hspace=0 src="JavaScript.gif"></p>
<p>
<script language="JavaScript">
moveObjRight(JS);
</script>
</p>
</body>
</html>
BubikolRamios
10-03-2006, 11:01 PM
dommy: as I stated before:

window.setTimeout("moveObjRight ......


do jou expect users to have browser opened for 200 days , waiting to settimeout to execute ?

so forget settimeout.

what beagle sugested is the way to do it

so generaly:
1. set starting date of your choice(should be less or equal to now), put it in some variable
2. calculate difference beetwen now and starting date in days
3. here u are, u have ur position
dommy
10-03-2006, 11:04 PM
Hey BubikolRamios...

No settimout over 200 days isn't relevant, basically if it can get it position from finish date - (minus) start date, and that worked each time the page is loaded then thats fine. It doesn't have to be dynamic as in u see it move.Just need the new position on page reloads - thats all.

Sorry mate, but I'm not quite up to par on setting these variables... do u have some time to help get me started?

Thanks so far though!
BubikolRamios
10-04-2006, 01:03 AM
// should be something like this
var d1 = new Date();
// set date to 01.10.2006
d1.setUTCDate(0);
d1.setUTCMonth(9);

// contains todays date
var d2 = new Date();

var diffInDays = (getTime(d2) - getTime(d1) )/(24*60*60*1000);

document.write(diffInDays );





didn't test it doh

anyway look at:

http://www.w3schools.com/jsref/jsref_obj_date.asp

as you see d1 is baked into code, what happens when you reach 200 days, and want to do it all ower again ---> here comes up my server theory again. or hmm probably you can come up with something.
dommy
10-04-2006, 09:37 AM
Ok thanks, but how do i incorporate this into the js move script above? Currently it uses the window.setTimeout and then calls the move function... how do I change this so that it just holds the distance it needs to have travelled according to the date?

Arghh surely someone has to have done this already?

cheers :)