1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Stop moving an js animation

Discussion in 'JavaScript' started by jasperschellekens, Jan 5, 2019.

  1. #1
    Hi all, so im new to javascript.
    Im currently creating a browser game and found a little bit of code on how to make an animation. E.g Image or another div.
    So the problem here is that i need it to move within the MyContainer of 100 by 100 pixels. It just goes to the right bottom corner of my screen. How to stop the animation after 100 pixels for example?
    SEMrush
    Here is my code:
    
    //css
    #myContainer {
      width: 100px;
      height: 100px;
      position: relative;
    }
    #myAnimation {
      background-image: url("images/ships/ship1.png");
      background-size:     cover;                      
      background-repeat:   no-repeat;
      height:45px; 
      left:10px; 
      position:absolute; 
      top:10px; 
      width:25px
    }
    //js
    function myMove() {
        alert("example");
        var elem = document.getElementById("myAnimation");  
        var pos = 0;
        var id = setInterval(frame, 10);
        function frame() {
          if (pos == 350) {
            clearInterval(id);
          } else {
            pos++; 
            elem.style.top = pos + 'px'; 
            elem.style.left = pos + 'px'; 
          }
        }
      }
    //html
           <td> 
              <a href="#">
              <div id ="myContainer">
                <div class="container">
                  <div id ="myAnimation"></div>
                  <img src="worldmap/'.$grid.'/row-1-col-1.png">
                    <div class="bottom-left">
                    <div class="gts">A1</div>
                  </div>
                </div>
              </a>
            </td>
    
    Code (markup):
    So basically the question is, How to make the animation move in mycontainer only?
     
    jasperschellekens, Jan 5, 2019 IP
    SEMrush
  2. jasperschellekens

    jasperschellekens Greenhorn

    Messages:
    25
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    5
    #2
    Lol im such a morron... It was just the if statement for the pos prior to the else:

    if (pos == 350) {
     
    jasperschellekens, Jan 5, 2019 IP
  3. Spoiltdiva

    Spoiltdiva Prominent Member

    Messages:
    6,371
    Likes Received:
    1,834
    Best Answers:
    50
    Trophy Points:
    395
    #3
    I don't want you to feel stupid or anything, but it's spelt moron.;)
     
    Spoiltdiva, Jan 5, 2019 IP
  4. jasperschellekens

    jasperschellekens Greenhorn

    Messages:
    25
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    5
    #4
    Told u.. :D
    Im having another little problem.
    Take a look at these 2 screenshots.
    At the first one you can see the ship in grid A1. I have a nice animation to move it to B1. Check the second picture, When the ships moves to grid B1, it goes behind it instead of in front of it in A1.
    How to fix this?
    Also is there a way to delete the image after movement?
     

    Attached Files:

    jasperschellekens, Jan 5, 2019 IP
  5. Spoiltdiva

    Spoiltdiva Prominent Member

    Messages:
    6,371
    Likes Received:
    1,834
    Best Answers:
    50
    Trophy Points:
    395
    #5
    My advice would be to acquire Genesis Framework. This way if you run into this kind of issue again you will have the answers. But I don't have it, and don't have the answer either.
     
    Spoiltdiva, Jan 5, 2019 IP
  6. jasperschellekens

    jasperschellekens Greenhorn

    Messages:
    25
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    5
    #6
    Isn't Genesis Framework for wordpress? I am not using that.. that is a content management system. I am creating something from scratch.

    Im really confused right now.
    So yesterday i thought lets make all movement directions and see how they work.
    As seen in the screenshots before, when you go from up to down, or left to right. The ship hides behind the next grid.
    But... When i move from right to left, or from down to up, it appears in front of the image like i want it to be and it doesn't hide anymore.
    Is this because of the fact that the images are created after the animation?

    This is my code:
    
    #myAnimationRight {
      background-image: url("images/ships/ship1right.png");
      background-size:     cover;                      
      background-repeat:   no-repeat;
      height:30px; 
      position:absolute; 
      width:50px;
      top:30%
    }
    #myAnimationLeft {
      background-image: url("images/ships/ship1left.png");
      background-size:     cover;                      
      background-repeat:   no-repeat;
      height:30px; 
      position:absolute; 
      width:50px;
      top:30%; 
      right: 1px
    }
    
    <script>
      function myMoveRight() {
        var elem = document.getElementById("myAnimationRight");  
        var pos = 0;
        var id = setInterval(frame, 50);
        function frame() {
          if (pos == 105) {
            clearInterval(id);
          } else {
            pos++; 
            elem.style.left = pos + 'px'; 
          }
        }
      }
    </script>
    <script>
      function myMoveLeft() {
        var elem = document.getElementById("myAnimationLeft");  
        var pos = 0;
        var id = setInterval(frame, 50);
        function frame() {
          if (pos == 105) {
            clearInterval(id);
          } else {
            pos++; 
            elem.style.right = pos + 'px'; 
          }
        }
      }
    </script>
    
    <td> 
              <a href="#">
              <div id ="myContainer">
                <div class="container">
                  <div id ="myAnimationRight"></div>
                  <img src="worldmap/'.$grid.'/row-1-col-2.png">
                    <div class="bottom-left">
                    <div class="gts">A1</div>
                  </div>
                </div>
              </a>
            </td>
            <td> 
              <a href="#">
              <div id ="myContainer">
                <div class="container">
                  <div id ="myAnimationLeft"></div>
                  <img src="worldmap/'.$grid.'/row-1-col-3.png">
                    <div class="bottom-left">
                    <div class="gts">A1</div>
                  </div>
                </div>
              </a>
            </td>
    
    Code (markup):
     
    jasperschellekens, Jan 6, 2019 IP
  7. Spoiltdiva

    Spoiltdiva Prominent Member

    Messages:
    6,371
    Likes Received:
    1,834
    Best Answers:
    50
    Trophy Points:
    395
    #7
    You are braver than I am. I might have gone with something like CSS3's Flexible Box Layout Module. If you have a box on your web page that changes size, Flexbox will change elements within that box to best fit parameters you specify....so easy.
     
    Spoiltdiva, Jan 6, 2019 IP
  8. jasperschellekens

    jasperschellekens Greenhorn

    Messages:
    25
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    5
    #8
    Thanks for the suggestion. I managed to find a small fix using css.
    Setting the z index to -1 gives it priority over other images i guess? Because thats why i did.
     
    jasperschellekens, Jan 6, 2019 IP