jquery.mousewheel.js iPhone scrolling - javascript

I am creating a web app that uses the jquery.mousewheel.js plugin to detect the user's mousewheel and then scroll between the two sections.
The body element is also set to overflow:hidden so I can't detect a scroll event.
It works perfectly on the desktop but I've tried it on iPhone and it doesn't trigger the mouse wheel event at all. So is there some sort of add-on to the plugin I am using or an alternative event I can listen for, that will tell me when the user tries to scroll down/up vertically?

Using something like Hammer.js you can detect swipes via swipeup & swipedown events, and it even includes a jquery plugin so you can just write the following:
$("html, body").hammer().on("swipedown", function(e) {
// do scroll up stuff
});
$("html, body").hammer().on("swipeup", function(e) {
// do scroll down stuff
});

You can capture the gestures with HammerJS, but then you have to code the scrolling yourself. Another option is to use iScroll with probing enabled, letting you capture the scroll position without interfering. More here:
javascript scroll event for iPhone/iPad?

Related

How to trigger wheel event on mobile

I'm trying to implement a new feature on my site, namely moving between form pages using the mouse wheel. I tried to use event "wheel" which perfectly works on desktop, however does not trigger on mobile (iphone - Safari and Chrome). I assume the mobile APIs of these browsers just do not support it, so I'm curious how to trigger it somehow.
I've tried wheel event and mousewheel as well - neither works. I'm listening along with "wheel" the event "scroll" to prevent change form pages if scroll does not reach top or bottom of the page. As I said desktop - perfect, mobile (iphone) - does not work at all.
On mobile you should listen to touch events, either touchend (if you want to move pages once the "scroll" motion is done) or touchmove (if you want to move pages during the scroll). Either way, in your event callback you can calculate if you're at the bottom of the page and then react accordingly:
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
// at bottom of page
}

Touch event for mouseover

In a web application touch-version,
I'm converting mouse events to touch events.
mousedown=>touchstart,
mouseup=>touchend...
I also want to convert mouseover event.
Touch mouseover ? it is ansurd, the touchpad doesnt detect your finger in the air !
Not really, if you swipe your finger over an element, e.g. And you want the element to get bigger... for example.
Is there a touch event for such a behaviour (mouseover for touch) ?
Currently, jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that the slick UI you designed and tested in your desktop browser will fail on most, if not all, touch-enabled mobile devices, becuase jQuery UI listens to mouse events—mouseover, mousemove and mouseout—not touch events—touchstart, touchmove and touchend.
That's where jQuery UI Touch Punch comes in. Touch Punch works by using simulated events to map touch events to their mouse event analogs. Simply include the script on your page and your touch events will be turned into their corresponding mouse events to which jQuery UI will respond as expected.
Visit the website and read the documentation.
Virtual mouse event by JQuery mobile
is quite welldone.
https://api.jquerymobile.com/vmouseover/
You should try trigger('click') on on('mouseover',function(){});

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

trigger scroll events on mobile momentum scroll

Not sure if I worded it correctly, but I am almost done with a workaround for creating sticky elements on mobile. So element is in doc flow then sticks to the top once it hits top of window. Waypoints.js does this but does not work very well on mobile.
So far I have been able to get it working normally on desktop (not a big deal), have been able to get it working on mobile touch scroll (kind of a big deal) but if the user lifts the finger off and the momentum scrolling takes over then the events don't fire until the momentum/scrolling stops.
Does anyone know how to make scroll events trigger during this momentum scroll?
This is what I did to make it work with touch scroll:
var stickyElementPosition = $('#thing-to-be-sticky').offset().top;
$(window).on("touchmove",function(){
var scrollPosition = $('body').scrollTop();
console.log(scrollPosition);
if(scrollPosition >= stickyElementPosition){
$('#thing-to-be-sticky').addClass('stuck');
}
else{
$('#thing-to-be-sticky').removeClass('stuck');
}
});
I made a JS fiddle but am not sure how to use it on a touch device. it just tries to scroll the entire page rather than the iframe/result.
link to fiddle

Javascript swipe event while maintaining browser pinch functionality

I am looking to utilize swipe events on a mobile web app (Android, and iOS), but I also need the browsers native pinch to zoom functionality to stay in place.
I have tried using various touch event libraries such as Hammer.js, but all seem to discard mobile Safari's pinch to zoom functionality when swipes are handled. It would also be nice to keep vertical scrolling intact as well.
Basically, I am looking for a way to recognize left/right direction swipes, and only that. Any ideas?
I used similar functionality to this in a recent project. To allow the pinch to zoom functionality to work you just need to make sure you correctly specify the values in the viewport tag eg.
<meta name=viewport content="width=device-width,user-scalable=yes,initial-scale=1.0, maximum-scale=2.0"/>
The most important values are the user-scalable=yes and also the maximum scale since this must be greater than 1.0 to allow for zooming.
You can find more information on viewport here: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
For the swipe events you can bind the swipeleft and swiperight events to a .on() function in jQuery Mobile.
Here is an example of what your code should look like:
$('#yourElement').on('swipeleft swiperight', function (event) {
//swiped to the left
if (event.type == "swipeleft") {
//do something
}
//swiped to the right
if (event.type == "swiperight") {
//do something
}
});
For more info on jQuery Mobile events you can check out this link (or the link m_gol provided above since they are basically the same):
http://jquerymobile.com/demos/1.1.1/docs/api/events.html
Using both sets of code above, you will be able to detect swipe events as well as pinch to zoom the page.

Categories