I am pleased to say that after much procrastinating and beating around the bush, I have finally found time to sit down and completely re-write the jQuery mobile events I mentioned in my earlier post (see here for more information). Details of the events can be found after the jump.
Regular visitors will probably recall that some time ago I released a series of jQuery plugins bundled into a single file which allowed cross-device handling of events (i.e. touch and mouseclick formalisation). After some reason blog comments inspired me to progress the project further, I’m pleased to say that everything has now been completely re-written and the first alpha release can be found on my Github repository.
Here’s an outline of the events that I have provided:
doubletap. This event will be fired twice when doubletap is used, so it is recommended to use singletap in this case.tap this event is only triggered once we are certain the user has only tapped the target element a single time. This will not be triggered by doubletap or taphold, unlike tap. Since we need to run some tests to make sure the user isn’t double tapping or holding a tap on the target element, this event is fired with a short delay (currently of 500 milliseconds).swipe, except only called when the user swipes their finger in an upward direction on the target element (i.e. bottom to top)swipe, but triggered only when the user swipes their finger left to right on the target element.swipe, but triggered only when the user swipes their finger top to bottom on the target element.swipe, but triggered only when the user swipes their finger from right to left.orientationchange event. In the latter instance, a detection of the viewport size change occurs.Please check out the repo over on GitHub, and don’t forget to fork me while you’re there. Feedback would certainly be most gratefully received.
aww, finally a set of mobile detection scripts -
… thanks a lot!
does “jQuery Mobile Events” allow
to use the “doubletap” event
like a .click() command?
i would like to “fake” a double-tap-click
on ipods/ipads
without clicking a button/field/tag element itself
but using a command such as the .click() command
looking forward to any reply or helpful hint
desperate
marc (a jquery, ipad, iphone, … newbee
<–
hope you may accept my apologies for any
misspelling or wrong definition )
Thanks for your comments, Marc. Yes, this library allows you to easily bind any of the events to jQuery objects using either
.doubletap()or.live('doubletap');If you need any help using the features, feel free to drop me an email (ben.major88 [at] gmail [dot] com).
Happy coding!
I just want the double tap script from the .js file. Can you help me out. The scroll event written in your js are not smooth. I just need the double tap functionality script.
Appreciate if you can help me out.
Hi Rock,
Thanks for your comments. I don’t really understand what you mean by the ‘scroll event written in my JS’… There is no scroll events in there, only native triggers for scrolling?
I will separate out the double-tap functionality and send it across to you as a separate JS.
Thanks again,
Ben.
Actually after applying your .js file, the page scrolling is not smooth in my application. That is the reason i wanted only the double tap code.
Thank you very much for your time and efforts.
Highly appreciate your quick response.
Hi Rock,
Please check your inbox.
Regards,
Ben
OK, thanks for clarification. As a side note, are you using native scrolling within the app (i.e.
overflow: scroll), or WebKit’s touch overflow (i.e.-webkit-overflow-scrolling: touch;), or perhaps iScroll or Scrollability?Hi Ben,
Yes I am using native device scroll. I am not using any custom scrolling like iscroll. Let me know if you need any other information.
Thank you.
Waiting for custom js file from your end. Thank you.
I’m interested in just the doubletap functionality as well. Could you email me a copy as well? Otherwise, I will just try to separate it out… perhaps less successfully
Thanks!
Thanks Vaughn, I’ve just sent you an email.
Tap seems to be triggered after most events, such as swipes. Am I missing something or wouldn’t it be an idea to only let one event through? Also the time limit of 500 sec seems to much for a tap.
Thanks for your comments, Tomm. Unfortunately, we cannot only fire the
tapevent, since we need to be sure that the user isn’t double-tapping for example.I’m afraid that if you wish to combine the events (i.e. having doubletap), that you have to use the
singletapevent. Even Apple has the same problem, since the defaultclickevent in Mobile Safari is fired after a short delay for exactly the same reason.If you download the unminified source from Github (https://github.com/benmajor/jQuery-Mobile-Events), you can change the interval used for the
singltapevent (see line 34).Thanks for your interest in the library! And please feel free to ask any other questions. If you need assistance, my personal email address is benmajor88 [at] gmail[dot]com.
Hi Ben, I am using ‘singletap’ and ‘doubletap’ events on the same element which is an image. Code for your reference :
$(document).ready(function() {
$(‘#tapButton’).bind(‘singletap’, function(event){
event.preventDefault();
alert(‘You Tapped Me’);
});
$(‘#tapButton’).bind(‘doubletap’, function(event){
event.preventDefault();
alert(‘You Double Tapped Me’);
});
});
The problem that I am facing is on Safari browser in iphone – when I single tap on the image it displays proper alert message, when I double tap on the image again proper alert message is displayed but after few milliseconds alert message for single tap is displayed. I guess the default ‘click’ event of iphone is getting fired. How do I disable it?
The problem with Android phone is that when I tap or doubletap proper alert msgs are displayed but on doubletap it zooms the webpage which is the default functionality on android phones. I need to disable this default behavior too?
Thanks for the help.
Poonam,
Thanks for your message. Which version of iOS have you tried this on? I set up a quick jsFiddle to test the functionality (see here > http://jsfiddle.net/benmajor/kE5Ar/), and tested with iOS 5 + 6 and the code functioned as expected.
To disable the default behaviour, you need to intercept the native events and handle them. For example, for click:
$('#myEle').click(function(e) { e.preventDefault(); });Unfortunately, the only way to disable the default zooming on Android is to add the following meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>Hope that helps!
Ben.
Hi Ben, i would use your js for simulate double tap on div element,
to active the zoom of safari browser on mobile desktop.
It is possible? like
Poof zoom
doubletap left
jQuery(“#right”).doubletap();
Hi Stefano,
Thanks for your comments. You can easily add in the feature to zoom an element when you double-tap it by using the CSS zoom attribute. For example:
$(‘#myZoomElement’).doubletap(function() { $(this).css(‘zoom’, 1.5) });
Please see the jsFiddle I’ve put together > http://jsfiddle.net/FjTNm/
Thanks,
Ben.
Thank you Ben, but i was hoping to take advantage of the capabilities of the browser without css
Thank again
Do you mean the native zoom on iOS and other devices? If you’ve specified the user-scalable attribute in the meta as false, this isn’t possible unfortunately. The only solution is to use CSS.
Hello
I’ve been trying to use this using $(“#window”).on(“tapend”,function() { $(“#text”).html(“tap ended”);}); on a scrollable div, as soon as scrolling starts tap end fires, I would like it to fire after I have removed finger from the screen – this is being tested on Nokia Lumia 920.
Hello Matus,
Thank you for your comments. It is a little difficult to debug without some samples. Do you think you might be able to share some code on jsFiddle, so that I can look into it?
Regards,
Ben.
Hello
I’m trying to use swipedown.
My code is
$(“.bar0″).live(‘swipedown’,function() {
alert(‘test’);
});
and html
but it’s not working.
Where is the mistake.
Could you put together a jsFiddle showing your sample? I tried the code above and it seems to work without a problem. You can see a demo of what I have put together here:
http://jsfiddle.net/9J3Qw/2/
As a side note, when I was putting the jsFiddle together, it transpires that the latest stable release of jQuery (1.9.0) breaks the library. I will look into this.
10x Ben
My mistake was with thresholds