Web iPad app - how to differentiante between one- and two- finger scrolls - javascript

Doing Web app for iPad clients, but need to recognize where user is doing one- and whe two-finger scrolls. Anybody know how to implement it? Any convenient jQuery plug in or something? Thanks.

I'm going to assume that by 'scroll' you mean the panning gesture.
Looking at Handling Events documentation for mobile Safari it would seem that unless the element is scrollable you wont be able to detect any difference using the high-level DOM-events (both the one- and two-finger
panning gesture will result in an onscroll event when movement stops).
If, the element is scrollable you'll receive a series of mousewheel events instead.
If you'd be willing to get your hands a little dirty you should have a look at the section called 'Handling Multi-Touch Events'. You could probably achieve what you want by opting-in to receive the more low-level multi-touch events (touchStart, touchMove, touchEnd, touchCancel). The event object passed to the handlers of these events contains a 'touches' property which allows you to look at the position of all "fingertips". That'd propably give you all information you need.
Don't forget to prevent the default behavior though, otherwise you'll still receive the onscroll and/or mousewheel events.
Have a look at the "virtual light table" demo for some inspiration on handling multi touch events in javascript. There's also an excellent article at sitepen.com that you should have a look at.

Related

Is there a way to detect mouse wheel hardware with web programming?

I have a website, and I want to highly encourage my users to use a mouse with a mousewheel when navigating my website.
But, if they already have a mousewheel, such encouragement would be redundant. They wouldn't need encouragement simply because they already have the hardware that facilitates the website.
Is there a way to check if they have a mouse with a mousewheel? Perhaps with flash, javascript, or some other language?
No, there is no access to hardware information like that for mainly security reasons (fingerprinting) as well as to avoid overhead from probing code needed for each platform etc. which is generally not so useful.
The only thing we can do, like with for example touch events, is to subscribe to the mousewheel event and establish it exist if ever triggered. I think it's a fair assumption to make that most people having a mouse-wheel tend to use it, so the event will trigger sooner or later. You can also request, if possible in your scenario, the user to use the mouse wheel or click a skip button to pass a small dialog for example. If button was clicked assume the user does not have a mouse-wheel.
It's the closest we get in any case...
Here's an article that describes How to Use the Mouse Wheel Event, and gives an example: http://www.sitepoint.com/html5-javascript-mouse-wheel/
Try This using addEventListener. Below is a simple example to detect mousewheel scroll up and down
window.addEventListener('mousewheel', function(e){
wDelta = e.wheelDelta < 0 ? 'down' : 'up';
console.log(wDelta);
});

Touch-compatible JS quick navigation scrubber?

In long lists on iOS there exists a quick navigation "scrubber" on the right-hand side that you can brush your finger across to quickly jump from one item to the next, e.g. in the Music app if you have enough music available you'll see ABCD... allowing you to quickly jump to that letter of the alphabet in your list.
Does anyone know of a library or plugin to recreate this touch-based behavior on a website using anchor tags?
If not, are there any recommended approaches? My current thoughts are to disable touch events for the anchors if possible and capture touchbegin and touchmove on the parent div, then compare the coordinates of the touch with the coordinates of the anchor tags and fire off artificial 'click' events to cause the navigation.
Thanks in advance for any help.
https://github.com/desmosinc/scrubber
Simple, attractive html+js scrubber control.
Tested in recent versions of Firefox, Chrome, Safari, and IE9+. Works
with mouse events and touch events.

Is it possible to know if a real mouse is used on a device with touch features using javascript?

I'am working on a web site and I'am using modernizer to know if a device is touch compatible.
In this case, i filter all 'hover' of html tags of my application.
example : .no-touch div.cell:hover
But how can I know if the user also uses a real mouse on a touch device ?
More and more devices allow both and i want to display 'hover' on touch devices when a user prefers to use a mouse instead of (touch).
I'am using angularjs then a related solution should be great.
Thanks
Mouse events should trigger click events, whereas Touch events should trigger the touch events. However, let it be known now that some touch screens (typically older models) don't have "real" touch capability. All they do is take the touch input and convert it into clicks.
Also, I don't think the :hover attribute ever cares if it's mouse or touch. I think the only calculation that goes into that is whether or not the cursor is above the given element.

Implementing swipe gestures in a web app that uses -webkit-overflow-scrolling:touch

I'm working on a web application in which I make widespread use of -webkit-overflow-scrolling:touch.
I'd also be like to be able to implement swipe gestures on those same elements (divs) that utilize this great webkit-specific css feature.
In other words - I'd like this to behave like the Inbox works on the native iOS mail app; if you flick your finger vertically - the inbox scrolls with natural, smooth momentum. If you swipe your finger horizontally - the "mail item" slides to the left or right. Importantly, however, you can't do both - the app only allows to to scroll or swipe.
I assume this is implemented something like this:
Capture the touchstart event, and prevent the default behavior (e.g., event.preventDefault()), because we don't know yet if the user intends to scroll or swipe.
Capture touchmove events, and track how far the user's finger has moved from the initial touch point.
After a certain threshold (e.g., 10 pixels), determine whether the user's finger has moved more vertically or horizontally. If the former - implement scroll. If the later, implement swipe.
In theory - this seems quite doable in JavaScript.
However - I can't get it to work because - once I use event.preventDefault() on the initial touchstart event - I can't subsequently get momentum scrolling to work. That is - I can't find any way to start momentum scrolling programmatically with JavaScript after I've determined that the user intended to scroll.
This seems like it should be a fairly common design pattern (swipe gestures AND webkit-overflow-scrolling:touch), but I haven't been able to find an implementation of it.
I've looked in to hammer.js (http://eightmedia.github.io/hammer.js/); that enables me to detect swipe events on a div that's scrolling.
However - I don't see how that enables me to allow scroll or swipe, but not both. By the time Hammer.js recognizes the swipe gesture - the div is already scrolling.
Thanks in advance!

Cross-platform HTML touchend event handling

In reading about the touchend event, it seem that the behavior is somewhat inconsistent across different devices. I simply want to know the best and simplest way to determine whether all touching has ceased. Do I understand correctly that I can't rely on event.touches being null or empty when this is the case because some devices will include the ended touch in that list? Do I understand correctly that I can't rely on changedTouches being the same length as touches when this is the case because some devices will exclude the ended touch from touches?
For now only OSX (ipad, iphone) support ongesturechange event on their browser. All the other events are supported in all devices, here are some of them and that is the way how to use them. To detect touch end you can use touchend even, it is the same over all devices and it will fires when all fingers are not in touch:
$(someel).bind('touchend',callback');
To detect touch support just use this
var touchy=("ontouchstart" in document.documentElement)?true:false;
Safari developers ipad guide has a good documentation on this.
UPDATE: In fact I was wrong, touchend fires every time a finger lifts up: here is an excellent pdf for you: http://www.albanx.com/programing/ajaxupload/uploaded/SafariJSRef.pdf look at page 21.

Categories