Swipe gestures on HTML5 captivate project

[dh061074]

Morning all,

I am trying to introduce swipe gestures for my HTML5 captivate project for iPad users to navigate to next/previous slides..

I am using the jquery.touchSwipe.min.js script and it seems to be very close to working, I am just however falling short at the final hurdle.

in the dev console of the browser we can see that the swipe is actually being recognised.

console.log("You swiped " + direction );

this shows the response You swiped Left, or You Swiped right but Ive not been able to navigate to previous or next slide.

After the swipe is detected there is a statement that should move forwards or back, but Ive not got it to work.

#si3665 is the ID that the captivate code assigns the 'next' button. SO the theory is, that when a swipe to the right is detected, execute the click to progress to the next slide.

if( direction === 'right'){
                                          // swipe right - go next
                                          $( '#si3665' ).trigger("click");
                      } else {
                                          // swipe left - go prev
                                          $( '#si8787' ).trigger("click");
                      }

Does anyone have an idea what I am doing wrong here?

Here is the script in full that goes into our HTML page

 <!-- Detect a swipe gesture to move to next and previous slides  -->
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>
<script type='text/javascript'>
 $(function() {      
      //Enable swiping...
      $("#div_Slide").swipe( {
        //Generic swipe handler for all directions
        swipe:function(event, direction, distance, duration, fingerCount) {
                      console.log("You swiped " + direction );  
                      if( direction === 'right'){
                                          // swipe right - go next
                                          $( '#si3665' ).trigger("click");
                      } else {
                                          // swipe left - go prev
                                          $( '#si8787' ).trigger("click");
                      }
        },
        //Default is 75px, set to 0 for demo so any distance triggers swipe
         threshold:0
      });
    });
</script>

Thanks very much for your help

[Jim Leichliter]

Instead of trying to trigger the "click" action of the "Next" button, could you just execute the javascript necessary to move to the next slide?

cpCmndNextSlide = 1;

[dh061074]

Thanks Jim for your response. I have tried using that but as yet havent managed to get it working.

I shall keep trying, I am sure that there is a way!!

** EDIT **

I was trying to over complicate things!

SImply using :

  if( direction === 'right'){
                                          // swipe right - go next
                                          cpCmndNextSlide = 1;
                      } else {
                                          // swipe left - go prev
                                          cpCmndPrevious = 1;
                      }

and it appears to work perfectly in chrome simulatigng a swipe using the mouse. However in Safari on the iPad funny things are happening and it isnt quite working as it should be.

[mileyen]

Hi, were you able to get the finger swipe to work?  I've combed the internet to see examples of captivate 7 projects and touch technology, and have not been able to find good ones.

Happy developing.

S

[dt4pt]

On my project I've noticed that the Table of Contents can be activated by swipe, could there be a clash?

[Guest]

Hi

Did you get this working? I'm trying to achieve the same. Have a call to the JS file in the Index.html and am using the script above - but to no avail.

Best

Jo