How to handle drag events on iphone and ipad with javascript/jquery? - javascript

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.

Related

How to prevent IE from whole-page-zooming when someone "pinches" on touch screen?

I have an element with a line graph in it that I want to be able to handle pinch zooms, so the user can zoom in or out on a certain part of the graph. This works great in every browser except IE11, where instead of zooming the element, it zooms the entire page.
Is there an obvious way to prevent this kind of functionality, so IE allows for pinch-zooming on specific elements? Or maybe there's some way to capture the pinch event, e.preventDefault(), and maybe zoom the graph manually?
I have asked a few other people to try to reproduce the issue, and it seems like it's not a problem on Windows 10... I'm on Windows 7. Could this really be platform dependent? But even if it is, maybe intercepting the events is a good approach? Any suggestions would be greatly appreciated.
Here's an example of a chart where I am having this problem:
http://demos.wijmo.com/5/Angular/FlexChartZoom/FlexChartZoom/
According to the official documentation, programmatic control of touch and gesture recognition requires Windows 8 or later.

How does Chrome developer tools emulate touch events?

I have tried a few different Javascript tools/hacks/frameworks that emulates touch events on a PC, but none does it as flawlessly as Chrome's developer tools. How is it done? Can it be done as good as that with Javascript?
Let me give you an example to illustrate what I mean: I have built a webapp, exclusively for touch screens, containing a bunch of draggable elements. Now I also want to make it available for ordinary web browsers. The simplest way to do this is to use a small Javascript framework that maps mouse events to touch events, like touche.js. The problem with this approach is that if I drag fast, the mouse pointer will move out from the draggable, which then immediately stops. When I use Chrome's built-in emulated touch events (in Developer Tools), this never happens. I can drag as fast as I want. The code is exactly the same, except for the framework.
Do you have any ideas why this is happening, and if there is any remedy to the problem?
Probably on a lower level than javascript. Try a search for touchstart in the chromium code base and you can see that it's mostly C++ code :(

Cross-platform HTML touchend event handling

In reading about the touchend event, it seem that the behavior is somewhat inconsistent across different devices. I simply want to know the best and simplest way to determine whether all touching has ceased. Do I understand correctly that I can't rely on event.touches being null or empty when this is the case because some devices will include the ended touch in that list? Do I understand correctly that I can't rely on changedTouches being the same length as touches when this is the case because some devices will exclude the ended touch from touches?
For now only OSX (ipad, iphone) support ongesturechange event on their browser. All the other events are supported in all devices, here are some of them and that is the way how to use them. To detect touch end you can use touchend even, it is the same over all devices and it will fires when all fingers are not in touch:
$(someel).bind('touchend',callback');
To detect touch support just use this
var touchy=("ontouchstart" in document.documentElement)?true:false;
Safari developers ipad guide has a good documentation on this.
UPDATE: In fact I was wrong, touchend fires every time a finger lifts up: here is an excellent pdf for you: http://www.albanx.com/programing/ajaxupload/uploaded/SafariJSRef.pdf look at page 21.

JavaScript libraries for touch screen devices

I know there are a number of frameworks to help make web applications on Mobile Safari/Webkit look and behave like native applications (eg, jQTouch), but are there any more light-weight libraries that help out at a slightly lower-level?
eg, I might want to add some animations on certain touch events to reproduce an iPhone style swipe.
I don't want to create an iPhone web application as such, just enhance an existing site with a few special touch events.
It's not so difficult to create this stuff by directly using the touch events that the device provides, but some of the iPhone animation styles are quite complex to reproduce. eg, the bounce when you get to the end of a scroll bar, etc... Just wondering if anyone has done the work and wrapped it up into an open source library.
This doesn't answer your question completely, but since you mentioned bounce scrolling specifically, TouchScroll was just released on Tuesday.
I am looking for the same thing, JavaScript frameworks free from IE stuff..
So far
XUI
http://code.google.com/p/xui-js/
SLY
http://github.com/digitarald/sly
Coming Soon
jQuery for touch devices (not jqtouch) http://jquerymobile.com/2010/08/announcing-the-jquery-mobile-project/
http://zeptojs.com/ is all you want.
It's jQuery trimmed for webkit mobile. Excellent library with (brand new) great documentation. Handles ajax, dom selection, touch events. Does not have UI components.
Very lightweight.

Flash: Using mouse wheel events in full screen mode (Windows and Mac)

Although Flash has a mouse wheel event (MouseEvent.MOUSE_WHEEL), it comes with quite a few problems.
The first is that the event is not yet supported on the Mac. So there are a bunch of solutions, all of which (basically) capture the mousewheel (or DOMMouseScroll) event in javascript and pass it into the flash app. Luckily, under all the Mac browsers I tested, this also works when flash is in fullscreen mode.
Problem 2 is that flash ignores mouse wheel events with small "deltas". For example, Microsoft's IntelliPoint Mice with "Smooth Scroll" causes this problem. A solution to this is the same as the solution for the mac... i.e. capture the javascript mouse wheel event in the browser and pass it to the app. The issue is that of the browsers in windows that I tested (firefox, ie, safari, and chrome), they don't seem to capture this event when flash is in full screen mode. Does anyone know why or how to fix that?
I currently have a hybrid solution that always takes events from javascript (in non-fullscreen or fullscreen mode) except when it's in fullscreen mode on Windows (at which point it takes them from the flash mousewheel event). So the only times it fails is in full screen mode on Windows with a mouse that has small deltas. Anyone have a full solution? Or just a better one?
It's a know issue on adobe's JIRA. You need to wait'em to fix it, or use another event instead MouseEvent.MOUSE_WHEEL. It's not working on windows because the flash player implementation is completly different in windows from mac and linux. Mac and Linux uses GTK to implement the plugin Handle. On windows it uses a Win32API Common HWND, which steal focus on full screen mode, causing the non dispatching of scroll events on the browser. On Mac and Linux, GTK just stretch the plugin size into desktop's size, and don't do a real fullscreen. It's a GTK behavior inside these systems. Nothing can be done.
Your solution is one of the best. Only one is better - don't use mouse wheel :(
Adobe should do something with it (and with support for other controllers).
MouseEvent.MOUSE_WHEEL seems to work fine on mac since Gala beta and 10.1 final. i can trigger mouse wheel events using the magic mouse and track pad in both Safari and Chrome.
Pixelbreaker's MacMouseWheel has given me successful fullscreen scrolling on a mac, but I haven't used it in a while (on Safari 5 for example).
The downside is that it captures events for the whole page, so you will lose scrolling for the HTML even if the flash element is only a little box on the screen.
But you could basically switch between what you've built already, and what he's using in the macmousewheel.js when you've enabled full screen.
Hope that helps, good luck.
You could try using the simple AS3 class MacMouseWheelHandler at http://blog.earthbrowser.com/2009/01/simple-solution-for-mousewheel-events.html which makes it so you don't have to integrate with Javascrpt. It injects the Javascript right from Actionscript.

Categories