CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jordan Pallone
Jordan Pallone

Reputation: 1

Move div down once past a certain point

Im trying to make '.pierre' .moveDown once the image has a left position of 20% but its not working. Whats supposed to happen is once the image has a left position of 20% it needs to fall down the page by itself. The html and css code is located in the fiddle.

Heres a link to a fiddle https://jsfiddle.net/Pallonej/0vhc7pqq/

this is my script thats not working

if ($('.pierre').css('left') == '20%') {
    $(this).moveDown();
}

Upvotes: 0

Views: 63

Answers (3)

Tempestas Ludi
Tempestas Ludi

Reputation: 1165

As Alundra alreay mentioned, you should use .offset(). You can add a callback to the .animate function, which will be executed after the animation has finished. If the location is right, you can call stop, in order to stop all current (and future) animation, so it won't move left again for the times you button-bashed left. Then you can again animate it to let it fall. The new js code (I removed the second right-left button part for readability):

//move person
$(document).keydown(function(e) {
    if (e.keyCode == 37) { // left
        $(".pierre").animate({
            left: "-=30"
        }, function(){
            if($('.pierre').position().left < window.innerWidth/5){
                $('.pierre').stop(true);
                $('.pierre').animate({
                    top: "+=1000"
                });   
            }
        });
    }
});

Upvotes: 0

IndieTech Solutions
IndieTech Solutions

Reputation: 2541

You need to work with the offset property and not position

Here's an example for your question with extra feature to illustrate the concept :

    var position =  $(".pierre").offset();

$(document).keydown(function(e) {
 var y= $(".pierre").offset().top;
      var x = $(".pierre").offset().left;
    if (e.keyCode == 37) { // left

      $("#position").html("X: "+x+" , Y:"+y);


        $(".pierre").animate({
            left: "-=30"
        });


    } else if (e.keyCode == 37) { // right
        $(".pierre").animate({
            left: "+=30"
        });
    }



if (x<=200) {

     $(".pierre").animate({
            top: "+=30"
        });
}


});

and here is the JSFiddle

Upvotes: 0

AWolf
AWolf

Reputation: 8980

Your check for the position should be inside of the keydown handler and then parse the value from $.css(..) to an integer to have your comparison work.

The code could look like in the updated fiddle here.

I've also added stop to you animation to avoid animation queuing. Maybe it's better to do this with-out animation.

With $(document).width() * 0.2 you can calculate the relative position for the falling position.

If you want to hide or remove the box once it is fallen you can add a done callback to the animation to do what you're looking for. In the demo I've hidden the box.

//move person
$(document).keydown(function (e) {
    if (e.keyCode == 37) { // left
        $(".pierre").stop(true,true).animate({
            left: "-=30"
        });

    } else if (e.keyCode == 37) { // right
        $(".pierre").stop(true,true).animate({
            left: "-=30"
        });
    }

    //console.log($('.pierre').css('left'));
    if (parseInt($('.pierre').css('left')) <= $(document).width() * 0.2 ) {
        //$(this).slideDown();
        $('.pierre').animate({
            top: "+=" + $(document).height()
        }, function() {
            $(this).hide();
        });
    }
});

//fall
/*if ($('.pierre').css('left') === '+5px') {
    //$(this).slideDown();
     $(this).animate({
            left: "-=30"
        });
}*/
.pierre {
    height:15%;
    width:15%;
    background: black;
    position: absolute;
    left: 90%;
    top: -.7%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='pierre'></div>

Upvotes: 2

Related Questions