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
}
Related
I have built a carousel that disables vertical scroll if scrolling horizontally on the page, and disables horizontal scroll of the carousel if scrolling vertically on the page. This works as intended on Android but not on iOS.
I'm noticing on iOS that when I look at the dev tools (using browserstack to spoof) I'm getting multiple event cycles firing (touch start, touch move, touch end) if the user swipes. They always fire as a complete set. They all fire even if the user hasn't actually removed their finger. The longer the swipe, the more cycles of these events fire. Why is this happening? My theory is that this multi fire is the problem for why my disable scrolling functions aren't working.
Desktop browsers fire scroll events continuously while the window is scrolled. Mobile devices generally fire an event once, at the end of the scroll.
I am doing some fancy stuff which only works if I can get the continuous scroll events - otherwise it just looks nasty. It would be trivial to just bypass this and implement a mobile-friendly version in single-scroll-event browsers but how can I detect whether a browser emits a single scroll event or continuous scroll events?
It seems my only option is to sniff the browser and disable this feature for mobile - which means probably disabling it in the few mobile browsers that support continuous scroll events - or leaving it enabled and allowing it to look a bit crappy in the single-event browsers.
If i am correctly understand your question. so my advice is create a variable and increase its values with + 1 everytime and alert it in your function which called on scroll. create variable out of function
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
});
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?
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.