Web Analytics Made Easy -
StatCounter Moving Image over time? - CodingForum

Announcement

Collapse
No announcement yet.

Moving Image over time?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Moving Image over time?

    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
    Last edited by dommy; Oct 3, 2006, 08:56 AM.

  • #2
    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.
    Found a flower or bug and don't know what it is ?
    agrozoo.net galery
    if you don't spot search button at once, there is search form:
    agrozoo.net galery search

    Comment


    • #3
      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

      Code:
      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.

      Comment


      • #4
        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.

        Code:
        var d = new Date();
        var day = d.getDate();
        
        img.style.left = day+'px';

        Comment


        • #5
          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_tu...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...

          Code:
          <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>
          Last edited by dommy; Oct 3, 2006, 06:23 PM.

          Comment


          • #6
            dommy: as I stated before:
            Code:
            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
            Found a flower or bug and don't know what it is ?
            agrozoo.net galery
            if you don't spot search button at once, there is search form:
            agrozoo.net galery search

            Comment


            • #7
              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!

              Comment


              • #8
                Code:
                   // 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.
                Last edited by BubikolRamios; Oct 3, 2006, 09:08 PM.
                Found a flower or bug and don't know what it is ?
                agrozoo.net galery
                if you don't spot search button at once, there is search form:
                agrozoo.net galery search

                Comment


                • #9
                  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

                  Comment

                  Working...
                  X