CODEWITHSUNDEEP
javascriptfunctionmove
Arsi
Arsi

Reputation: 1

How to make a repeat move in javascript?

I'm using JavaScript to make a progres bar when downloading files. I have done it to move from server to client as a picture, but I don't know how to make it to repeat so the progress will continue. I have used this script. What do I have to do?

<style type="text/css">
#apDiv1 {
    position:absolute;
    width:142px;
    height:140px;
    z-index:1;
    background-color: #FFFFFF;
    background-image: url(server.png);
}
#apDiv2 {
    position:absolute;
    width:142px;
    height:140px;
    z-index:2;
    left: 500px;
    top: 15px;
    background-color: #FFFFFF;
    background-image: url(laptop.png);
}
#apDiv3 {
    position:absolute;
    width:346px;
    height:140px;
    z-index:3;
    left: 153px;
    top: 15px;
}
body {
}
</style>
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3"><br />
  <script type="text/javascript">
<!--
var imgObj = null;
var animate ;
function init(){
   imgObj = document.getElementById('myImage');
   imgObj.style.position= 'relative'; 
   imgObj.style.left = '0px'; 
}
function moveRight(){
imgObj.style.left = 200 + 200 + 'px';
if (10 <= left) {
imgObj.style.left = (left + 300) + 'px';
imgObj.style.visibility='visible';

} else

if (left>=500) {
imgObj.style.left = '0px';
}
}
function animate(){
animate = setTimeout(moveRight,200);

}
window.onload =init;
//-->
</script>
</head>
<body>
<form>
<img src="file:///C|/Documents and Settings/Administrator/Desktop/New Folder (2)/folder.png" width="65" height="67" id="myImage" />
<p>Click the buttons below to handle animation</p>
<input type="button" value="Shkarko" onclick="moveRight();" />
</form>
</div>

Upvotes: 0

Views: 497

Answers (1)

gilly3
gilly3

Reputation: 91527

Use setInterval() instead of setTimeout():

function animate(){
    animateInterval = setInterval(moveRight,200);
}

When you are ready for it to stop animating, call clearInterval(animateInterval)

Make sure to rename your animate variable so that it does not conflict with the animate() function. You'll also need to actually call animate() at some point to get it started.

Edit: You need to crack open your JavaScript console and look at the error messages you get (hint: hit the f12 key). You get an error on the second statement of moveRight() because left is not defined.

Also, animate() is never called, so any interval or timeout you set up would never be triggered.

There is a logic error in moveRight(). Even if left were defined, your else if statement would never be called. If left is greater than 500, it is also greater than 10. The first if will be called and the else if will thus be ignored.

Your HTML is invalid. You have a close </head> tag with no matching open <head> tag. And you have an open <body> tag without a closing </body> tag. If you did have those tags, you'd be in other trouble - the <div> elements would be in the <head>, and thus wouldn't even be rendered. The last <div> element's closing tag would appear in the <body> even though the open tag is in the <head>.

Upvotes: 1

Related Questions