CODEWITHSUNDEEP
jqueryipadmobileswipe
1966
1966

Reputation: 27

html Jquery Mobile page Swipe

Can anyone put me in the right direction, got 3 pages on a website, and incorporating the swipe elements from JQuery mobile, for iPad use I have succeeded in swiping from the first page (introduction) to next page (Overview) and back..but cannot swipe further into the site to page three (Properties) from (Overview page) swipeleft...heres my code:

First page...

<script type="text/javascript">
$(function () {
        $("body").live('swiperight', function (event, ui) {
            $.mobile.changePage("introduction.html", "slide");
        });

        $("body").live('swipeleft', function (event, ui) {
            $.mobile.changePage("overview.html", "slide");
        });
    });
</script>

Second page...

<script type="text/javascript">
$(function () {
        $("body").live('swiperight', function (event, ui) {
            $.mobile.changePage("introduction.html", "slide");
        });

        $("body").live('swipeleft', function (event, ui) {
            $.mobile.changePage("properties.html", "slide");
        });
    });
</script>

Upvotes: 0

Views: 470

Answers (1)

Mark Su
Mark Su

Reputation: 39

when you use changePage, jQuery mobile does not send you to a new page. It will only grab the portion (in your case it is body) of the new page and load into the current page.

So after the first swipe, the second page is load but all the parameters is still from the first page. Further swipe is like trying to load the second page which is loaded already....no further action.

What you can do, for example, wrap each of your page content with a unique id <div id="firstpage">...</div> in your javascript, change it to:

$("#firstpage").live('swiperight', function (event, ui) {
        $.mobile.changePage("introduction.html", "slide");
    });

Upvotes: 1

Related Questions