'm trying to include some gestures in this phonegap project I am working on. I decided to go with hammer.js and I added the following code.
function handleHammer(e) {
console.log("SWIIIIPE" + e.type);
}
$('#categories_page').hammer({ drag_lock_to_axis: true })
.on("tap", handleHammer);
This works great when I test on my local browser. But when I test it on ripple and on an actual phone the event is not fired.
I looked at some code samples and I found that if I change the events to
$('#categories_page').hammer({ drag_lock_to_axis: true })
.on("release dragleft dragright swipeleft swiperight", handleHammer);
I can see that events fire correctly on ripple.
Is there a problem with hammer.js or am I doing something wrong?
Actually I tried this again on the a real phone and it worked. Must have been doing something wrong. Still doesn't work on ripple. Annoying not only a minor issue.
Related
I am not a JS developer, I am just a Web Designer dealing with simple JS interaction most of the time.
I am using jquery-1.11.3 and jquery.mobile v1.4.5 with just core features and slider capability.
As tablet I have a kindle with the firefox (beta) browser and an ipod with safari browser.
I am having a problem in understanding some JS behaviours of tablets and browsers regarding the click event function and document ready
$(function(){
$('.menu-ham').click(function(){
alert("test")
});
});
the click event doesn't work on tablets but it works perfectly on web browsers.
Instead if use this outside the document ready
$(document).on('click', '.menu-ham', function(){
alert("test")
})
it works like a charm. Only that I am not sure if this it would create problem with the browser because not inside document.ready
I tried to use as well
$(function(){
$('.menu-ham').on('click', function(){
alert("test")
});
});
inside or outside the document ready and nothing works.
"menu-ham" it is a button with that class. I read about a lot of topics, who said to use cursor:pointer, who said to use ".on('click'" instead of the normal click event, or vclick, or bind or touchstart but none really worked a part the solution that I offered, and now I am very confused about the whole thing on why is working and the other are not when I read a lot of comments that the other solution should work.
Any help would be very much appreciated, thank you!
I found the problem! it was all fault of Phalcon debugbar. On the mobile devices was generating an error that it wasn't happening on the normal browser. This error was making any jquery or selectors working.
Thank you for your help and support!
I wanted to learn Hammer JS by building a simple program to drag an element around the screen, pretty much just like the same on the Hammer homepage.
I used the code posted on the Hammer github page, which seems to be the same code used on the homepage. I was testing the work in Chrome (37.0 / OSX). After working with it for a while and being unable to get the element to move, I opened the same page in Safari and FF. It worked perfectly in both of those browsers.
To pare things down, I added just the required to code to see an event trigger:
var mover = document.getElementById("mover");
var mc = new Hammer.Manager(mover);
mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
mc.on("panstart panmove", function(ev) {
console.log(ev);
});
Nothing gets logged in Chrome, but I get proper logging as expected in Safari and FF. I extended the event listener to include 'pan, panend, pancancel, panleft, panright, panup, pandown'. These events WOULD log in Chrome, so it seems like only panstart and panmove were being ignored.
So this code will run on the hammer.js page in Chrome, so clearly Chrome does see the panstart and panmove events in that browser, it's just not happening in my code. Which means somehow I am missing something, despite copying the code over from their site. I checked we were on the same Hammer version, but I am not sure sure what else from here I need to check.
Has anyone else encountered and solved this problem? Or perhaps knows what I am doing wrong to create this issue?
Thanks.
In the Hammer site say clearly "for better performance on slower devices your should try to keep you callbacks as simple as possible." I think that's the same with Browsers!
Maybe your problem is
var mover = document.getElementById("#mover");
Why do you type "#mover" instead of "mover"? The "#" sign it's for JQuery and you are using plain javascript. It confuses me that in some browsers this works, so I imagine your ElementID start in fact with the "#"...
Let me know if it helped, please!
I understand that typeahead.js does not support mobile yet.
Even though it works in mobile browsers (mobile Safari), does anyone have an idea as to why it might not work once the form is viewed through a 'standalone' version of the web page?
The problem that is occurring is that when I try to 'click/touch' the suggestion dropdown, it does not fill the input with that entry in the standalone version, where as the safari version does work.
Is this type of behavior documented anywhere or known for iOS?
Thanks.
Addition: I added a jquery delegated click listener to .tt-suggestion to show an alert, which works in mobile safari, but not in the standalone version (I think the delegation event is not attaching).
$(document).on('click', '.tt-suggestion', function(e) {
alert('clicked');
});
I realized I was also using the FastClick library, which messes up the delay between dropdowns and the selected option.
To work around it, bind a dom mutation listener and add the needsclick class to each <p> class under each <div class="tt-suggestion">:
$('.tt-dropdown-menu').bind('DOMNodeInserted', function(e) {
$(e.target).find('.tt-suggestion').children('p').addClass('needsclick');
});
You might also be able to try using a listener:
$('input.typeahead').change(function(e) {
$(this).closest('.tt-dropdown-menu').find('.tt-suggestion').children('p').addClass('needsclick');
});
Or using an event delegator:
$('.tt-dropdown-menu').click(function(e) {
$(e.target).children('p').addClass('needsclick');
});
Note: functions are untested, they are based off memory.
I am working on a Phone Gap project implementing a SWIPE VIEW. I have implemented the swipe view using this.
It works perfectly in devices with higher version-I have checked it in 4.1.2 version.
The problem is that it is not working in devices with android version 2.2.1 and 2.3.5.
When I try to swipe ,Sometimes It swipes.But some time it does not.I just get this Warning in my logcat.
W/webview(1133): Miss a drag as we are waiting for WebCore's response for touch down.
In order to fix this I have used the following code.
document.addEventListener( "touchstart", function(e){ onStart(e); }, false );
function onStart ( touchEvent )
{
if( navigator.userAgent.match(/Android/i) )
{
touchEvent.preventDefault();
}
}
In spite of this I am getting this warning.The slides are not being swiped.
Is this because of lower version of android?
How can I fix this?
Please help me.
It is not necessarily a version compatibility issue
http://uihacker.blogspot.fr/2010/10/android-bug-miss-drag-as-we-are-waiting.html
take a look at this article
good luck
Hi I am making a JQM and PhoneGap app. I would like to catch events like "pause","restart" or resume. Do you know how to do this? I read docs, but there are no clues how to do it in javascript code for phonegap build.
Thanks.
In the documentation for the events, they give a full example as well as a short example, which I'll reproduce here:
document.addEventListener("pause", onPause, false);
function onPause() {
// Handle the pause event
}
Just like in normal JavaScript, you can attach to events using the addEventListener method on any node. In the case of PhoneGap, their device events are triggered on the document object.
If I understand you correctly and JQM means jQuery Mobile: In jQuery, it's possible to add handlers for arbitrary events by using:
$(document).on('pause', onPause);
(This uses the jQuery 1.7 syntax, but I believe that's a requirement for jQuery Mobile).