0

This page automatically calls the function moveit() on load. moveit() moves an image (a line) up and down. I want this to happen continuously; however, I do not know how to make my function restart. Currently, I am making the page reload every time the line reaches the bottom of the page. This takes a lot of time though, so I'd like to restart the function instead. Thanks! 

<html manifest="manifest.appcache">

<body onload="moveit(8)">

<img style="margin: 0 auto;" src="http://media.tumblr.com/593368ddaf4ad655258a076f959856fa/tumblr_inline_mgmuspje6G1re2ao1.bmp"></img>
<style type="text/css">

                .moveimage { position:absolute; right:0; bottom:0; z-index:2 }

}

</style>

<script language="JavaScript">

function moveit(spot)
{

if (document.getElementById("image1"))
  {
   var picture=document.getElementById("image1").style;
      if (spot<328)
      {
        picture.bottom= spot;
        spot+=3.7;
        setTimeout('moveit('+spot+')',15);
       }
      if (spot>328)
      {
                picture.top= spot;
        spot+=1.25;
                setTimeout('moveit('+spot+')',10);
      }
      if (spot>650)
      {
                window.location.reload();
      }
   }

}

</body>

</script>


</html>
user1743825
  • 21
  • 1
  • 2
  • 8
  • save the original value for your parameter and set spot to it instead of refreshing. – akonsu Jan 14 '13 at 22:14
  • Can't you just call moveIt(0) when you reach > 650? – dough Jan 14 '13 at 22:14
  • Do never use [`setTimeout`](https://developer.mozilla.org/en-US/docs/DOM/window.setTimeout) with strings!!! Better: `setTimeout(function() { moveit(spot); }, 10);` – Bergi Jan 14 '13 at 22:17

3 Answers3

2

Just change the line

window.location.reload();

to

picture.bottom = 0; // reset
picture.top = ""; // reset

moveit(); // and start over again
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • I agree, or you could also tell it to switch direction or something. But since you just want to restart the line, then modify the .top and .bottom properties – SoluableNonagon Jan 14 '13 at 22:18
  • @EliteOctagon: It seems the direction switch is already handled in the `spot>328` case and by using the `bottom` instead of the `top` property. Of course that could be done better, yes – Bergi Jan 14 '13 at 22:22
  • My mistake. This could all be easily solved with jQuery selectors and animations. (and would increase readability) – SoluableNonagon Jan 14 '13 at 22:28
  • Thanks guys! This all really helped a lot, and yeah, next time I'll definitely use jQuery :) – user1743825 Jan 15 '13 at 16:06
0

You could replace this line:

window.location.reload();

with something like:

setTimeout(function() { moveIt(8); }, 10);

Where the parameter 8 is the same as what you used from your onload handler - or of course you could set it to any other value as appropriate.

nnnnnn
  • 147,572
  • 30
  • 200
  • 241
0

This event handler will fire on html scroll event.

$('html').scroll(function(){
//do something
})

You can also use it on any container with overflow:scroll or overflow:auto.

kreig
  • 990
  • 11
  • 18