New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/dragend-touch-ready-full-responsive-content-swipe-script/
Dragend - touch ready, full responsive, content swipe script
Download Demo
More Demos
Simple demo
jQuery and content scribe demo
Responsive demo
Yahoo weather app like page swiping demo
Demo with navigation buttons and a page overview
Demo with infinit swiping through pages
Mobile demo
dragend JS is a touch ready, full responsive, content swipe script. It’s open source and it has no dependencies but you can use hammer.js for crossbrowser support of touch gestures. It also can, but don’t has to, used as a jQuery plugin
Features
horizontal and vertical swiping
mobile and desktop ready
lightweight
keyboard navigation
fullscreen or boxed
contend scribe
resize adjustment
overscroll
full responsive
Browser Support
Firefox 3.5+
Chrome 4+
IE 8+ (8 and 9 need hammer JS and jQuery)
Safari 4+
Safari on iOS 5+
Android 2+
1. INCLUDE JS FILES
<script type="text/javascript" src="../lib/jquery.min.js"></script> <script type="text/javascript" src="../../dragend.js"></script>
2. HTML
<div id="demo"> <ul> <li class="first dragend-page"></li> <li class="dragend-page"></li> <li class="middle dragend-page"></li> <li class="dragend-page"></li> <li class="last dragend-page"></li> </ul> </div>
3. JAVASCRIPT
$("#demo").dragend();
4. OPTIONS
pageClass: classname selector for all elments that should provide a page
direction: “horizontal” or “vertical”
minDragDistance: minuimum distance (in pixel) the user has to drag to trigger swip
scribe: pixel value for a possible scribe
onSwipeStart: callback function before the animation
onSwipeEnd: callback function after the animation
onDrag: callback on drag
onDragEnd: callback on dragend
afterInitialize:
borderBetweenPages: if you need space between pages add a pixel value
duration
hammerSettings
preventDrag: if want to prevent user interactions and only swipe manualy
5. DESTROY
Call the destroy method to unbind the events and reset the styles
var instance = new Dragend(); instance.destroy();