Using Phonegap I'm trying to update an element when the user scrolls. Using window.onscroll, the event is only triggered once the scrolling has finished. I need to react on the scrolling while the user scrolls. I found out you can use
document.body.addEventListener('touchmove', function(){})
which seems to work well while the user has his (her) finger on the screen, but if he flips the content and and releases his finger, the event will only be triggered after the scrolling has stopped.
Is there any way to track the scrolling while the user scrolls in Phonegap?
Related
is there any way to enhance scroll functionality in javascript to force it to scroll vertically to specific element when user uses mouse wheel to scroll?
just want to implement functionality like single page applications have.
Yes there is. You can listen for the wheel event, which will be triggered when the user scrolls. You can then prevent the default action to stop the window from scrolling and implement whatever you want the page to do on scroll.
I have an html notification view with a scrollbar.
Each notification of the list reacts to onmouseover to display a little toolbar.
When the user scrolls, the scrolling experience is not smooth due to these onmouseover events that are fired during the scrolling.
How can I make the scroll smoother? Should I try to deactivate the onmouseover when user is scrolling? What is the best way to do it?
I wanted my webpage can change when user slide left/right using their finger on touch device (android/tablet). I found following source code that works what i need:
http://padilicious.com/code/touchevents/
But that has few limitations. It doesn't move/slide the page/element to left/right. It just change the page (href/page location). So, user don't understand whether they slide it correctly or not.
but on touch screen device like gallery you can see when user slide to left/right image move to left/right as user move the finger and it goes away left/right when user finish the slide.
i want to do something like that.
so, when user move finger my page will move with the finger too and when he remove the finger my page will go left/right with slide transition effect.
here is the sample code for page transition...
http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_trans_slide
hope that make sense..
You can use jQt to capture touch screen swipe events. After capturing these events you can easily make an application that navigates like you want. Also jQt has it's own webkit animations. And they are pretty cool.
You can also check this Safari Web Content Guide to capture these events yourself.
Another nice tutorial for detecting swipes for touch screens.
How can I stop user from using mouse wheel to scroll HTML page?
Normally we use the mouse wheel to scroll page. I the page to keep still even when user triggers the mouse wheel. What should I do?
window.onmousewheel=function(){return false}
http://jsfiddle.net/vBCbP/
Hover events are playing an important role in the navigation of my web page, and I don't want the user to get distracted by triggering them accidentally.
I'm aware of hoverIntent, which doesn't fire a hover event until the mouse has slowed down sufficiently. However, it always fires a hover event when the user scrolls down and lands atop the element.
Google Images manages to solve this quite beautifully: it doesn't fire hovers when scrolling down, and additionally even jerking the mouse a tiny bit after scrolling into an element doesn't trigger a hover.
Is there any plugin out there that implements hovering behavior similar to Google Images?
Maybe with this will help: http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
So you will know when the user is scrolling, so you will also know not to fire the hover-event.