Tuesday, December 3, 2013

Responsive web design--sliding and swiping through pages on iphone and ipad using swipejs JavaScript library



In responsive web design, you may need to move the content with your fingers in mobile phones.
SwipeJs is a JavaScript library for touch-enabled mobile slider, which can be downloaded from:
https://github.com/bradbirdsall/Swipe/
The company website:
 http://swipejs.com/
My demo:
http://www.jiansenlu.zoka.cc/swipemaster/

To use this code,  jquery library and swipe.js are called.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='swipe.js'></script>

swipe.js uses touch events for mobile instead of mouseclick in desktop.

Apples event object for touch events

The event object contains the following arrays:
  • touches - contains touch information upon touchStart and touchMove not touchEnd events
  • targetTouches - contains information for touches originating from the same target element
  • changedTouches - contains touch information upon all touch events
 Reference:
 http://www.javascriptkit.com/javatutors/touchevents.shtml

We can detect a swipe (left, right, top or down) using event.touch:
http://www.javascriptkit.com/javatutors/touchevents2.shtml

There are several other JavaScript libraries related to swipe feature in mobile phone:
1. http://swipeplanes-jquery.blogspot.com/
2. http://cubiq.org/iscroll-4/
3. dragend JS is another good option.
http://stereobit.github.io/dragend/
4. http://www.jqtouch.com/
5. SwipeView
works both for desktop and tablet/mobile


No comments:

Post a Comment