So.. I am developing the mobile versions of my website and noticed that my 'rating' script whereby a user selects a certain number of stars did not work on the iPad.
The functionality worked with a jquery .on('click' in a normal web browser.
I googled it and found tap and touchstart
Changing the function to .on('click touchstart' made it work on the iPad. Great !
I have now implemented a form where on checking a checkbox some extra fields are shown/hidden.
Again I used .on('click' - this time I was trying it on an android phone. The .on('click' didnt work for a checkbox..? I tried adding touchstart with no success. I then added tap and bingo it works.
Doing a little more research i noted others saying not to bind two gestures as in certain situations the event could be triggered twice. Fair enough.
COuld someone thus advise and explain how 'clicking' works with different elements on normal web browsers, android devices, and i devices.
An example of how you can then implement only using one gesture, but the right one depending on the device would be great.
N.B Im just using normal jquery.
Many Thanks
Related
Question
What am I missing in my CSS to make the results more consistent for no touch actions in my Cordova app?
I am building an app with Cordova (testing on Android). We had a full page selection come up that's not supposed to scroll so I used touch-action: none in the CSS. But it still scrolls but only sometimes.
CSS
body {
touch-action: none;
}
Now I'm showing different "pages" by turning on/off different divs in the html. And what has me super confused is that when it goes to the first page it will scroll.... once! And only once. So I can tap the screen and drag the page up/down, let go and I can't scroll again.
BUT.
I go to the second page and it will do the same thing. It will let me scroll once, but any further touch events get ignored.
The issue with this is my fancy html selector is suffering from this. Where it will work, but periodically allow the page to scroll when it shouldn't.
My understanding is that "touch-action: none" should kill all touch events on Android not just some of them.
After more digging I was able to solve this.
Quick answer. touch-action: none; is perfectly fine.
What wasn't fine was that I was using Chrome's remote developer tools to connect to the device and watch the console. To see what was going on with the app at run time. Because you can touch the application through the developer tools I'm guessing it was managing to screw up touch events. As in ignoring touch-action:none and forcing touch actions to happen. Even if you touched only the real device and not the device "sim" through the developer tools it was still screwing up touch events.
So the solution. You can use the developer tools to make sure you've added the css correctly. Then close the developer tools for the device and run it again in cordova using cordova run android and don't connect using the developer tools.
I spent two working days trying to solve this. :(
While developing an app wich uses phonegap, angular touch and jquery we stumble in this bug on some android devices.
When touch and move over an non scrollable object the screen goes blank.
When scrooling the body the screen comes back to life.
All the elements stays in dom and still firing events and so.
When using developer tools we still can see the elements.
http://youtu.be/NdTerKi08WE
Has any one saw this bug before?
EDIT
Im using phongegap build so i dont have access to java files.
This problem is only on Android 5 phones.
EDIT 2
Same problem on device chrome browser so its probably not an phone gap problem.
The problem was an issue regard to rtl in the new chromium.
The workaround is to add the "rtl" to css on document ready.
Link to the Page that does not work
Hello Community,
On this page scrolling with safari on an Iphone 5 just works a charm. But on my HTC with Chrome 31.0.1700.99 and Android 4.1.1 I can only scroll if I touch the screen with two fingers. The scrolling than is still very slowly. I tried to analyse the problem using adb and remote debugging but I am really new to everything mobile.
It seems as if there would be no touchstart and touchend event but I dunno if it is not fired or if I need to handle those events manually and they ain't handled.
Just telling me this would be a big help. Thanks a lot for your efforts.
I know there are a lot of these questions on the internet, but I've tried every solution (all the answers of this question), and none of them worked.
When I run the site in my PC's browser everything's fine, but as soon as I deploy on the phone, the response time is very laggy.
I've tried using FastClick, setting hoverDelay to 0, and binding my own events, but the result is the same.
Am using Android 4.1. Would appreciate any help other than what I've tried.
To speed up JQM, you have to turn off any transitions.
It sucks, but the JQM transitions are too slow for mobile devices, even on iOS. We'll just have to wait a few years until the hardware gets faster I suspect. This is despite the JQM team trying to improve the performance in 1.2. I still can't use the transitions without my apps feeling sluggish.
I always use these settings to get the best performance out of jQuery mobile.
$.mobile.defaultPageTransition = 'none'
$.mobile.defaultDialogTransition = 'none'
$.mobile.buttonMarkup.hoverDelay = 0
As well, if you are writing any javascript, do not bind to any 'click' events. Click is way too slow on mobile devices as it has an additional 300ms delay before the event is triggered.
Since you are using JQM, you can use their own click event vclick instead (which under the hood is using touchstart and touchend events).
If it's still really slow for you after that, you might have to examine what is actually happening in your click events - perhaps your code is not as optimised as it could be.
You'd be better off using the tap event than the click event if you want to work around this for a mobile application.
Have a read of Tap vs. Click: Death by Ignorance by John Bender
This code snippet worked for me
var ua = navigator.userAgent,
event = (ua.match(/iPad|Android/i)) ? "touchstart" : "click";
$("button,a").bind(event, function()
{
$(this).trigger('click');
});
I looked around and although there are many related questions I didn't see one that answers my exact question:
I would like to create an app that runs in the background that provides the exact same functionality as the hard coded 'Back' button in all cases.
The reason? I (for example) have a Droid X, and it is BIG. it makes it extremely hard to use one-handed and having a swipe gesture function as a back button (like in Palm Pre for example) would greatly increase the ease of use.
as far as I'm concerned the app could just be one simple class that contains:
1) a listener for the 'back' swipe
2) a call to the physical hard button itself
Is this possible? are there built in APIs for the hard coded buttons that would allow me to call them without actually pressing them?
Again - I'm not interested in overriding the button, I'm interested in making a software call to it - or failing that, in emulating it's behavior in any and all states and other apps!
Please forgive the naivete of this post. I am a very novice programmer and really I just want to know whether this is possible before I start to devote myself to trying to build it.
Thank you,
b
Is this possible?
By writing your own firmware, yes. Via an Android SDK application, no.