Wordpress:Swipe im Browser

Dipl.-Ök. Joerg Niemannim Rahmen des 3. WP-Blogger Rhein-Ruhr

Übersicht

➲ Was?

Touch-Steuerung / Swipe im Browser

➲ Wo?

Artikel in Wordpress Siehe WordPress Theme iYoko 0.1 – Swipe-Demo

➲ Wie?

Javascript

➲ Umsetzung

http://www.PadLive.de/ (nur via iOS-Device)

➲ Was jetzt?

Wohttp://padlive.de/

WieJavascript & AJAX

Webserver

Artikel B Artikel CArtikel A

Umsetzung

Javascript (I)• jQuery(document).ready(function($) {

if (navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod') {

jQuery("#swipeBox").show(); }; });

<div id="swipeBox" align="center" ontouchstart="touchStart(event,'swipeBox');" ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);"><div style="float:left;"><img style="float:left;" src="arrow-3D-green-left.jpg" /></div>

<div class="swipeText">Swipe here!</div><div style="float:right;"><img style="float:right;" src="arrow-3D-green-right.jpg" /></div>

</div>

Javascript (II)• <script src="padilicious.js" type="text/javascript"></script>

function processingRoutine() { var swipedElement = document.getElementById(triggerElementID); if ( swipeDirection == 'left' ) { getAdjacentLink('','next'); if(ajaxLink) window.document.location = ajaxLink; } else if ( swipeDirection == 'right' ) { getAdjacentLink('','prev'); if(ajaxLink) window.document.location = ajaxLink; } else if ( swipeDirection == 'up' ) {

... } else if ( swipeDirection == 'down' ) {

... } }