How To Change Div Position Dynamically, It Must be Absolute Position in for loop

Question

How can I apply my div position x value to a variable? And how to iterate it in a for loop?

<div id="object"></div>
<style>
  #object{
    position:absolute;
    width:10px;
    height:10px;
    background:#ff8800;
  }
</style>
<script>
  function play(){
    // here how to Add my div position to a variable And Applaying of Iteration In Forloop
    // how to change position Of Its in For loop
    for(){

    }
    // I am Strucked At Here 
 }
 </script>

What are you trying to do? I see you want to use the div's position for something in a loop, but what effect are you trying to achieve? Some sort of animation, perhaps? — DACrosby, Sep 04 '16 at 18:46

score 5 · Accepted Answer · answered Sep 06 '16 at 04:05

Try This With Logic Of Play And Stop With Some UI Elements .

 var speed = 5;
        function play(){
            if($("#object").data("play"))
            {
               setTimeout(function(){
      var count = $("#object").position().left;
    count += speed;
    $("#object").css("left",count);
                requestAnimationFrame(play);
     },500);
            }
        }
        $("#play").click(function(){
            $("#object").data("play",true);
          $('#object').css('background','green');
   play();
   $('#stop').css('display','block');
        });
        $("#stop").click(function(){
            $("#object").data("play",false);
            $('#object').css('background','#ff8800');
   $('#stop').css('display','none');
        });

 input
    {
    position:absolute;
    width:50px;
    height:25px;
    top:100px;
    }
    #play
    {
    background:green;
 border:none;
 color:#fff;
 border-radius:15px;
    left:35px;
    }
    #stop
    {
 background:#ff8800;
 border:none;
 border-radius:15px;
 color:#fff;
    left:35px;
 display:none;
    }
    #object{
    position:absolute;
    width:10px;
    height:10px;
    background:#ff8800;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div id="object"></div>
    <input id="play" type="button" value="play">
    <input id="stop" type="button" value="stop">

Its Exactly Worked At Any Resolution – Samudrala Ramu Sep 06 '16 at 04:09 — Samudrala Ramu, Sep 06 '16 at 04:09

score 0 · Answer 2 · edited May 23 '17 at 11:53

You can't achieve this using the for loop and setting new position of the div here. This is due to the fact, that JavaScript is single-threaded. I suggest you to read the answer to this question, it describes the problem quite well.

To somehow 'unblock' the thread you can use setTimeout calls and set new position in their callbacks. See the fiddle I've created for you to show you this method in action. This is a kind of a workaround of JS limitations but it works. As described in the answer I linked in the previous paragraph:

The idea behind it is that you give the UI some time to update every once in awhile. Since there's no synchronous sleep function in Javascript, the only way to achieve this is to use setTimeout (or setInterval with a little bit more complicate logic) to delay the execution of every loop of your complex calculations. This would give the browser some time to update the UI between loops, giving the visual effect of multiple things happening simultaneously. A few ms should be more than enough for the UI to reflect the latest changes.

However, the best way to do animations on web pages is by using CSS transitions. Just in case you are not limited to doing it in JS, I've created a fiddle to show you this solution as well (see how smooth the animation is).

Further reading:

What the heck is the Event Loop anyway? - a great video by Philip Roberts, which will clarify, how the JS thread works and why using setTimeout 'solves' the problem
CSS transitions @ W3Schools
Smooth and efficient web animations - do's and don'ts

score -1 · Answer 3 · answered Sep 02 '16 at 06:55

try this...

 <!DOCTYPE HTML>
<html>
<head>
    <title>testing</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>

    <div id="object"></div>
    <input id="play" type="button" value="play">
    <input id="stop" type="button" value="stop">
    <style>
    input
    {
    position:absolute;
    width:50px;
    height:25px;
    top:100px;
    }
    #play
    {
    left:35px;
    }
    #stop
    {
    left:100px;
    }
    #object{
    position:absolute;
    width:10px;
    height:10px;
    background:#ff8800;
    }
    </style>
    <script>
        var _speed = 5;
        function play(){
            if($("#object").data("play"))
            {
                var _x = $("#object").position().left;
                _x += _speed;

                $("#object").css("left",_x);
                requestAnimationFrame(play);
            }
        }
        $("#play").click(function(){
            $("#object").data("play",true);
            play();
        });
        $("#stop").click(function(){
            $("#object").data("play",false);
        });
    </script>
</body>
</html>

How To Change Div Position Dynamically, It Must be Absolute Position in for loop

3 Answers3