IPad - Touch-Navigations-Problem

[pax]

Hallo an alle !

Ich entwickle gerade an einer Seite herum, die kompatibel für das IPad sein soll. Grundsätzlich hat das auch geklappt, ich habe nur ein Problem und leider gar keine Ahnung, wo ich nach einer Lösung suchen soll.

Auf dem IPad soll man per Fingerbewegeung navigieren können, also Finger nach rechts ziehen -> nächste Seite, Finger nach unten -> Menü öffnen und so weiter. Auch das von der reinen Implementierung her kein Problem. Nun macht mir das IPad bzw. der Safari darauf aber einen Strich durch die Rechnung. Sobald man den Finger in eine beliebige Richtung zieht, bewegt man damit automatisch den gesamten Browserinhalt, inklusive Background. Das macht die Navigation extrem unsauber und schwierig zu benutzen.

Meine Frage nun: Wie kann ich dieses Verhalten Serverseitig unterdrücken ? Die Bedienung per Fingerbewegungen ist doch imho eines der Grundprinzipien von diesem Gerät, da muss es doch eine Lösung geben.

Sorry, falls das eine dumme Frage sein sollte, aber ich habe zum ersten Mal so ein Teil in der Hand und überhaupt keine Ahnung.

 

[threadi]

Das Problem ist, dass bestimmte mobile Geräte wie eben das iPad keine Scrollbalken unterstützen. Daher kann man auch schwer einen Inhalt ziehen. Aber es gibt JavaScripts die so etwas ermöglichen. Schau dich mal nach jQuery iPad scroll um.

 

[pax]

Ich hab mich vermutlich umständlich ausgedrückt. Die Seite ist so designt, dass scrollen gar nicht nötig ist, sie passt komplett auf den Screen (und scaled sich automatisch kleiner wenn nötig). Ich möchte per Touchevent verschiedene Aktionen auslösen, wie z.B. das Menü öffnen. Mein Problem ist, dass sich beim Finger-über-den-Screen-ziehen der gesamte Seiteninhalt bewegt, so als würde man ein Blatt Papier auf dem Tisch mit dem Finger umherschieben. Genau das möchte ich unterdrücken können, alles soll starr sein.

 

[w7]

Eine Lösung, die für mich funktioniert hat (im Bezug auf das Scrollen) ist die folgende: Chris-Barr.com :: Scrolling a overflow:auto; element on a touch screen device

Generell kannst du Dir über folgende Seite die Touchevents erarbeiten und das Beispiel an einem iOS Safari ausprobieren (eben getan): Tracking Touch Events on the iPad « The HTML Pad
Mit einer Abfrage ob x größer als das vorherige ist weißt du dann ja ob man nach rechts gewischt hat ;)

Das was Du im Speziellen suchst ist hier implementiert: iScroll 4
Einfach runter zu "Snap and Snap to Element", ist etwa nach der Hälfte der Seite (oder Strg+F benutzen ;))

 

[pax]

Das sieht ziemlich umfangreich aus, das wars jetzt wohl mit dem langen Wochenende :-|. Wird 'ne Weile dauern, bis ich da reingefunden habe.

Vielen Dank !

 

[threadi]

Ich möchte per Touchevent verschiedene Aktionen auslösen, wie z.B. das Menü öffnen.

Wenn es nur das ist, dann löst sich das mit CSS. Aufklappmenüs funktionieren auf einem iPad ähnlich wie wenn man mit der Maus auf einem Desktop-System über das Menü fährt: per hover-Pseudoklasse kann man das Menü ein- und ausblenden.

nav {
 position: relative;
 z-index: 1;
}

nav ul {
 display: none;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 2;
}

nav:hover ul { display: block; }

Falls es das ist .. :)

 

[pax]

Ich hatte das jetzt eine Weile liegen lassen und mich nun wieder rangesetzt und die Lösung gefunden bzw. mein Versäumnis beseitigt. Für alle die beim Googeln auf diesen Artikel stoßen:

Das Swipen mit dem Finger entspricht dem Bewegen des Mauspfeils mit gedrückter Maustaste. Das impliziert Zusatzfunktionen, wie z.B. Text markieren, Bild verschieben etc. je nachdem wo der Mauspfeil (Finger) am Anfang war (und beim IPad eben das Verschieben des ganzen Bodys). Um dieses Verhalten zu unterdrücken sollte der erste Eintrag in der Funktion, die der Eventhandler aufruft

eventObjekt.preventDefault();

sein.

Nachtrag: Das ist eine jquery-Funktion.