WebDesign – JQuery Swipe

Add Finger-Swipe Support to Webpages.

One of the more interesting and fun aspects of iPad usage is the ability to effect change in a webpage by a swipe or swiping a finger across the screen of the iPad. For example, swiping to the left to navigate to the next page in a series of pages, or swiping to display the next image in a series of images. For iPad users, these actions are intuitive and natural.

However, for those who compose webpages, adding touch detection to a page can be a challenging and difficult process. No more. The information presented on these pages will make it easy to add touch sensing to your pages, requiring only a minimum of JavaScript coding on your part.

Add the JavaScript Script

The first step in implementing swipe support for specific page elements is to copy and add this script to the HEAD section of the webpage. Copy the entire script, including opening and closing <script> tags, and paste it into the webpage code after the title tag, but within the head section:

Tag the Page Element

Once you’ve added the script to the head section, you need to add some parameters to the tag declaration of the page element you want to respond to swipe events, for example, a <div> page Element.

<!--START-LogoArea--><headerid="top"><divid="logo"><h2>StudioPieters˙</h2></div></header><!--START-LogoArea--><!--START-SlideArea--><divclass='pageblock'id='fullscreen'><divclass='slider'><!--START-TheFirstSlide--><divclass='slide'id="first"><!--ChangetheIDtoFirts,second,thirth,fourth......asyouaddmoreyou'll need to add it also to custom.js --><divclass='slidecontent'><!--START-AddYourcontentcodehere--><p>ResponsiveDesignandthesliderworksperfectlyfineonmobiledevices,tabletsetc.</p><!--Addaheadingtext--><h1>Slideone.</h1><!--AddYourcontentcodehere-STOP--></div></div><!--TheSecondSlide-STOP--><!--START-TheSecondSlide--><divclass='slide'id="second"><!--ChangetheIDtoFirts,second,thirth,fourth......asyouaddmoreyou'll need to add it also to custom.js --><divclass='slidecontent'><!--START-AddYourcontentcodehere--><p>YouNeedsomeKnowledgeofPHP,HTML5orCSS3.</p><!--Addaheadingtext--><h1>Slidetwo.</h1><!--AddYourcontentcodehere-STOP--></div></div><!--TheSecondSlide-STOP--><!--START-TheThirthSlide--><divclass='slide'id="thirth"><!--ChangetheIDtoFirts,second,thirth,fourth......asyouaddmoreyou'll need to add it also to Settings.js --><divclass='slidecontent'><!--START-AddYourcontentcodehere--><p>Creatinganewsliderissimple–addyourimage,addyourslideandthescriptwilldotherest.</p><!--Addaheadingtext--><h1>SlideThree.</h1><!--AddYourcontentcodehere-STOP--></div></div><!--TheThirthSlide-STOP--></div></div><!--SlideArea-STOP-->AddYourcontentCodebetweenthetag’s<!–START–AddYourcontentcodehere–>and<!–AddYourcontentcodehere–STOP–>.<!--START-AddYourcontentcodehere--><p>YouNeedsomeKnowledgeofPHP,HTML5orCSS3.</p><!--Addaheadingtext--><h1>Slidetwo.</h1><!--AddYourcontentcodehere-STOP-->

Do you have any questions? Leave a comment down below!

Donate

Since October 2015, StudioPieters® has been writing this blog. Help accelerate its development with a small contribution! StudioPieters® is open source, and 100% free . Please consider donating to StudioPieters® before starting the fun of building and learning. StudioPieters® is a non-profit organisation devoted to making creative use of electronics accessible to everyone.