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.

Whats wrong with this animation? css/javascript

Discussion in 'JavaScript' started by jasperschellekens, Jan 14, 2019 at 11:21 AM.

  1. #1
    When i have this code the animation works, but the image is in the wrong position:
    SEMrush
    
        #myAnimationUp {
          background-image: url("images/ships/ship<?php echo $_SESSION['getshiptype']; ?>up.png");
          background-size:     cover;                      
          background-repeat:   no-repeat;
          height:55px; 
          position:absolute; 
          width:30px;
          bottom:1px; 
          right: 30px;
        }
    
    Code (markup):
    So i imagined, pulling the image down with css would do the job since bottom would display the image higher then using this code:
    
        #myAnimationUp {
          background-image: url("images/ships/ship<?php echo $_SESSION['getshiptype']; ?>up.png");
          background-size:     cover;                      
          background-repeat:   no-repeat;
          height:55px; 
          position:absolute; 
          width:30px;
          top:35px; 
          right: 30px;
        }
    
    Code (markup):
    With the code above the image is in the correct position, but the animation doesn't happen anymore. The image stays where it is unlike the most upper code where the animation does work.

    Animation code:
    
        <script>
          function myMoveUp() {
            var elem = document.getElementById("myAnimationUp");  
            var pos = 0;
            var id = setInterval(frame, 50);
            Clock.pause();
            function frame() {
              if (pos == 105) {
                clearInterval(id);
                Clock.resume();
                keymanager.resume();
              } else {
                pos++; 
                elem.style.bottom = pos + 'px'; 
                keymanager.suspend();
              }
            }
            MoveShip();
          }
        </script>
    
    Code (markup):
    I have taken 2 screenshots to help understand whats going on:

    https://i.ibb.co/q1Tgmp2/screen6.png -> Screen shot 1

    https://i.ibb.co/87GM5yq/screen5.png -> Screen shot 2

    In screenshot 1 you can see that the ship is positioned in grid C4.

    In screenshot 2 you can see the ship facing north, but not in grid C4, but in B4.

    This only happens when i use bottom:1px; in the css. At this time the animation works. When i use top:35px; to get the image in grid C4 the animation doesn't work anymore.

    What is causing this and how do i fix it?
     
    jasperschellekens, Jan 14, 2019 at 11:21 AM IP
    SEMrush
  2. jasperschellekens

    jasperschellekens Greenhorn

    Messages:
    25
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    5
    #2
    Nobody has an idea on this?
    elem.style.top works but elem.style.bottom just doesn't.. why?
     
    jasperschellekens, Jan 19, 2019 at 7:30 AM IP
  3. Spoiltdiva

    Spoiltdiva Prominent Member

    Messages:
    5,911
    Likes Received:
    1,549
    Best Answers:
    46
    Trophy Points:
    395
    #3
    Recheck the theme you're using to see if they correspond, I don't have time to look at it. style.css. Or debug jCarosel to find out why it thinks that's a good size.................... DOM inspector.
     
    Spoiltdiva, Jan 19, 2019 at 7:43 AM IP
  4. jasperschellekens

    jasperschellekens Greenhorn

    Messages:
    25
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    5
    #4
    Im not using any theme. Everything is correct except when i change top to bottom in elem.style it freaks out. Each direction works except this one.

    edit: I had to add a relative div instead of absolute. That was my error. Fixed it now
     
    jasperschellekens, Jan 19, 2019 at 7:45 AM IP