0

I'm building a website, in an attempt to save space on the mobile version I want to let users swipe horizontally through a few sections that contain multiple div's, like on the Facebook app. However, the content that needs swiping is within a div.

Frameworks like jQuery Mobile and JQTouch don't seem applicable because they're designed to be used as a framework.

I've tried using SwipeView, JQSwipe, as well as the jQuery mobile and jQTouch frameworks.

So, does anyone know of any stand-alone JS or jQ plugin that gives swipe functionality to div's? One's I've found so far either seem not to work or need the content organised in a different way to what I have.

Ideally, the HTML will look something like:

<div class="swipe-wrapper">
    <div class="swipe-element">content</div>
    <div class="swipe-element">contnet</div>
    <div class="swipe-element">content</div>
</div>

Very similar to how many sliders work I'd imagine.

lukeseager
  • 2,365
  • 11
  • 37
  • 57
  • Hmm, that's weird. As soon as I load up JQ Mobile on my site it hides all content and says "loading" at the bottom of the page :S – lukeseager Aug 02 '13 at 14:19
  • 1
    http://stackoverflow.com/questions/8648596/how-to-use-jquery-mobile-for-its-touch-event-support-only-no-ui-enhancements – jwatts1980 Aug 02 '13 at 14:30

1 Answers1

0

Look at adding 3 events listeners to your DIV to create your own swipe effect. ontouchstart, ontouchmove, ontouchend

Then call these function for each event above respectively....

var startTime,startPoint,endPoint

function moveStart(e){
  startTime = (new Date()).getTime()
  startPoint =  e.originalEvent.pageX   
}

function moving(e){
  endPoint =  e.originalEvent.pageX 
}

function moveEnd(e){
  var d = (new Date()).getTime()
  var secs = (d-startTime)/100
  var delta = startPoint-endPoint

      // if swipe takes longer than .2 of second and less than .6 of a second

  if(secs> 2 && secs <6){

    if(delta>30){ // swipe over at least 30px distance
        //animate the div to move right
    }else if(delta<-30){
        //animate the div to move left
    }
}   
}
alQemist
  • 362
  • 4
  • 13