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

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.

Related

Mobile keyboard does not open with Javascript focus event

Trying to focus a simple input text when page loads with Javascript events, my goal is to focus and open the virtual keyboard on mobile browsers but I've not gotten success.
My code looks like so simple as:
document.getElementById("anser-animation").focus();
document.getElementById("anser-animation").click();
I've tried on jQuery as well...
$('#answer-animation').focus();
$('#answer-animation').trigger('click');
On android input gets focus but not on iPhones. On both cases I don't get the keyboard intermediately on page loading. I'm not sure what's more I have to do.
To my knowledge. That is because Apple has decided to disable this functionality, when bind with $(document).ready(function (){});
What you could do (if target-page is reached via Ajax and/or if it's applicable in your case) is that when a button is pressed, i.e ("sign up") is trigger focus(); on the input field.
Like this:
$(".sign-up-button").click(function (){
$(".first_name").focus();
});
This is at least how I've solved it in the past, but if this won't work for you, then I'm sorry, but you're just out of luck, like so many of us. For now at least.
You have you do like this
$("#fname").trigger('focus');

jQuery live scroll event on mobile (work around)

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

dojo onkeyup disabled after pressing tab on IE8

I have a problem with events on IE8 (dread!), using dojo toolkit 1.4.3 (can't use any other version) on a Spring application running on Websphere Portal Server.
Now, I don't believe the backend has anything to do with this, since the problem with IE8 tabbing is known:
press on any field of a webpage and press tab all the way, the focus goes back up to the url input and buttons and doesn't return to the document after repeating it, if you click on an element in a website it re-adds the focus to that element, but when you press tab again it goes back to the top of the browser.
Now, my problem happens AFTER tabbing all the way and getting the focus out of the document.
It would seem the browser is removing events from the DOM, I have debugged the code on IE8 and it seems to not trigger the callback function, while it behaves normally when not doing the whole tab thing.
I've tried using dojo.disconnect() and re-adding the events by subsequently calling dojo.connect() to no avail, here's a small snippet:
var connectedObjects = {};
dojo.query(".someClass").forEach(function(inputField){
connectedObjects[inputField.id] = {};
connectedObjects[inputField.id].onfocus = dojo.connect(inputField, "onfocus", function(event){
if(connectedObjects[inputField.id]){
dojo.disconnect(connectedObjects[inputField.id].onkeyup);
connectedObjects[inputField.id].onkeyup = dojo.connect(inputField, "onkeyup", someCallbackFunction);
}
})
});
Does anyone have any ideas on how to solve this?
so, this is a weird one, but there is a simple way to fix the problem, this also seems to fix other browsers from cycling through hidden input fields that have the css property display:none, so on to the code:
dojo.query("*").forEach(function(fieldID){
dojo.attr(fieldID, "tabIndex", "-1");
});

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 :-)

Drag-Drop disabling not working in Safari/Chrome WebKit Browsers

I have created a Rich Text Editor Web application using document.designMode="on" in an iframe.
I want the selection of text to work but want the drag and dropping of text to be disabled.
I tried this:
evt.dataTransfer.effectAllowed="none";
evt.dataTransfer.dropEffect = "none";
This works fine in Firefox but it doesn't work in Safari/Chrome WebKit browsers.
I have tried to put this in every event: dragover, dragstart, drag, dragenter etc. but to no avail. Putting evt.preventDefault() in mousedown or mouseup addEventListeners disables the selection of text which I don't want. Please help.
Ok here I can see the same issue as mine, I've been working on these last month and I just got lucky to solve using using trial and error. I was using Asp.net MVC and Safari and Chrome does not include scripts created on the views that has content place holders mapped in the header of the masterpage if you understand what I mean.
In your scenario you might need to check your javascript if it was successfully invoked by the time that the function was called. Like for example you add a library
make sure that it is on the header and when you try to call a function say for example:
function Drag(){
// Alert to prove that this Drag method was really called
alert("Drag method was called");
}
Using alerts will help you to check if your function was successfully executed although alerts are annoying but if you use it wisely it would surely help you in debugging. And most of the time it is also helpful if you can put all your scripts in the header part although some situations can't be avoided.
This worked for me in my Safari/Chrome javascript issues.
Please vote if it helped you. Thank you!

Categories

Resources