Typo3 mit jQuery, jScrollPane und iPad geht das?


Wir arbeiten immer noch an diesem Typo3 Projekt mit einem Haufen Schnickschnack. Wie schon vorher erwähnt kommt da jQuery, jScrollPane und MooTools zum Einsatz.

Weil wir in zwei Tagen einen Vor-Ort Termin beim Kunden haben, wollte ich sehen, ob wir nicht werbewirksam dem Kunden die Neuerungen auf meinem neuen iPad zeigen können. Im großen und ganzen sieht es auch sehr gut aus. Die Darstellung funktioniert besser als beim IE6 am Anfang. Ja ich muss sagen, es sieht sogar richtig ‚cool‘ aus!

Nur ein Problem existiert. Weil der Kunde so kleine Scrollbalken für die Textflächen haben wollte, ist es wirklich schwierig mit meinen Wurstfingern nach unten und oben zu ’scrollen‘. Denn, ja, jScrollPane funktioniert im iPad. Da man aber keine Maus hat,  und schon gar kein kleines Rad zum Scrollen ist die Bedienung umständlich und vor allem nicht iPad/iPhone-mäßig.

Ich habe jedoch im Internet (wie haben wir eigendlich früher arbeiten können, ohne Internet? ) eine jQuery Klasse gefunden, die für iPad und iPhone ausgelegt ist. Sie nennt sich jScrollTouch! Damit kann man mit den Fingern den verschiebbaren Text nach oben und unten ziehen. Mit dem bekannten Hui-Effekt den die iPhoneler und Steve Jobs so lieben.

Ich habe also in mein Typo3 eine Browser-Weiche eingebaut, die den iPad erkennt und dann die jScrollPane Skript-Datei mit der jScrollTouch Skript-Datei ersetzt. Zusätzlich setze ich über page.headerData eine JavaScript Variable, die als Flag dient und dafür sorgt, dass die jScrollTouch Funktionen gerufen werden statt denen von jScrollPane.

Ja, ich kann jetzt mit dem Finger den Text verschieben und hui – er fliegt rauf und runter, dass es einem iPhoneler richtig warm ums Herz wird. Nur ich habe wieder mal keine Scroll-Balken. Das hatten wir doch schon mal. Vielleicht akzeptiert der Kunde aber diesmal, nur auf dem iPad, die Webseite ohne seine dünnen, schmalen Schkrollbalge.

Keine Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert