0

I am working on a website (in HTML5, CSS3 and JS) which'll primarily be opened only in iPad.

I want to implement swipe movements which would redirect the current page to some other page.

I managed to implement this through padilicious with the following JS:-

if ( swipeDirection == 'left' ) {
    window.location.href = 'other.html';
}

This works but the animation is not present; on swipe, the new page just loads. I am hoping that when I swipe the old page, it moves with my finger before a new page slides (or loads) in.

any assistance?

Thanks.

Steve
  • 2,546
  • 8
  • 49
  • 94
  • The kind of functionality you want is at the application level, and so you will not be able to achieve it through your current approach (opening a new page). You can instead achieve this effect in a single page via html5 or javascript – bengoesboom Sep 17 '13 at 19:22
  • you could also try http://eightmedia.github.io/hammer.js -- hammer.js its got quite a powerful library – legendary_rob Sep 17 '13 at 20:26

1 Answers1

2

To do this you would need all pages on one HTML document and then place each 'page' within a div. This way when you swipe it will animate a page curl effect display the div beneath it. You can not animate this otherwise because you can not begin displaying a page that isn't loaded etc.

Here is a DEMO http://www.jqueryrain.com/?9yQO5MGv

<div id="exemple1">
    <div><img src="img/img1.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img/img1.jpg" style="margin-left: -250px;" /></div>
    <div><img src="img/img2.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img/img2.jpg" style="margin-left: -250px;" /></div>
    <div><img src="img/img3.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img/img3.jpg" style="margin-left: -250px;" /></div>
    <div><img src="img/img4.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img/img4.jpg" style="margin-left: -250px;" /></div>
    <div><img src="img/img5.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img/img5.jpg" style="margin-left: -250px;" /></div>
    <div><img src="img/img6.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img/img6.jpg" style="margin-left: -250px;" /></div>
</div>
<div>
    <a href="#" onclick="$('#exemple1').trigger('previous'); return false;">Previous</a>
     - 
    <a href="#" onclick="javascript:$('#exemple1').trigger('next'); return false;">Next</a>
</div>

<script>
    $('#exemple1').flippage({
        width: 500,
        height: 333
    });
</script>

You would replace the img with your page content and assigne the margin style to the inner div.

Kevin Lynch
  • 24,427
  • 3
  • 36
  • 37