I'm trying to build a Point of Sale app for ChromeOS using HTML5 and JavaScript. I'm using Materialize and jQuery for front end. When I try typing a number very quickly using the on-screen number pad, sometimes numbers are skipped. A good example would be trying to type 1752703, since it's my employee ID at my current job. Even though the CSS effect engages to show I pushed all the numbers (the ripple effect), I may end up with something like 17203 instead of the full number.
Is there any way I can improve touch performance? Is it the type of screen I'm using? What could be causing this to happen? If it's because my Chromebook is capacitive, it's not a big deal, because I could deploy this on any device I could get Chromium OS to run on. But if it's something programmatical that I can improve, that's the first step I'd like to take.
Here is the basic code I'm using for just punching in a whole number:
$(".numBtn").click(function(){
input(Number($(this).text()));
});
And here is an example of it in action (apologies for lack of styling):
Live Demo
First
The problem seems not to be the device itself, but rather the effect of having a touch-enabled device which supports pinch zooming.
On most of these devices, by default, there is a 300-350 ms on-click delay which allows most of the users to double click, or as mentioned, pinch zoom.
Google has brought a solution for this issue in 2014, when they have removed this delay by still keeping the pinch zoom function on.(1)
The quick fix for this is only one line of code in the <head>
<meta name="viewport" content="width=device-width">
This meta tag is going to disable pinch zoom for your website only by telling the browser "this is how I need to be displayed, so there's no need for zooming in the page". The purpose of it is mainly to allow a better user experience in websites with responsive design.
I have tested your website with the new meta tag and the delay seems to disappear. There is still a very small delay when you tap very fast, but the most of the users won't be able to do it such quickly.
Second
Another potential solution is to use a plugin called Tappy which replaces the click event with a tap one, promising "that it will allow you to execute code immediately on touch devices, eliminating the 300ms delay that click events have(2)."
The plugin repository can be found [here][3], where you can also look at the implementation instructions - especially at this one, which is a modified version that binds the tap event to all <a> elements:
$(document).ready(function(){
$("a").each(function(){
$(this).bind("tap", function(){
window.location.href = this.href;
});
});
});
Note that you will need jQuery to use this plugin. In case you don't use jQuery, write a comment and I will provide a vanilla JavaScript (potential) solution.
References
(1): https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away
(2): https://github.com/filamentgroup/tappy/#why
Related
I've been tasked with creating a website (using mainly javascript & JQuery) that reads in a certain element from a website - e.g. the navigation bar - and test it to see how it react at different screen sizes.
My question is that is this a good approach? To test elements one at a time instead of just testing the responsiveness of the whole page? Wouldn't an element react differently to media query changes with other elements around it, rather than the element by itself?
My vote will be to firefox default responsive tester. Use Ctrl+Shift+M to make the firefox screen responsive.
If you want to see the dimensions with name, go with google chrome, right-click, inspect element. There you will see a mobile icon. Click that.This will give you a dropdown of variety of devices.
Usually the good approach is to test the whole page. But clearly there are cases when element testing is necessary, even disabling certain ones and check the rest together. So the tool you're about to create actually makes sense; not good enough, tho. But maybe you're better off with a Google Chrome element inspector and some "display:none"-s.
(Side note: this is my own responsivity tester and I never needed much more than this. It aims for the typical bootstrap breakpoints; it has maybe twelve lines of code, it's just as complex as a screwdriver.)
If you want to try it on native devices you should check out www.browserstack.com
There is an extensions for your browser so that you can run local sites (localhost), on the emulated device.
30 min trial is free which is usually enough for a few tests.
I've searched around for lots of different jQuery libraries to add pinch/zoom functionality for mobile devices (like touchy.js, PhotoSwipe, TouchSwipe, hammer.js etc.) but I don't know what I should be looking for to solve this particular issue.
I need to create a simple game, very similar to "Where's Waldo?", where the user is giving a large image to scroll around (almost like Google maps), trying to find an item. When they find it, I need to take their "tap" co-ords -- taking into account the zoom level -- and see if they're right.
I feel like there's probably a library somewhere that already does 90% of what I need out of the box, but I don't know what this functionality is called. Is there such a library for this functionality?
Why don't you use the built-in pinch zoom feature? This would save you from having to do extraneous position calculations, touch listeners, etc.
<meta name="viewport" content="initial-scale = 0.1,maximum-scale = 1.0" />
I'm working on a three.js project in which I am using TrackballControls to enable touch events. But I found that my code were not working properly. I also evaluated some working examples like http://threejs.org/examples/canvas_geometry_cube.html and found at start there is a small delay of 300 ms. But it do affect a lot in my project. How could I remove this 300 ms delay?
Note : I uses both single and multi touches in my project.
I went through the concept of fastclick ( https://github.com/ftlabs/fastclick ), but for me it doesn't seem to support multi touch. If I'm wrong, please correct me.
I remember hearing something about this: http://code.google.com/p/chromium/issues/detail?id=133391
According to the linked issue, in Chrome for Android the reason for the 300 ms delay is to recognize a double-tap zoom gesture. With the change made there (in October 2012), the delay will not be imposed if the page cannot be zoomed. So, at least in this case, what you need to do is set your page meta viewport options so that the page fits the device screen and doesn't zoom.
(Disclaimer: I've never tried this myself; I just heard about it once. I have no idea if this behavior is in current released Chrome for Android, and I don't know whether other mobile browsers, such as the stock Android browser, do the same.)
(Other disclaimer: I work for Google, but I don't work on Chrome, and I am not answering on behalf of Google here.)
Finally I found a way... I was using touch to drag and drop an object in the scene... The actual problem was as follows... The 300 ms delay of touch events get combined to form a large delay... In order to overcome this, I gave a condition so that touch move events are taken with a delay of 300 ms... i.e if one event is taken, the next event taken will be the event after 300 ms... and its working quite fine...
I'm developing an app that has no use for taphold events, long-presses, and I want to remove them entirely.
The actual problem is the delay that jQuery Mobile UI introduces to allow it to distinguish between tap and taphold events, which causes taps to delay noticeably, making the app feel laggy. Long presses are not needed in many apps, so the delay is often useless.
Note that treating ontouch events as taps just makes it impossible to scroll.
I'm happy to patch the library if necessary, so answers along those lines are welcomed.
How do you remove the delay?
If removal is all you need that it can be achieved easily. One way would be to remove this functionality all together but it can be done through jQuery Mobile global configuration.
Also I can see this is an old question and jQuery Mobile has moved to version 1.3.1 so my answer is created to work in last version but from my knowledge it will work also on older versions.
All you have to do is change glabal parameter:
$.event.special.tap.tapholdThreshold
It is used to tell (in ms) how much time is needed for tap to be calculated as taphold.
We can rid off taphold if this parameter is set to some huge number.
I made you a working example: http://jsfiddle.net/Gajotres/U4prb/
$(document).bind("mobileinit", function(){
$.event.special.tap.tapholdThreshold = 10000000000;
});
Also be warned mobileinit MUST be initialized before jQuery Mobile initialization. Just take a look at my example and everything will be clear.
This might seem like a really dumb question, but I am writing an application and I have come across where my mouse-over, mouse-click and mouse-hover need different events bound to them. Now on Internet Explorer, Firefox, and Safari. It all works as expected.
However, on my iPhone the actions will not trigger. Now my question is are their any specific ways I can have the Mouse-Over essentially be fired when I hold my finger down and trigger an event?
An example where this doesn't work is right on this website when you hover over a comment it is supposed to display the +1 or flag icon.
I am using jQuery.
The answer is in the documentation that Remus posted. If you add an onclick = "void(0)" declaration, you will instruct Mobile Safari that the element is clickable, and you will gain access to the mouseover event on that element.
More info here
I think you need to reconsider your design for the iPhone (and any mobile for that matter). iPhone web interfaces shouldn't depend on mouse-overs and hovers, as they just complicate the interface significantly.
I strongly recommend that you design a new interface that is optimized for mobile viewing, that don't require clicking on small tiny arrows just to show more options.
Mobile Safari has no mouse and hover events (at least not in the usual accepted sense), they are explicitly called out in Creating Compatible Web Content Unsupported iPhone OS Technologies:
Mouse-over events The user cannot “mouse-over” a
nonclickable element on iPhone OS. The
element must be clickable for a
mouseover event to occur as described
in “One-Finger Events.”
Hover styles Since a mouseover event is sent only
before a mousedown event, hover styles
are displayed only if the user touches
and holds a clickable element with a
hover style. Read “Handling Events”
for all the events generated by
gestures on iPhone OS.
Yeah...I don't think anyone posing the question actually expected the device to "sense" a hover or mouseover. Actually you'd have to be pretty arrogant to assume someone actually meant that. Some method of triggering those event handlers is what is desired. I can definitely see a use for them in "hint" text appearing above items.
And whomever said not using mouse events makes a cleaner, simpler experience is taking their own opinion a bit too seriously. Those can greatly enhance a web page/application experience or make them worse. It's a matter of prudent usage.
The only answer anyone provided here worthwhile is whomever said it is best to have an alternate site optimized for mobile. Or possibly use a content management system that generates the page based on the browser type (similar to how Wikipedia works).
Congratulations on discovering the first thing about touch screen UI design. The bad news, is that what you want just is not going to happen.
The good news is that this will force you to make a much easier interface, for both iphone users and regular web users.
You simply cannot have a mouseover or hover functionality on touch screen devices, unless you can move a virtual pointer (though no touch UI offer that kind of functionality), but that would defeat the point of a touch screen UI.
Touch screen UI's are a paradigm shift and retro-fitting mouse-pointer UI interfaces back into touch UI design only limits and damages your solution.
Writing a mousehandler in javascript seems fairly straightforward, although I can imagine it being easy to get a lot of edge cases wrong.
The good news is, someone wrote a javascript mouse-handler/emulator whatever -- as a bookmarklet. It's called iCursor (not to be confused with the pointless mac app of the same name).
The bad news is, the guy's site (icursor.mobi) has gone off the air, and I can't find a copy, so I can't tell you how well it works. Here's a review (because I can only post one link):
What apple should have done for the iPhone/iPad was make one-finger panning move a virtual mouse pointer, and two-finger panning move within the viewport (as one-finger does now).
Two finger panning is easy; the only reason I can imagine for Apple not doing this is that they actually wanted to break 50% of the websites in the world. Seriously. It's right up there with the evil manipulative attempts to break standards that Microsoft has been doing all these years.
You're a web developer. What do you hate most? Internet Explorer. Because of all the extra headaches it causes you. Well, Stevie had to have his "me too" moment, and you're going to pay for it.