i have a question regarding jQuery mousemove() on iPhone. The problem is that it doesn't show the movement on iPhone when touches occur; the events are not working properly in Safari on iPhone.
Can I get any tips of any Javascript plugins to fix this or detect movement on iPhone?
You can use jQuery mobile and use the virtual events created by that plugin (vmousemove for example). More info on the events here.
However this framework is NOT compatible with every jQuery plug-in (for example some of jQuery-UI widgets are integrated in it, but in a different way). It probably works for plugin that are not event driven (i.e. that don't change the way the user interract).
An other choice is jQTouch but I don't know much about it.
You should use the touchmove event. Example of usage:
$('#selector').bind('touchmove', function(event)
{
// your code...
});
Related
I'm working on a wordpress site, and I'm trying to get touch events to work, I'm currently using a simple touch start event like this:
$(".element").bind("touchstart", function() { $(".element").hide(); });
Where element is just a button tag.
My problem is that the events are not firing on any browser for IOS, even though they are working correctly on android.
I'm lead to believe that wordpress might have something to do with this, because I've tried the same events on web pages without wordpress, and they all work fine.
I would like to know, how can I get pageinit event without jquery mobile or with minimal assembly/build of jquery mobile library at which event will work?
I need to use $(document).ready(function() on mobile devices, but only this functionality, nothing else.
I'm not entirely sure if I understand how to detect touchscreens and change classes with Jquery. So anyway, I have a bootstrap nav menu with dropdowns that display on 'hover' on desktops. I have managed to disable the hover functions on touch devices using:
if (!("ontouchstart" in document.documentElement)) {
document.documentElement.className += " no-touch"; }
Now I want to add back in the classes in the dropdown items that enable the toggle dropdown again. This is what I came up with:
$('.dropdown a').on('touchstart', function(){
$(this).addClass('dropdown-toggle');
$(this).data('toggle','dropdown');
});
Apparently it's working on ipad, but not on my kindle fire. Why would the first code above work, but the 2nd one here not?
'ontouchstart' is Apples way of handling touch events, so iOS only.
For all other devices you have to use 'onpointerdown'.
Eloquently addressed here, http://www.stucox.com/blog/you-cant-detect-a-touchscreen/
a browser cannot truly detect if a touch capable display is present, so you have to assume all devices have touch capability and code appropriately.
To make it more complicated, trying to separate touch from click, goes out the window with a touchscreen laptop.
I wrote jQuery plugin that unifies touch/hover/click behavior for all devices that works exactly how you are approaching this. By swapping classes depending on what you are trying to do.
This article goes into more detail regarding how the browser is interpreting these different interactions. http://fallingmonocle.com/monocle-toggle.php
I have a bootstrap .btn that I want to toggle with the mouse click. The problem is that the response is way too slow on tablets, since the click arrives 300 ms after the touchstart in mobile browsers.
I tried binding the logic in the touchstart event, effectively breaking the app for desktop browsers where there is no touchstart. I then thought of binding the same logic also to click but then I get a repeated event in mobile browsers. I've juggling around, trying to unbind from click the first time I receive a touchstart, and so on, and managed to come up with a design so complicated that there is always some quirk here or there that I cannot solve.
For instance, I can't get a text input to receive focus in the tablet: if I do focus on touchstart then the click event returns the focus to the button. I tried jQuery Mobile's vmousedown, but I couldn't manage to have multi-touch (tapping more than one button at the same time only changed one of them). I don't want to reinvent a lot of wheels, and I'm sure I must be missing something obvious, either on jQuery Mobile, or plain JavaScript.
In concrete, I want an event like vmousedown that works both on desktops and mobiles, only fires once on each, and allows multi-touch.
Utilize Modernizr for handling actions based on the device, etc. It provides great cross-browser/platform support without the need to sniff User Agents and the like. Instead, it uses feature detection.
You can just use the Modernizr functions with jQuery's $(document).ready(function()});
$(function(){
if (Modernizr.touch){
// bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
// bind to normal click, mousemove, etc
}
});
This code has been taken straight from the Modernizr Documentation
Also, here's another resource for performing touch tests
Late to the party, but note that jQueryMobile also has similar touch detection:
if ( $.mobile.support.touch ) {...
And no, IMHO, you are not missing anything obvious :), cross-platform / cross-device / touch-friendly features are still harder than they should be. For example, today I'm looking at a win8 surface tablet: touch-screen and a mouse. There are cases where i'd like to know which device was used. event.originalEvent.type should differentiate between tap and click, right? wrong :(.
I have a page that uses JQuery UI; in particular the Sortable interaction.
The page works fine for desktop web browsers with mice, however I can't get the drag-drop functionality to work on Mobile Safari on the iPhone. Any dragging action simply scrolls the page.
The functionality on my page is extremely similar to the Sortable Empty-Lists demo on the JQuery UI site. This page also doesn't work on the iPhone.
Is there any way to get the drag-drop functions working on the iPhone?
According to the Mobile Safari docs drag and drop is not supported, but it can be simulated. Since basically dragging your finger along will scroll the browser you will have to disable this. That can be done like this:
$(document).bind('touchmove', function(e) {
e.preventDefault();
}, false);
Otherwise the event you will have to handle are touchstart, touchmove and touchend.
This is a demo of jquery ui 1.9pre:
https://dl.dropbox.com/u/3872624/lab/touch/index.html
The jquery.mouse.ui.js file is working great for me.