Increase performance of .btn with touchstart

[tim-peterson]

I was thinking it could be good to invoke touchstart on all Bootstrap buttons with class="btn". This would make use of the code in this post: https://developers.google.com/mobile/articles/fast_buttons?hl=de-DE.

The point is performance and to make Bootstrap button clicks be as fast touch events.

I apologize if this already has been addressed elsewhere.

thanks,
tim

[fat]

Yeah - it's a good point. We need to spend some time going through mobile stuff.

[tim-peterson]

thanks, since Bootstrap CSS is really easy for designing one web app to run everywhere (responsive design, etc.) it seems only natural to have the javascript also be designed in this fashion.

I'm using Bootstrap with this one code base in mind so would be happy to contribute to a big push on this...

[t0k4rt]

Hi guys, I'm currently working on an Idea wich could be easy to implement.
jQuery Mobile already integrate a good tap event so why not use this one ?

That's why I isolated the code responsible for tap events and changed twitter bootstrap to take this into account.

Results are pretty good ! There can be some problems when you tap to quickly.

You can try on your mobile here :
http://t0k4rt.github.com/twitter-bootstrap-mobile/

[tim-peterson]

@t0k4rt thanks Alexandre, i've having trouble determining the difference between your jquery mobile radio buttons and the default twitter bootstrap radio buttons, might you clarify how you are detecting the performance improvement?

Also, as a more general point, i was originally thinking Twitter Bootstrap should include some kind of Touch API that would work on all elements with class="btn". Are you assigning touch events to all elements with class="btn"? I wasn't clear from your comment.

thanks for taking a shot at this!

[t0k4rt]

Hello Tim,
I made a small video to show the difference.
the first part is classic bootstrap and the second one is with jquery
mobile tap events.
http://www.youtube.com/watch?v=Jw3It04cVWI&feature=youtu.be

When you tap the on the button, the button is "activating" state faster
with jquery mobile and is much more responsive (in my opinion).
On the other side when buttons are "released" there is not much difference.

Also, when you deal with radio style buttons, it still take time to
reset other buttons to a "released" state.

But on the whole I think it's better much responsive from the user side.

Concerning your second question, I only modified twitter bootstrap
sources and replaced click events with tap events.
But indeed with links you could do something like that :

$("a.btn").on('tap', function (e) {
e.preventDefault();
window.location.href = $(this).attr('href');
});

Maybe it's faster !

[monken]

This might need some tweaking, but this is how I do it:

$('a, button').bind('touchend', function(e) {
    $(this).trigger('click');
    e.preventDefault();
});

[tim-peterson]

@t0k4rt thanks for the video, I tried the same comparison yesterday, yes you've made a nice improvement. Thanks!

So implementing your code, I just include the <script src="./js/jquery.mobile.js"></script> in your demo's source code and what else? do I have to make a button() function call or is it sufficient to have an element be given a class="btn" class name (the way I'm currently calling the bootstrap button JS and the way it appears in your demo's source code)?

Just for brainstorming and others who come across this thread, it would be also awesome if Bootstrap button clicking was tethered to swipe events as done in http://swipejs.com.

Anwyay, again great work!

[t0k4rt]

Hello Tim,
It depends, At least you need to include the jquery mobile file.

If you plan to use grouped buttons, radio or checkbox style buttons, you should also take the modified bootstrap files.
Note that I also changed a little bit the style to avoid the annoying transparent grey layer on button click with this :

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;

If you plan to use on links and button you should include code from monken used that way :

$('a, button').bind('tap', function(e) { //tap event better than touchend
    $(this).trigger('click');
    e.preventDefault();
});

is it clear for you ?

Concerning swipejs, I haven't tried yet but it could be a sweet solution to use with bootstrap carousel plugin.
Anyway, I'm glad to help !

[tim-peterson]

@t0k4rt great stuff Alexandre and @monken, I'll try and implement your code over the next few days and keep you posted,

[tim-peterson]

@t0k4rt So back to my original question if you don't mind. If one puts the following code on their site:

<script  type="text/javascript"  src='/assets/js/jquery.mobile.js'></script> // your abbreviated version of jquery.mobile.js
$('a, button').bind('tap', function(e) { //tap event better than touchend
    $(this).trigger('click');
    e.preventDefault();
});

and clicks on links or buttons while using a mobile browser, then they won't experience the 300ms delay caused by checking for double-taps? The links/buttons will instead fire as fast as $(this).trigger('click'); happens which is hopefully always less than 300ms?

thanks again!
tim

[valstu]

There's also a project called Fastclick from guys at FT Labs, maybe this could be useful in this case: https://github.com/ftlabs/fastclick

[t0k4rt]

Thanke a lot, I will check that,
That seems really great !

[fat]

I'm thinking something like fastclick is a better universal solution for this feature request then trying to add it to all our plugins individually… so i'm going to close in favor of that for now.

thanks!

[nanek]

I did not mean to re-open this by referencing it. Please close. Thanks!