Detect the number of fingers used in gesture event - javascript

I want to implement a function that zoom object when user uses two fingers to scale.
I am trying to use gesturechange event to implement it, but I found the event fired as long as the fingers number exceed one. I want to stop zoom when user uses too many fingers to operate object (it is hard to get the correct position and scale ratio).
Could I detect the number of fingers when gesturechange fired? I know touchstart event has a event.touches.length can get it. But I want to know is the same property in gesturechange event.

Actually this is possible only on IOSX devices. Android does not expose this information to javascript. For example you have the:
document.ongesturechange=function(e)
{
//e.scale
//fingers=e.touches.length;
};
event, but this will work only on iphone/ipad.
Some jquery libraries like http://jgestures.codeplex.com/ can help simulate gesture events on android.

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);
});

jQuery capture of scroll event on iPad or iPhone not consistent with web browsers

In the site I am building, there is an effect where the top navigation "unlocks" from being a fixed element when you scroll past a certain point. It works very smoothly on my computer. However, on iPad or iPhone, the scroll event, which looks like this:
$(window).on('scroll', function(){...});
...if you flick to scroll the screen, the scrolling happens automatically, and the event doesn't fire until the scrolling comes to a stop. If you move your finger to scroll, the event doesn't fire until you let go. In other words, it does not fire as you move (i.e., scroll) the screen.
Is there some way I can capture both the movement of the user's finger as the screen is scrolled, and also as the "inertia" movement is happening? If my script would run when those events happen, the screen should be updated along the way, and it should all happen smoothly like it does on my computer.
I assume this has something to do with iOs. I don't have an Android device to test with... not sure if it is also an issue there or not.
Would appreciate any advice.
Thank you!
you could try using the touchmove event instead for mobile users. that way the code runds when they move their finger instead of after they let go.
$(document).on('touchmove', function(){...});
more info here: https://developer.mozilla.org/en-US/docs/Web/Events/touchmove
Like intelligentbean said, you could use the "touchmove" event and listen to it, you could also use touchstart and touchend if you want to do anything special before or after the touch happened.
Also, the jQuery event is also available for touch events, but its not the event passed on the parameter of the listener function, but rather on one of its properties:
$(document).on('touchmove',function(e){
touchEvent = e.originalEvent.touches[0]; //this is your usual jQuery event, with its properties such as pageX and pageY properties
});

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.

Improve responsiveness of $(...).click on touch interface

I need access to a web-based on screen keyboard which will be used on a touch interface.
This example looks nice and functional, however when I try it on an iPad, the responsiveness it very low IMHO. It's not comfortable to use and sometimes whole words are misspelled due to slow response.
Is there a way to improve the experience on this type of on screen keyboard? This implementation uses the $('#id').click(...); function to process the events. Is there a better way to achieve the goal of typing on the screen? Are there better plugins out there?
Note: The final application will run on different types of devices. For several reasons, native on screen keyboards are no option.
Mobile browsers (iOS specifically, but others too) have a slight delay before triggering the 'click' event so it can differentiate between a single tap and a double tap.
For that style of keyboard you could probably get away with changing the 'click' to a 'mouseup'/'touchend' listener to remove the delay.
However, be aware that you would need to put in extra work if you need to make sure that you only handle a touch/click event if the user presses and releases on the same element (instead of starting the touch on one element and the sliding to another one before releasing).

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

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.

Categories