Can I have an event that says:

Question

Possible Duplicate:
jQuery: Detecting click-and-hold

I am looking for some way to have an img, and when I hold down the image for maybe 1 or 2 seconds, jQuery changes the CSS to "display","block"... I have looked and looked and could not find what I needed. Please give the best answer possible. I'm making a finger scan app...:) Here is the code I have right now:

HTML:

<body>
  <img id="testlaser" src="images/Laser.gif">
  <div class="fingerprint">
  </div>
  <img class="access_denied" src="images/AccessDenied.jpg">
</body>

CSS:

<style>
       body{-webkit-user-select: none;overflow:hidden;scrolling:no;}
  #testlaser{height:100%;width:100%;position:absolute;display:none;}
      .fingerprint{display:block;position:absolute;background-image:url(images/fingerprint.gif);background-repeat:no-repeat;background-position:center center;text-align:center;width:100%;height:90%}
      .access_denied{display:none;background-position:center center;width:100%;height:100%;}
        .access_granted{display:none;background-position:center center;width:100%;height:100%;}
</style>

Java Script:

<script>
$(".fingerprint").click('click mousedown', function(){
  $("#testlaser").css("display","block")
    $(".fingerprint").css("display","block")
      setTimeout(function(){
  $("#testlaser").css("display","none")
    $(".fingerprint").css("display","none")
    $(".access_denied").css("display","block")
},10000);
});
$(".access_denied").click(function(){
     $("#testlaser").css("display","none")
     $(".fingerprint").css("display","block")
     $(".access_denied").css("display","none")
});
</script>

Oh, yeah, I forgot to mention, I am doing this for an iPod... — Bryce, Aug 16 '11 at 17:06

score 1 · Answer 1 · answered Aug 16 '11 at 01:06

Add a "mousedown" handler to your image which sets a trigger function after two seconds and a "mouseup" function which clears the timeout function. For example:

(function() {
  var foo=$('#foo'), tf=null;
  foo.mousedown(function() {
    tf = setTimeout(function() {
      alert('Two seconds!');
    }, 2000);
  });
  foo.mouseup(function() {
    clearTimeout(tf);
  });
})();

Here is a working jsFiddle demo to boot.

score 0 · Answer 2 · answered Aug 16 '11 at 01:25

If you think that you will be doing this a lot you can make a plugin (okay.. so I was intrigued by this).

Here's the calling code:

$('.fingerprint').delayedReaction(function() { 
    $(".fingerprint").hide();
    $(".access_denied").show();
});

$(".access_denied").click(function() {
    $(".fingerprint").show();
    $(".access_denied").hide();
});

Here's the plugin:

(function($){
    $.fn.delayedReaction = function(successFunction, options) {
        var settings = $.extend({}, $.fn.delayedReaction.defaults, options);

        this.each(function() {
            var timeout,
                myFunction = successFunction,
                $this = $(this);

            var run_func = function() {
                myFunction.apply($this)
            };

            $this.bind(settings.startEvent, function() {
                timeout = setTimeout(run_func, settings.delayFor);
            });

            $this.bind(settings.stopEvent, function() {
                clearTimeout(timeout);
                timeout = null;
            });
        });

        return this;
    }

    $.fn.delayedReaction.defaults = {
        startEvent: 'mousedown',
        stopEvent: 'mouseup mouseleave',
        delayFor: 3000
    }

})(jQuery);

See it in action: http://jsfiddle.net/natedavisolds/Nb7zQ/1/

Can I have an event that says:

2 Answers2