1

I need to prevent link from being clicked for let's say 2 seconds.

Here is an example http://jsbin.com/orinib/4/edit

When you look at the rendered mode you see next and prev links. When you click next, it slides with a nice transition. However if you click multiple times there is no transition sort of, which is expected. But my question: is this how can I prevent clicking on the next link, for about 2 seconds (or what ever time it takes for transition to happen) so that no matter what transition will occur. This is what I tried to use, but did not work:

function(){
var thePreventer = false;
$("#next").bind($(this),function(e){
    if(!thePreventer){
        thePreventer = true;
        setTimeout(function(){
            thePreventer = false;
        }, 2000);
    }else{
        e.preventDefault();
    }
});

}

Which I got from here "Disable" a link temporarily when clicked? I think. I believe that i cannot achieve this effect with this code (although it works on other links). I believe this is due to the fact that cycle-plugin got a hold of that link, and I understand that I have to bind/tap-into this functionality of the plugin. Please note: that this code may not work I just used it to show that I tried it and it did not work, you can reuse it if you have to or give me your own stuff.

Please help, if you can.

EDIT: As mrtsherman proposed this simple yet elegant ANSWER: http://jsfiddle.net/LCWLb.

Community
  • 1
  • 1
user
  • 2,939
  • 5
  • 26
  • 39
  • I don't really see how the cycle plugin fits into here; you don't have any code related to it in this example. – Kato Nov 03 '11 at 20:41
  • Sorry, I wanted to say that this (code) is what I tried and it did not work. I fixed it with the new edit. – user Nov 03 '11 at 20:45

2 Answers2

2

Take a look at the cycle options page. There are a number of ways to do this. I would consider using the pager event onPrevNextEvent. You can assign a callback function.

$('#slideshow').cycle({ 
    pager:  '#nav', 
    onPrevNextEvent: function(isNext, zeroBasedSlideIndex, slideElement)  { 
        //disable controls
    },
    after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
        //reenable controls
    }
});
mrtsherman
  • 39,342
  • 23
  • 87
  • 111
  • I actually tried both onPrevNextEvent and after but was not able to make it work, but i'll give it another try, since you seem to point me into right direction. – user Nov 03 '11 at 20:53
  • Here is a ghetto mockup - i just hide the controls using the events. http://jsbin.com/orinib/6/edit – mrtsherman Nov 03 '11 at 20:56
  • Hahaha, it's unbelievable what kind of unexpected (outside the box) solution people can propose. I will defiantly look into this solution. – user Nov 03 '11 at 21:03
  • 1
    I was more comfortable working in jsfiddle - http://jsfiddle.net/LCWLb/. Create a blocking element and then hide/show it to prevent the links from being clicked. – mrtsherman Nov 03 '11 at 21:08
  • Yes, yes oh god yes! I'll implement this solution and will mark your answer as correct. Sorry about jsbin, I usually use both jsbin and jsfiddle in my questions so that people can be comfortable with what they are accustomed to. – user Nov 04 '11 at 14:27
  • Thank you mrtsherman, for the answer. Thanks to you I now know how to use this functionality (onPrevNextEvent: and after:). And I do use this plugin often. – user Nov 10 '11 at 16:34
0

The following will temporarily prevent clicks while a slideshow is running, as shown in this fiddle:

$.fn.extend({
    delayClick: function(callback) {
        this.bind('click', function(e) {
            $self = $(this);
            if( $self.hasClass('disabled') ) {
               $('#log').append('<p>click prevented on '+$self.attr('id')+'</p>');
            } 
            else {
               $self.addClass('disabled');
               callback.call(this, [arguments]);
               setTimeout(function() {
                   $self.removeClass('disabled');
               }, 1000);
            }
            return false; 
        });
    } 
});
Kato
  • 40,352
  • 6
  • 119
  • 149