Fast Buttons for Mobile Web Applications

Question

I build a WepApp and I like to remove the 300ms delay on touch-devices with this code from Google

DOC
http://developers.google.com/mobile/articles/fast_buttons

I not sure, I don't see any difference between both version on my HTC one X.

Demo 1 (normal)
http://jsbin.com/awejal/4/edit

Demo 2 (with fastclick fix)
http://jsbin.com/awejal/5/edit

I get (in Demo 2) additional an error in the console TypeError: element is null but why? I don't get it.

In Demo 2 you call `getElementById("fastclick")` while there is no such element (and it results in "element is null" message). Most likely `getElementById("onclick")` or `getElementById("onclickJQ")` should be used instead. — Denis Ryabov, Nov 20 '12 at 12:05

score 1 · Answer 1 · answered Nov 22 '12 at 21:40

The issue is almost certainly from your typerror. A TypeError like that means you tried to call a method on a null object. You need to find out why you are getting that typerror, and then fix it. Without the proper linking between the DOM and the jQuery the google supplied code won't help.

I think the line that is causing you problems is the

new FastButton(document.getElementById("fastclick"), goSomewhere);

because I didn't see any element with id fastclick.

Try fixing that and let me know how it works

score 1 · Answer 2 · answered Nov 27 '12 at 12:12

Are you sure that your method of detecting whether or not an element is toggled is correct? It looks like both #onclick and #onclickJQ share a common variable to detect which state they should be in: bt = 0;. As a result if you try to press one after the other, the second click event will have no visible changes. To solve this, use attributes to store data about the toggle state...

JS:

function blub(selector) {
    if ($(selector).attr("attr-bt") == "0") {
        $(selector).attr("attr-bt", "1");
        $(selector).css('background-color', '#aa0000');
    }
    else {
        $(selector).attr("attr-bt", "0");
        $(selector).css('background-color', '#333333');
    }
}
$(document).ready(function() {
    $('#onclickJQ').attr("attr-bt", "0");
    $('#onclick').attr("attr-bt", "0");
});

Answering your question, to remove the delay, simply use jQueryMobile and the tap event that is provided with the library:

$(document).ready(function() {
    $('#onclickJQ').live("tap", function() {
        blub('#onclickJQ');
    });
});

However, the first demo button [with the inline onclick event] must be modified to use the tap event specifically:

$(document).ready(function() {
    $('#onclick').live("tap", function() {
        blub('#onclick');
    });
});

DEMO: http://fiddle.jshell.net/jnY2n/4/show/

Tested on an iPhone 4S; the first div "lags" when it is tapped repeatedly, while the second runs smoothly.

Fast Buttons for Mobile Web Applications

2 Answers2