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

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

Related

How does one implement scroll hijacking (scrolljacking) in the browser (react or vanilla js)?

I've been trying to implement something like what Typeform does (Example https://www.typeform.com/templates/t/online-quote-form/?preview=template) where the user can't scroll the page, and instead any scroll trigger just advances to the next question.
So far I've figured out that it's insufficient to add a handler to the scroll event. It seems like I need to add handlers to wheel, keydown, swipe, and maybe other things, to implement the different scrolling behavior.
But I can't seem to work out all of the kinks. In particular, a wheel scroll will have the expected behavior and then continue scrolling, and I can't seem to cancel that behavior.
(I'm aware that this is a UX antipattern; I'm doing it anyway.)
At the moment I don't have a reasonable code sample but I'll add one if nobody has a solution offhand.

Touchpad scroll detection in JS, no library

I'm making my own little Javascript library that makes it easy to replace the default scrollbars for your Website (and mine) with custom ones. Part of that means giving the BODY element an "overflow:hidden" style to hide the normal scrollbars. However, this prevents all scrolling except for that which is done in code.
I have everything working in terms of showing the bar and having it scroll when you click/drag it. However, many touchpads (like on the computer I'm testing this with) have a feature where you can scroll by sliding a finger along the right side of the pad. I need the library not to break that, so I need some way of detecting when the user tries to scroll this way.
I thought it would be interpreted by the browser as a mouse wheel, so I set up an onmousewheel event, but that doesn't seem to capture it at all. For the record, I'm testing with Firefox 25.0.1.
Is there any way to capture the trackpack scrolling, preferably without an external library? I'm trying to keep this as self-contained and lightweight as possible, but if I absolutely need to, I guess I can use jQuery and its mousewheel extension...
Some browsers use the onwheel event instead of onmousewheel. So, it's usually a good idea to listen for both events.
See this MDN article for more about onwheel.

Detect the number of fingers used in gesture event

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.

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