jQuery live scroll event on mobile (work around) - javascript

The age old problem:
Getting the scroll event to fire while a user is scrolling on an element while on a mobile site or app(web view).
All I'm looking for is access to the correct scrollTop() value while a user is scrolling my page on a mobile device instead of getting it when the user stops.
I'm sure there is a workaround somewhere, if I'm correct this limitation is set by iOS and there has been discussion over it for the past few years.
I've tried implementing native scroll emulators but none of them seem to be working how I want and to be honest it seems like overkill if all I really want is a persistent scrollTop() while a user is scrolling.
I'm currently thinking about maybe starting a counter on touchStart and stopping it on touchStop but something tells me I'm wasting my time.
Any help guys?

With jQuery:
$('body').bind('touchmove', function(e) {
console.log($(this).scrollTop()); // Replace this with your code.
});
This should give you a consistent stream of the scrollTop value when the user scrolls, but be careful as it's going to fire even while the user is just holding his finger on the screen.
Note that if you're using jQuery >= 1.7 the preferred binding method is
.on() instead of the .bind() method I've used in my example. In that case my example would be
$('body').on({
'touchmove': function(e) {
console.log($(this).scrollTop()); // Replace this with your code.
}
});
Source: https://github.com/dantipa/pull-to-refresh-js/blob/master/jquery.plugin.pullToRefresh.js

maybe you could take a look at how iScroll does it in their _move-method which is bound to the touchmove event: https://github.com/cubiq/iscroll/blob/master/src/core.js#L152
It's a bit complicated but i'm sure you'll figure it out. You could also just use iScroll to begin with and bind to their scrollmove event (I'm not sure how it's called on iScroll 5 but it was onScrollMove in iScroll 4). that.y will then give you the correct value.

I had to go the iScroll route to do this. I wrote up my implementation here: https://stackoverflow.com/a/23140322/229315

Related

jQuery: Prevent page scroll when user's finger touches an element

I'm using the following jQuery plugin: http://willowsystems.github.io/jSignature/
I'm trying to do something very simple which is stopping page scrolling when the user's finger is inside a signature area (the page movement when writing a signature on the phone is excruciatingly bad to the point where you can't write your signature at all). I have tried the following which is not working in Firefox and I'm not sure why:
$('.signature').on('touchmove', function(e) {
e.preventDefault();
});
I have also tried this which isn't working either:
$(document).delegate('.signature', 'touchmove', false);
I've searched for hours and I can't seem to find anything that works. If anymore detail is required please let me know and I will happily append to the question.
Thank you very much for everyones help.
edit: I'm using the latest version of Firefox on the phone.
try to use the e.preventDefault() on the ontouchmove of the html element.
<div class="signature" ontouchmove="event.preventDefault();">
</div>
this example works for me:
http://jsbin.com/pulul/1/edit?html,css,output
Same problem in field on Android browser. Capturing signature gets dots instead of sig. So, testing in browser I see the focus is never lost from prior field when i click with mouse into jSignature. So, try something like this:
onblur="if(this.value.length>1) document.getElementById('CustomerSignature').focus()"
Welp, with that you'll see the onblur DOES NOT FIRE when you touch your jSignature but does fire when you touch your other fields. There ya go. Have not been able to reproduce the exact bug reported to me yet on the tablet; but I think the scroll is being sent to ANOTHER element.
So, fix is to force the focus to change to the jSignature. That's what I think.
For now, I fiddled around with the HTML so my last field is a select and use the onchange to set the focus to my jSig.

onpagechanged for flipview (winjs)

I would like to know if the flipview control of the winjs library (win8) has got an event, which it called when the page turns, no matter if by keyboard or by mouseclick or swiping?
I was Googling for it, but i could just find other methods which does not fire at the right moment.
is there maybe a way you can make such events?
You should use the onpagechanged event. This will fire when the user switches pages no matter the mechanism.
Try using the pagecompleted event. Used it in one of my apps and it worked. Hope it works for you too :)

Disable iPad touch and hold functionality on all but one element

I would like to be able to disable the iPad touch & hold functionality for everything on my site except for one image. I've managed to do this for all images using the:
event.preventDefault();
event.stopPropagation();
on touchstart & touchmove events, and this works great. But I haven't been able to work out how to allow this functionality for a particular image on my site.
Any help would be appreciated.
Cheers,
Helmut
OK I've worked out a way to do this. Basically I put a condition around those event statement, like this:
if (!saveImage)
{
event.preventDefault();
event.stopPropagation();
}
I only did this for those functions called at the touchstart event, as I didn't need to (or want to) prevent defaults for any other touch events. All I needed to do then was to set the saveImage Boolean appropriately so that it was only true when I was touching the image I wanted to save (which was pretty straight forward).

How can I use Google's/MBP FastButton code with backbone events

Buttons are slow on mobiles (at least 300ms delay in most browsers due to drag detection among other things). Google wrote some javascript to fix this:
http://code.google.com/mobile/articles/fast_buttons.html
The Mobile HTML5 Boilerplate people integrated this into their package:
https://github.com/h5bp/mobile-boilerplate/blob/master/js/mylibs/helper.js#L86
I want to figure out how I can easily use this with backbone. Something like:
events: {
"fastbutton button.save": "save"
}
Where fastbutton replaces click or mousedown with the fast button code. I expect that I will need to rewrite the MPB.fastbutton code a bit. Has anybody done this?
Instead of creating 'fastbuttons' everywhere, it's probably saner to use a library like FastClick that will transparently convert touches to click events on the touched element and get rid of that 300ms delay.
It's as easy as new FastClick(document.body) and you're ready to go.
The advantage of that approach is that if or when the behaviour of touch events changes on mobile devices so that there's no delay on elements with a click event registered, you can just change one line of code to drop the library instead of changing all your code to convert 'fastbuttons' to regular buttons. Maintainability is always good.
I'm pretty sure, this won't work the way you'd like it to. Instead of having an additional event, like say "fastclick", you have to define an element as beeing a fastButton. You actually have to create an instance of fastbutton on which you pass the element and the code like this:
new MBP.fastButton($("button.save"), function() { this.save(); }.bind(this));
In case of backbone, you can easily do this in the initialize() function instead of the events object.
// sorry, just read that you are not really looking for this :)

iOS5 Safari: Keyboard does not hide in a home screen HTML app

I am working on a custom application for the iPad that runs as a homescreen app, but is made in all CSS/HTML/Javascript. (not using the SDK here)
I have run into an issue with a calculator I have built into my page not hiding the keyboard. No matter what I do, the keyboard stays up. I have searched this extensively and tried everything I can think of, but the keyboard stays up no matter what I do.
Explanation of what I have tried to hide the keyboard:
I have tried to blur all input fields to remove focus. I have tried setting focus onto non-text field items.
There were several threads on Stackoverflow from earlier this year/last year that suggested both of those options, but they do not appear to be working anymore.
To test further, I put a blank a href="#" on an img that was above the calculator, so that I could set focus on a non-entry and see if that would auto-minimize the keyboard. When I tap that item above the keyboard the focus changes and I am no longer in input mode, but the keyboard stays up.
Did Apple break this functionality with the latest update? If so, is there a work around?
Here is some example code that doesn't work:
$('input').blur(function(e) {
// Keyboard disappeared
window.scrollTo(0, 1);
});
That code successfully removes focus from the inputs, but the keyboard stays up. I have also attempted the inverse of that by just .focus ing on a non-text element. And additionally, as stated previously, I have straight-up just added a non-text element on the page and that still doesn't hide the keyboard.
Thanks so much for any help, and feel free to link/abuse me if I have mistakenly reposted. :)
you should be able to blur it just by using something like this
$('input').blur();
you should put this inside the function/procedure that happens when you want it to disappear, unless your looking to disable it completely?
document.activeElement.blur() inside a try catch block works for me. (Possibly you also need a setTimeout? I didn't need a timeout, and it is important to avoid timeouts wherever possible because they can easily cause nasty heisen-bugs!)
Also double check that you are not calling focus() somewhere within a mousedown or click event (which causes the keyboard to show). You can use a console.log(document.activeElement.tagName); or similar to help find what has current focus.
However if you don't find a solution then I am very interested in seeing how you get the keyboard to stay up... I have a use for that :-)

Categories

Resources