jQuery if button is not pressed

Question

I want to check wether a button is pressed in jQuery. If the button is pressed the page has to scroll down. If the button it not pressed the page shows an animation and once this is finished it has to scroll down.

Now I have this:

$('#btmmdl').click(function(){
    $(this).data('clicked', true);
});

if($('#btmmdl').data('clicked')){
    // Scroll down
} else {
    // Show animation and scroll down after 9 seconds
}

Am I doing something wrong?

your `if` statement should be inside a `setTimeout(function(){},9000);` function. — Jeff Noel, Jul 06 '17 at 14:34
@tilz0R The OP's comment in code says `// Show animation and scroll down after 9 seconds` — maxshuty, Jul 06 '17 at 14:38

score 2 · Answer 1 · answered Jul 06 '17 at 14:39

Your problem is that click event is executed when is. You don't know when will user click on button. Therefore you have to add your if statement inside callback function and perform your task.

$('#btmmdl').click(function() {
    $(this).attr('data-clicked', !$(this).attr('data-clicked')); //Toggle status
    if ($(this).attr('data-clicked')) {
        // Scroll down
    } else {
        // Show animation and scroll down after 9 seconds
    }
});

Each click will toggle mode. First click will do scroll, second will show animation, third again scroll, etc.

score 0 · Answer 2 · answered Jul 06 '17 at 14:46

If you are using CSS3 animations, you can use a jQuery selector to listen for the animationend to scroll down after it happens.

The gist of it:

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

For more information check this awesome stackoverflow answer over here.

In that case you could also end the animation on click of the button, which will also trigger the scrolling down afterwards.

For more information on how to end an animation check the jQuery finish() method

score 0 · Answer 3 · answered Jul 06 '17 at 14:52

0

How about:

$('#btmmdl').mousedown((function(){
    //SCROLLSDOWN
});
$('#btmmdl').mouseup((function(){
   //SHOWSANIMATION
});

answered Jul 06 '17 at 14:52

score 0 · Answer 4 · answered Jul 06 '17 at 14:57

The code doesn't execute in order like you think. You need to set a timeout to go off after 9000 ms and check if the button has been clicked at that point.

var $btmmdl = $('#btmmdl');

$btmmdl.click(function(){
    $(this).data('clicked', true);
    // Scroll down
});

//If the button hasn't been clicked after 9 seconds, scroll
setTimeout(function(){
  if(!$btmmdl.data('clicked')){
    // Show animation and scroll
  }
}, 9000);

score 0 · Answer 5 · answered Jul 06 '17 at 16:12

I tried a lot of solutions below but finally (through another question) found a solution that worked for me.

var scroll = setTimeout(function(){
  // Show animation and scroll down after 9 seconds
}, 9000);

$('#btmmdl').click(function(){
      // Scroll down
        clearTimeout(scroll);
    });

The clearTimeout function with the Timeout as a var did it for me, but I was nog aware of this functionality.

Thanks for the answers!

jQuery if button is not pressed

5 Answers5