I built a sencha touch (2.1.0) app and tested it on my Samsung Galaxy S2 (Android 4.0.3).
Once I did that with the native build command of snecha cmd and another I wrapped it with phonegap.
Both times I've got a freeze when I touch the screen with two fingers at the same time.
I cannot press a button or scroll anymore.
Has anyone a solution for that problem?
I also read the post in the Sencha forum (http://www.sencha.com/forum/showthread.php?249581-Multi-touch-and-phonegap), but that did not work for me or I'm doing something wrong.
Any help would be appreciable.
I recently came across this problem and visited the Sencha Forum link you mentioned and implemented it in my code which achieve the following.
1. With the fix incorporated app will never freeze with simultaneous tap.
2. You will have to tap somewhere on the screen one more time, after you simultaneously tapped at two or more points earlier.
Note: The issue is reproducible only with android 4.0.x and Sencha 2.1.
A big thanks to TROELS from Sencha Forum
In your app.js place the if condition outside your Ext.application as shown below
Ext.application({
name:xyz
requires:[abc]
//other stuffs
});
if(Ext.os.is.Android && Ext.os.version.equals(4.0)) {
Ext.define('app.overrides.TouchGesture', {
override: 'Ext.event.publisher.TouchGesture',
reset: function(e){
if(Ext.os.version.equals(4.0) && this.currentTouchesCount > 0){
e.changedTouches = Ext.Object.getValues(this.currentTouches);
this.onTouchEnd(e);
}
}
});
window.orgPinchEndMethod = Ext.event.recognizer.Pinch.prototype.end;
Ext.define('app.overrides.Pinch', {
override: 'Ext.event.recognizer.Pinch',
end: function(e){
var wasTracking = this.isTracking,
result = window.orgPinchEndMethod.apply(this, arguments);
if(wasTracking){
this._resetDetection(e);
}
return result;
},
_resetDetection: function(e){
var tg = Ext.event.Dispatcher.getInstance().getPublishers().touchGesture;
setTimeout(function(){
tg.reset(e);
}, 0);
}
});
}
Related
I've tried both techniques in this answer to get a "dragging touch highlight" across elements in my PhoneGap App (testing on Android).
Here's my JSFiddle of the touchmove approach
$("td").bind("touchmove", function(evt){
var touch = evt.originalEvent.touches[0]
highlightHoveredObject(touch.clientX, touch.clientY);
});
Here's my JSFiddle of the vmousemove approach
$("#main").bind("vmousemove", function(evt){
$('.catch').each(function(index) {
if ( div_overlap($(this), evt.pageX, evt.pageY) ) {
$('.catch').not('eq('+index+')').removeClass('green');
if (!$(this).hasClass('green')) {
$(this).addClass('green');
}
}
});
});
Both work perfectly when emulating the app from desktop browser. Both work when viewing the JSFiddles from my Android tablet browser. But in the installed app on the tablet, it doesn't work. Instead of an updating highlight as I drag across the elements, all I get is a highlight on the first-touched event. The same for both methods.
Any ideas what's going on?
A comment on this question has an intriguing suggestion that "If you are running on android you also need to cancel the touchmove event to get new ones while touching. Don't ask me why...". Does that ring a bell, and if so, how would I "cancel the touchmove event to get new ones" with either of these approaches?
Alternately, has anyone successfully done a "dragging highlight" effect on a PhoneGap app, and would you care to share your technique?
I'm using Touchswipe to trigger events based on swipe right and swipe left. After a lot of testing, i found that touchswipe is not working on android stock browsers since touchswipe is not firing swipe events on stock browsers. Any work around for this?
Code to trigger:
$(function() {
//Enable swiping...
$("#content").swipe( {
//Generic swipe handler for all directions
swipe:function(event, direction, distance, duration, fingerCount) {
if(direction == "left"){
}else if(direction == "right"){
}else if(direction == "down"){
// event.preventDefault()
}
},
threshold:0
});
});
Well, after a lot of issues i found that swipe event on android STOCK browsers can't be triggered with code from an external Js file but works if put on same html file. Weird but works.
Have you tried using jQuery mobile to support the swipe functionality. The developer API is given here.
The difference here, is that instead of calling $(document).ready(function() ...) we can call: $(document).bind('pageinit')
I have built a slide show and right now I am trying to add swipe support that cross platform compatible. currently my jquery hammer js build works great on ios but not in android 4. in android my slide show will run until I try to swipe to another slide, then it stops working. Its a pretty simple setup. I only care about left and right swipe and want the default vertical scroll.
var hammertime = $('#slideshow').hammer();
hammertime.on("swipeleft", function(ev) {
ev.gesture.preventDefault();
swipeLeft();
});
hammertime.on("swiperight", function(ev) {
ev.gesture.preventDefault();
swipeRight();
});
slide will work perfectly in ios without the preventDefault() function, I put it in for android as it has given some success for android in the past, but this time yielded no extra results. Any ideas on whats causing android not to work at all here?
try this.
I found that hammer.js recoginze most of swipe touch as drag.
var hammertime = $('#slideshow').hammer();
hammertime.on("swipeleft dragleft", function(ev) {
ev.gesture.preventDefault();
swipeLeft();
});
hammertime.on("swiperight dragright", function(ev) {
ev.gesture.preventDefault();
swipeRight();
});
I have an iOS/Android app built on cordova 2.6 and jqm 1.3. I need to open a link to an external website after the user clicks on a button. The code I am using is:
var ref = window.open('http://google.com','_self','location=yes');
ref.addEventListener('loadstart',function(event) {
console.log('load started');
});
ref.addEventListener('loadstop',function(event) {
console.log('load stopped');
});
ref.addEventListener('loaderror',function(event) {
console.log('load error = ' + JSON.stringify(event));
});
On iOS everything performs like I would expect. A new browser window opens with the google website loaded. But I cannot get anything to to load in Android. When I click on the button, nothing happens. I have put in console statements before and after the window.open, so I know the code is at least being executed.
My config.xml should be wide open for white listed sites:
<access origin=".*"/>;
I have tested on a Nexus 7 (android 4.2) and an android 2.2 emulator with the same results on both.
Does anyone know why window.open would not be firing correctly on android?
It looked like it was a problem with 2.6 loading plugins on Android. I upgraded to 2.7 and everything started to work.
Perhaps it's a solution to use the ChildBrowser plugin? This gives you a bit more control over the operation itself, while still preserving platform compatibility between iOS and Android.
In most cases, I use something like the following snippet to use the childbrowser to display an external page.
function openBrowser(url) {
// determine if the childbrowser plugin is available
var useChildBrowser = ('plugins' in window && window.plugins.childBrowser);
if (useChildBrowser) {
popup = window.plugins.childBrowser;
popup.showWebPage(url, { showLocationBar: false, showAddress: false });
} else {
popup = window.open(url, 'Share', "['width=600px', 'height=400px', 'resizable=0', 'fullscreen=yes']");
}
}
Note that this falls back to using window.open if the ChildBrowser plugin isn't available, so you won't break anything else with this. Could be worth a shot, perhaps?
I have a small phonegap application with jquery mobile and backbone.
I'm trying to show popup to user by manually calling .popup() method.
Everything works fine on iOS but on android I got strange issue: popup is showing for few moments and than disappear.
Here the actual code:
var PostView = Backbone.View.extend({
events: {
'touchend .add-comment-button': 'addComment'
},
addComment: function() {
this.$(".comment-popup").popup('open', { history: false });
return false; // Stop bubbling.
}
});
I'm using history: false because this popup is actualy part of subpage.
The code looks very simple, I'm just can't understand why it can disappear, and why this happen only on android devices.
Thanks, and sorry for my bad english.
I spent hours trying to fix this problem.
Finally I ended up doing the following two things that seemed to fix the problem.
1 - Use the uncompressed jqm file. i.e jquery.mobile.1.2.0.js
2 - I was triggering the popup programatically using the 'tap' option - once changed to the 'click' option it worked.
$('.option').live('click', function() {
$('#popup-div').popup('open');
});
I spent hours trying to fix this problem.
Finally I ended up doing the following two things that seemed to fix the problem.
this code snippet may help you ->
$('#testBtn').on('tap',function(e){
console.log("button clicked");
e.preventDefault();
$('#testPOPUP').popup("open");
});
Please note i have used e.perventDefault().
I didn't feel like changing my .tap() events to the click event and I didn't have a case where I could use preventDefault()so I just added a timeout to the popup('open') line. My hoverdelay in jqm is set to 150 so I set this timeout to 600 just to be on the safe side. Works fine, doesn't feel sluggish for the user.
One way to 'fix' it is by setting data-history="false" on the popup div
See also this question
JQuery Mobile popup with history=false autocloses
I have the exact same problem when trying to use popup('open') on an android 2.3 device (both in native browser and in firefox) and it works just fine on browsers on other devices. I'm also using backbone event management to open my popup (used the tap event and no aditionnal options to popup).
What I did to 'correct' the problem is that I removed the backbone event management for this event and added a listener in the render function. In your case this would look something like this :
events: {
// 'touchend .add-comment-button': 'addComment'
},
render: function() {
$(this.el).html(this.template(this.model));
$(this.el).find('.add-comment-button').tap(function(el){
this.addComment(el);
return false;
}.bind(this));
}
I have no idea where the problem comes from (must be some incompatibility between backbone and jquery mobile) and why we only see it on android but for the moment with this workaround my app seems to work fine on any device.
Edit: oops, it turns out that in my case the problem was I was missing "return false;" in the function dealing with the event.
Now that I added it, it works correctly with the backbone event management.
Sadly that doesn't explain why you have the issue and why I was seeing it only on android.
In case it helps anyone, I had the same problem occurring with Bing Maps, with the Microsoft.Maps.Events.addHandler(pin, 'click', callback) method.
Not particularly nice, but instead I stored an ID in pushpin._id and did the following:
$("#page").on('vclick', function (event) {
if (event.target.parentElement.className === "MapPushpinBase") {
$("#stopPopup").popup('open');
}
});
One brute force option is to check whether popup was hidden and reopen it.
In a loop, because the exact time the popup becomes hidden seems to be varied.
var hidden = $('#' + id + '-popup') .hasClass ('ui-popup-hidden')
if (hidden) $('#' + id) .popup ('open')
A working example: http://jsfiddle.net/ArtemGr/hgbdv9s7/
Another option could be to bind to popupafterclose:
var reopener = function() {$('#' + id) .popup ('open')}
$('#' + id) .on ('popupafterclose', reopener)
$('#' + id) .popup ('open')
Like here: http://jsfiddle.net/ArtemGr/gmpczrdm/
But for some reason the popupafterclose binding fails to fire on iPhone 4 half of the time.