Question

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"><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 :/

友情链接