jQtouch tap and link problem

Question

Hi,

I'm having a problem with jQtouch when using tap on links,

I'm trying to get a link to change background color when tapped a la iphone appstore (the blue color)

so I'm using this code :

<script>
    var jQT = new $.jQTouch({
        statusBar: 'black',
        useFastTouch: true
    });
    $(function(){
        $("a").live('tap', function() {
            $(this).addClass("active");
        },function() {
            $(this).removeClass("active");
        });
    });
</script>

the ".active" style contains the blue background :

.active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#048bf4), to(#015de6));
}

and links are like this :

<a id="a" href="http://google.com"&gt;&lt;img src="someimage.png"><div>Google</div></a>

The problem is, when I tap the link, the background changes as expected but the link doesn't work and the new background is not removed when I remove the finger ^^

Could someone point out what I'm doing wrong :/ ?

Answer 1

The "active" class should be automatically added to an anchor if it is clicked or tapped, so you shouldn't need to add and remove the "active" class yourself.

You should have the normal background image assigned to anchor elements and an active background image for a:active:

a {
  background-image: ...
}

a:active {
  background-image: ...
}

Hopefully this will solve your question.

Answer 2

Thanks William, I removed jQtouch and added code for the tap thing with jQuery only,

$(document).ready(function() {
    var delay = 100;
    var hovertime = null;
    var hoverdelay = null;
    $("#list a").bind('touchstart mouseover', function(){
        clearTimeout(hoverdelay);
        hovertime = new Date().getTime();
        var $el = $(this).add("*", this);
        hoverdelay = setTimeout(function(){
            $el.addClass("active");
        }, delay);
    });
    $("#list a").bind('touchend mouseup', function() {
        clearTimeout(hoverdelay);
        var now = new Date().getTime();
        var $el = $(this).add("*", this);
        if(now < hovertime + delay) {
            $el.addClass("active");
            setTimeout(function(){
                $el.removeClass("active");
            }, delay);
        } else {
            $el.removeClass("active");
        }
    });
    $("#list a").bind('touchmove touchcancel mouseout', function() {
        clearTimeout(hoverdelay);
        var $el = $(this).add("*", this);
        $el.removeClass("active");
    });
});

I've put a sample here : http://fun.r4dius.net/temp/iphone.html

it works basically like this:

• when tapping it only switches to "active" after a 100ms timeout so that if you just want to swipe the page it won't activate at each tap,
• when switching to "active", all the childs (*) of the element are set to "active" too
• when ending the tap
  • if it's "active", the "active" class is removed,
  • if it's a fast tap (when "touchend" occurs before "active" was set) we still switch to "active" and remove it after a 100ms delay, just to show it was taped
• if we move while taped, the "active" class is removed

Here's the last problem I'm facing :/

For some reason, if I tap, then I start moving at the exact same time that the element is set to active (after the 100ms delay), it stays active until a "touchend" occurs, rather than removing the active class as it should, does someone understand why ?

I tested this on the jQtouch preview page and could not reproduce it, but if I use jQtouch on my page the problem occurs the same :/