HTML5/CSS3: Multitouch - Zoom (Pinch)

[Tomtom]

Hi,

Nach einer endlosen Suche fand ich immer noch kein Beispiel oder Manual für dieses Problem:
Wie können einzelne Objekte unter iOS/Webkit auf Multitouch-Geräten "zoombar" während andere Objekte derselben Page ihre Größe nicht ändern.

Also 2 Anwendungsfälle:
1. Hintergrundbild zoombar, während Objekte im Vordergrund, z.B. Navigationsleiste usw., konstant bleiben - und nicht relativ (zum Hintergrundbild) wachsen oder schrumpfen.
2. der Inhalt in einem DIV kann herangezoomt werden während ein anderer DIV unverändert bleibt.

Auch die zahlreichen jquery-plugins und Infos zu "pinch", multitouch, zoom für webkit hab ich bereits vergeblich durchforstet.

Kennt hier jemand eine Website, die mit einem solchen "Feature" ausgestattet ist oder einen Tipp, wie sich das bewerkstelligen lässt.

Das zoomen mit zoom-in/out Buttons ist natürlich kein Problem. Es geht ausschließlich um die pinch-Funktion bei multitouch Geräten.

Beste Grüße
Tomtom

[molily]

Hallo,

du registrierst (am besten dokumentweit) Event-Handler für Gesten (gesturestart, gesturechange, gestureend) und reagierst darauf, indem du ein Element mit CSS-Transformationen belegst:

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html > Handling Gesture Events, eventobjekt.rotation und eventobjekt.scale
http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Transforms/Transforms.html > rotate und scale

Siehe auch
http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

Mathias

[sho]

Hallo Tomtom,

2. der Inhalt in einem DIV kann herangezoomt werden während ein anderer DIV unverändert bleibt.

dazu fiele mir spontan ein, dass Du per click auf das Element eine CSS-klasse mit Eigenschaft scale zuweisen könntest. Etwa

  
$('#dasdiv').bind('touchstart', function (){  
 $(this).addClass('zoomed');  
});  

  
.zoomed{  
  -moz-transform:scale(2.0,2.0);  
  -webkit-transform:scale(2.0,2.0);  
  -o-transform:scale(2.0,2.0);  
  transform:scale(2.0,2.0);  
}  

und danach entsprechend die klasse wieder entfernen bzw. mit toggleClass arbeiten... (?)

VG

[suit]

$('#dasdiv').bind('touchstart', function (){

und danach entsprechend die klasse wieder entfernen bzw. mit toggleClass arbeiten... (?)

'touchstart' ist _nicht_ das click-Event. touchstart, touchmove und touchend werden je nach Gerät vor oder nach dem eigentlichen click-Event ausgeführt.

Da muss man aufpassen - auf Opera Mobile und dem Android-Browser kommt click nach touchend, auf dem iOS-Safari hingegen kommt es unmittelbar nach touchstart und noch vor touchmove.

[sho]

$('#dasdiv').bind('touchstart', function (){

und danach entsprechend die klasse wieder entfernen bzw. mit toggleClass arbeiten... (?)

'touchstart' ist _nicht_ das click-Event. touchstart, touchmove und touchend werden je nach Gerät vor oder nach dem eigentlichen click-Event ausgeführt.

mohoin suit,
ich lese leider erst jetzt noch deine antwort: ich teste noch nicht so lang auf mobiles, aber habe zB einen testcode, der die genannten events auf android, playbook, ipad, iphone entprechend anzeigt. das heißt, ich "tippe", dann wird die function für touchstart ausgeführt und ebenso für touchmove und touchend.
bisher hatte ich zum glück keine schwierigkeiten, wenn ich für buttons "touchstart" als eventhandler angegeben habe. ich vermute, dass es in dem einfachen fall ja auch """egal""" ist, hauptsache das touchstart wird ausgeführt und wird erst bei gestures richtig haarig..oder? oder würdest du dann für android ein "ontouchend" als event für einen einfachen button definieren? das habe ich nicht ganz verstanden:

Da muss man aufpassen - auf Opera Mobile und dem Android-Browser kommt click nach touchend, auf dem iOS-Safari hingegen kommt es unmittelbar nach touchstart und noch vor touchmove.

"kommt click nach touchend"..aber ich habe doch für die mobiles keine "clicks", sondern eben touchevents definiert.

ich freu mich über ein feedback,
danke, s.

[suit]

"kommt click nach touchend"..aber ich habe doch für die mobiles keine "clicks", sondern eben touchevents definiert.

Ham aber aber diese "touchkette" ist klein klick,

Klick mal bitte mit der Maus auf deinem Desktop-Rechner auf den Submitbutton eines Formulares, halte dann die Maustaste gedrückt, zieh den Cursor runter vom Button und lasse ihn dann los.

Und dann machst du dasselbe auf deinem Mobilgerät - drauftippen, wegziehen und loslassen.

Und dann vergleiche das ganze mit einem tatsächlichen Klick auf ein Klick, wenn du klickst und gleich am Button wieder loslässt.

Problematisch bei der Sache ist eben, wenn du etwas einem Touch-Event ausführst, kann es schon sein, dass der Benutzter eigentlich nur scrollen wollte (das macht man auch mit Finger drauf und schieben) und dabei zufällig einen Button/Link erwischt (oder auf diesem stehen bleibt, oder ihn überfährt) und dann wird eine Aktion ausgelöst.

Darum: Wenn du auf einen Klick reagieren willst, nimm das click-Event :)

[suit]

"kommt click nach touchend"..aber ich habe doch für die mobiles keine "clicks", sondern eben touchevents definiert.

Ham aber aber diese "touchkette" ist klein klick,

Was war das :)

Ich meinte "Aber diese 'touchkette' ist eben kein 'Klick'" :)

[sho]

Ham aber aber diese "touchkette" ist klein klick,

Was war das :)

Ich meinte "Aber diese 'touchkette' ist eben kein 'Klick'" :)

joa hatte ich schon so rausgelesen :-) ja..vielen dank noch mal für die erläuterung, soo genau hatte ich das bisher nicht durchgedacht, sondern wirklich immer "tochstart" statt "click" genommen, obwohl ja auch "click" (jquery) gut funktioniert auf dem ipad zB.. muss ich mir wohl noch mal genauer ansehen die events!