As the title states, is there a way to detect if a mobile user is doing a tap and drag with javascript / jquery? Running into a user experience issue where ripple effects I have set on elements is activate while tap & dragging / browsing content on mobile devices.
I would recommend using jQuery touch punch for that.
You have great documentation and lots of events you can hook into for all sorts of tasks.
You can do things like Drag/Drop, Resize and more..
Have a look at JQuery Mobile. It has tap and swipe events.
Related
I've implemented jScrollPane and I'm having an issue on touch devices.
The example I'm using is http://jscrollpane.kelvinluck.com/drag_size.html where I have a vertical scroll using a circular button image for the scroll on the track. The class that's added to this is jspDrag.
On desktop, when you click and scroll the vertical button, it drags down and the content scrolls up, which is natural in my eyes.
The issue I'm facing is on touch devices (check the example URL above in Chrome using iPhone/iPad emulation in dev. tools) where you can't actually drag the button down - you actually have to scroll it up for the content to scroll?!
Users are definitely not going to know this as it's a button rather than a content block that you're using as a control.
I'd like to be able to touch and drag the button down on touch devices, rather than up, to make the content scroll.
Has any one come across this issue and managed to solve it? I've searched SO and Google Groups with no luck.
Thanks.
Unfortunately jScrollPane seems to just work like this, with an annoying caveat, which is unfortunate - I really liked the plugin.
I came across http://manos.malihu.gr/jquery-custom-content-scroller/ which functions the way it should and runs super smooth on touch devices.
I seen quite a number of JavaScript and jQuery codes online to disable right click and context menu but unfortunately they do not work on mobile devices, any advise on how to achieve this?
This is because on smartphones and tablets these are no mouse events but touch events. Look for a way to detect and if needed disable touch events.
I'am working on a web site and I'am using modernizer to know if a device is touch compatible.
In this case, i filter all 'hover' of html tags of my application.
example : .no-touch div.cell:hover
But how can I know if the user also uses a real mouse on a touch device ?
More and more devices allow both and i want to display 'hover' on touch devices when a user prefers to use a mouse instead of (touch).
I'am using angularjs then a related solution should be great.
Thanks
Mouse events should trigger click events, whereas Touch events should trigger the touch events. However, let it be known now that some touch screens (typically older models) don't have "real" touch capability. All they do is take the touch input and convert it into clicks.
Also, I don't think the :hover attribute ever cares if it's mouse or touch. I think the only calculation that goes into that is whether or not the cursor is above the given element.
I'm making an offline version of an online products catalogue for the Ipad. It will be written in HTML5 / JS and utilise offline image caching and localstorage.
I want to be able to introduce the same UI interactions as come with the Ipad in terms of swiping. So if the user swipes from right to left, it will load the next product. If they swipe from left to right, it will load the previous image.
How do I capture this with Javascript ?
You can have a look at the events supported by mobile Safari here:
http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
touchstart, touchmove and touchend events in particular
Or, if you don't want to reinvent the wheel, you can have a look at these scripts:
http://cubiq.org/swipeview
http://plugins.jquery.com/project/swipe
I have a little app that has been under development for some time. My friends and I have been working really hard on this and are near release of the beta version.
I want to give some demos using iPhone and iPad to look cool :p
Now my problem is how to handle:
Mouse Down
Mouse Up
Mouse Leave
The multitouch interface of the iPhone (which I expect is similar to the iPad) handles mouse move on a browser has a scrolling event. One could try to capture the scrolling event and use it to simulate the dragging but I don't even know if it will be doable or if it will only be a hack.
Any one knows of a more robust manner to manage dragging events on the iphone/ipad?
Apple's Developer pages have a lot of good info on handling just these types of issues.
Handling Events
I was having the same problem and I realized that in the short time-span I had, developing codes to handle raw mouse (down, move and up) events would take time. So, I went ahead and modified the ThreeDumsMedia jQuery.event.drag plugin to make it to work on iPhone.
Get the jQuery.event.drag from http://www.shamasis.net/2011/06/javascript-drag-events-on-iphone-and-other-touch-based-devices/ and the 'drag' event would work just fine on iOS devices.
let me know if this helped.
Try this :
jquery.event.drag - v 2.2
Three Dub Media - http://threedubmedia.com
If you are using jQuery, then use jquery.ui.mouse.touch.js with jquery UI 1.9.