3

I have the simple function of changing content of container div. There is a <table> inside the container <div>, with 2 <td>s, the javascript simply moves left this <table> and it works, but onclick and I need to execute the moving function with time interval.

 <div onclick="move(this.children[0])" class="table_wrap"> <div class="table_scroll" style="left: 0px;"> <table cellpadding="0" cellspacing="5" width="1920px"> <tr> <td style="background-color: red;"> a </td> <td style="background-color: blue;"> b </td> </tr> </table> </div> </div> <script language="javascript"> function move(elem) { var left = 0 function frame() { left -= 5; // update parameters elem.style.left = left + 'px' // show frame if (left == -965) // check finish condition clearInterval(id) } var id = setInterval(frame, 1) // draw every 10ms } </script>

And CSS:

 <style type="text/css"> .table_wrap{ position:relative; overflow:hidden; width: 967px; height: 250px; left: -2px; top: 5px; } .table_wrap .table_scroll{ position: absolute; text-align:center; white-space:nowrap; } </style>

I tryed to use setInterval, but failed.

http://jsfiddle.net/hqztm2dt/1/ here is the JSfiddle, just click on the red line.. Thanks in advance for the attention !

Improve this question
6
  • 1
    id is a local variable, and will be destroyed as soon as the execution of frame has ended. You've to declare the said variable outside of frame. Also you'd probably need a setTimeout instead of setInterval. Commented Feb 17, 2015 at 11:56
  • 1
    If it works but not as expexted, perhaps your interval is too fast? setInterval takes in ms...so 1 = 1 ms regardless 10 ms is still really fast! Commented Feb 17, 2015 at 11:56
  • 1
    Could you please include an example of where you try with setInterval (or preferably setTimeout)? Commented Feb 17, 2015 at 12:07
  • 1
    It's pretty difficult to diagnose what you did wrong with your setInterval if you don't show us what you did. My gut feeling is that because you don't have an id on the <div> your code is no longer able to (easily) access it through the DOM Commented Feb 17, 2015 at 12:09
  • 1
    Thanks for the attention.. The answer of @Naeem Shaikh is what I needed Commented Feb 17, 2015 at 12:14

2 Answers 2

Reset to default
3

If you need to move it on interval, see this: http://jsfiddle.net/gsddsxgy/2/ (here the time interval is 3ms)

html: 

<div class="table_wrap"> <div id='move' class="table_scroll" style="left: 0px;"> <table cellpadding="0" cellspacing="5" width="1920px"> <tr> <td style="background-color: red;"> a </td> <td style="background-color: blue;"> b </td> </tr> </table> </div> </div>

JS: 

setInterval(function(){ var elem=document.getElementById('move'); var left = 0 function frame() { left -= 5; // update parameters elem.style.left = left + 'px' // show frame if (left == -965) // check finish condition clearInterval(id) } var id = setInterval(frame, 1) // draw every 10ms }, 3000);

If you need to move the div on click but after a little time gap, see this http://jsfiddle.net/gsddsxgy/

code: 

function move(elem) { setTimeout(function(){ var left = 0 function frame() { left -= 5; // update parameters elem.style.left = left + 'px' // show frame if (left == -965) // check finish condition clearInterval(id) } var id = setInterval(frame, 1) // draw every 10ms }, 1000); }
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

@JaniBolkvadze:- glad, but can you share which one of the above solution helped you
jsfiddle.net/gsddsxgy/2 that's what I needed.. thank you for the attention..
Once more question please: moving stops when (left == -965).. Then code executes moving again.. Should I use javascript Loop to stop it? I need it to be executed once.
simply using setTimeout? that's it, thanks once again
0

The problem with your code in jsFiddle is the move function isn't defined when trying to call it - if you use addEventListener you can bind the method to the click event using just javascript and not the onClick attribute. Using your code:

var elem = document.getElementById('wrapper'); elem.addEventListener('click', move); function move() { var left = 0 function frame() { left -= 5; // update parameters elem.style.left = left + 'px' // show frame if (left == -965) // check finish condition clearInterval(id) } var id = setInterval(frame, 1) // draw every 10ms }

JS fiddle - http://jsfiddle.net/b1q7poj4/2/

Improve this answer

Comments