A touch interface is quite different from mouse pointing. There is no moving cursor with clicks, just touches.

As far as you can “simulate” mouse events with a finger, just clicking is enabled. Most importantly, there’s no “mousemove” event.

If you use everytimezone.com, you will see that there’s more to it than just drag-and-drop. Actually, there is NO drag and drop implemented (for touch). It’s setting the time position to whereever you touch. For mouse movements, it will actually allow both clicking any position, or have the “classic” button down, move and button up dragging (again, anywhere on screen).

Interfaces are complicated– and a touch interface could never be implemented properly by just copying over mouse events. That just doesn’t work.

On other platforms, you’ll see what happens. For example, Nokia’s N900 browser has 3 different modes, that switch between “mouse cursor”, “text selection” and “viewport positioning”. No non-developer user will ever be able to use that browser properly, even though the engineers have tried hard to port all features.

And no, everytimezone.com is not foolproof yet…

Does Safari report the difference between zooming, single-finger sliding, and double-finger sliding? If not, Apple = super lame. But if so, tell your script to ignore double-finger sliding and zooming – maybe then those will work, along with single-finger dragging of your elements.

The real issue is that iOS Safari is a half-baked almost-browser. We shouldn’t have to write one set of code for webkit/touch, and another for every other browser. JavaScript drag-and-drop stuff that has worked since the late 1990′s should work on a properly-designed touch browser.

The solution is simple – add an icon to switch between viewport-scrolling mode (the way iOS Safari works now) and drag-and-drop mode (where touching and sliding behave like clicking and dragging with a mouse cursor on a desktop).

I’m developing and HTML5 CSS3
iPad Offline App, but I’ve got same strange issues when the application is added to the desktop.

The problem is that when you start the Web App from the icon there is no option to put startup screen instead you see a white screen.

I’ll really appreciate any help about this issue, which is I guess iPad specific.

So get off your ass, download the code and change it! It’s all self-contained in a single document so you can’t _possibly_ be too lazy to simply update it for yourself (and remove the ad in the process!).

@Thomas:

Awesome, learned some tricks, thanks for the app and the post!

The article is at:
http://blog.itstherules.co.uk/archives/241

thanks for the interesting article. Are you really sure about “translate()” not being hardware accelerated? I didn’t have the impression.

What helps is to add “translate(0, 0)” to every element that will be animated in the first place. That seems to activate compositing before the animation starts.

As we discussed, I’ve written it up in a blog post Making iPad app everytimezone.com work cross-browser.