Swipe div left and right in webpage

Question

I am developing a webpage which has six items. I am trying to add a swipe event to the website using PADILICIOUS, but it's not working. Can anyone with experience with PADLICIOUS help me enable swiping the s left and right?

Answer 1

1. Save this script: http://padilicious.com/code/touchevents/swipesensejs.html. You'll have to save the text and rename it something like "swipesense.js".

2. Include the script on your page. Something like this:

   <script src="/path/to/swipesense.js" type="text/javascript"></script>
   

3. Include four event handlers in the tag in the DOM element you want to handle the touch events. I have a div called "wrapper" directly inside my body tag. Here's what that tag looks like:

   <div id="wrapper"
       ontouchstart="touchStart(event,'wrapper');"
       ontouchend="touchEnd(event);"
       ontouchmove="touchMove(event);"
       ontouchcancel="touchCancel(event);>
   
   .... wrapper contents here ....
   
   </div>
   

4. There's a function called "processingRoutine()" within swipesense.js. Inside that function it's pretty clearly laid out where you should insert code for each type of touch event.

I moved processingRoutine() out of swipesense.js because it seemed more natural to me to have it integrated into the other JS that I would make more frequent edits to. I also renamed it "processSwipe()" - but anything less generic than "processingRoutine()" will work. Of course I had to change the one reference to it in swipesense.js as well.

I hope that covers it for you. It works like a charm for me.