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();
});
Related
I have the following code to prevent the buttons to stay focused after they are clicked. It works perfectly for desktop but it doesn't work at all when testing on mobile devices (Both iOS & Android), I'm not sure if I'm missing something here (I already tried replacing click with touchstart and touchend).
this.renderer.listen('document', 'click', (event) => {
if (event.target.nodeName === 'BUTTON') {
event.target.blur();
} else if (event.target.parentNode.nodeName === 'BUTTON') {
event.target.parentNode.blur();
}
});
Ok so I figured it out, in case anyone ever comes across this situation:
It WAS actually working, but on mobile devices an "emulated" hover is also applied after pressing buttons, so what I was seeing was the hover state, not the focus one.
I fixed it by wrapping the hover style of my button inside this block, to make sure that the device supports ACTUAL hover (e.g. using a mouse):
#media (hover: hover) {
your-element:hover {
//hover style
}
}
I have superview (flashcardView ), i added the two subviews(frontView and backView) to this view. If user tap the any one of the view it flip and shows the other view. I am using the following code for achieve this functionality.
frontView.addEventListener('click', function(e) {
var animation = require('alloy/animation');
animation.flip( frontView,backView, 'horizontal',500, function(){
});
});
backView.addEventListener('click', function(e) {
var animation = require('alloy/animation');
animation.flip( backView,frontView, 'horizontal',500, function(){
});
This code is only working in iOS devices. It is not working in Android devices. Pls suggest me to do the flip animation for Android.
In Titanium available animations depend on the system (iOS or Android) you use. Therefore the code you use is only working for iOS. As far as I know there is no built-in flip animation for Android. But there is a solution by another user he gave in this answer.
Here is the code he uses:
var anim_minimize = Titanium.UI.createAnimation({width:0,duration:500});
var anim_maximize = Titanium.UI.createAnimation({width:320,duration:500});
tabGroup.animate(anim_minimize);
setTimeout(function(){
tabGroup.animate(anim_maximize);
},500);
Basically he creates the views next to each other and uses another animation which should look the same as a flip animation.
Another option you could try is using a module such as Flipium.
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 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);
}
});
}