Swipe To Switch Page With Jquery

I was searching on stackoverflow to find code to swipe between my app and I found the below jquery code. From the answers I read that it works fine, but when I put it on my page, i

Solution 1:

You have some mistakes in your code above, that's why its not working.

1. You forgot to close li tags in your navbar links.
2. You have added <p> tags between pages.

Use the below code to navigate using swipe events.

$(document).on('swipeleft swiperight', function (event) {
    // next pageif (event.type == 'swipeleft') {
        var nextPage = $.mobile.activePage.next('[data-role=page]');
        if (nextPage) {
            $.mobile.changePage(nextPage, {
                transition: "flip"// or any transition
            });
        }
    }
    // previous pageif (event.type == 'swiperight') {
        var prevPage = $.mobile.activePage.prev('[data-role=page]');
        if (prevPage) {
            $.mobile.changePage(prevPage, {
                transition: "flip",
                reverse: true// reverse effect
            });
        }
    }
});

Demo

Solution 2:

You are missing the close tags for your <li>s, for example, this:

<li>
  <a href="#business"data-role="button"data-inline="true"data-icon="info">Business News </a>

should be this:

<li>
  <a href="#business"data-role="button"data-inline="true"data-icon="info">Business News </a>
</li>

Solution 3:

As the code use jquery mobile, You have to add these scripts on the page.

<linkrel="stylesheet"href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /><scriptsrc="http://code.jquery.com/jquery-1.9.1.min.js"></script><scriptsrc="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

Solution 4:

Try including the libraries:

<linkhref="jquery.mobile-1.3.2.css"rel="stylesheet" /><linkhref="jquery.mobile.structure-1.3.2.css"rel="stylesheet" /><scriptsrc="jquery-1.9.1.min.js"></script><scriptsrc="jquery.mobile-1.3.2.js"></script>

I hope this helps you.

I've removed the html warnings.

Html:

<divdata-role="page"id="news"class="demo-page"data-prev="weather_update"data-next="business"><divdata-role="header"data-position="fixed"data-tap-toggle="false"data-theme="b"><h1>Current Affairs</h1><ahref='source.html'class='ui-btn-left'data-icon="home">Home</a><ahref='#'class='ui-btn-right'data-icon='arrow-l'onclick="history.back(); return false">Back</a></div><divid="news_feed"data-role="content"data-theme="e">Loading Headlines, Please Wait</div><divid="tv_links"data-position="fixed"data-tap-toggle="false"data-role="footer"data-theme="b"><divdata-role="navbar"><ul><li><ahref="#business"data-role="button"data-inline="true"data-icon="info">Business News </a></li><li><ahref="#sportsnews"data-role="button"data-inline="true"data-icon="info">Sports News </a></li><li><ahref="#weather_update"data-role="button"data-inline="true"data-icon="info">Weather </a></li><li><ahref="#interactive"data-role="button"data-inline="true"data-icon="info">Get Live </a></li></ul></div></div></div><divdata-role="page"id="business"data-prev="news"data-next="politics"><divdata-role="header"data-theme="b"><h1>Business News</h1><ahref='source.html'class='ui-btn-left'data-icon="home">Home</a><ahref='#'class='ui-btn-right'data-icon='arrow-l'onclick="history.back(); return false">Back</a></div><divid="biz"data-role="content"data-theme="e">Loading Headlines, Please Wait</div><divid="Div1"data-position="fixed"data-role="footer"data-theme="b"><divdata-role="navbar"><ul><li><ahref="#business"data-role="button"data-inline="true"data-icon="info">Business News </a></li><li><ahref="#sportsnews"data-role="button"data-inline="true"data-icon="info">Sports News </a></li><li><ahref="#weather_update"data-role="button"data-inline="true"data-icon="info">Weather </a></li><li><ahref="#interactive"data-role="button"data-inline="true"data-icon="info">Get Live </a></li></ul></div></div></div><divdata-role="page"id="politics"data-prev="business"data-next="sportsnews"><divdata-role="header"data-theme="b"><h1>Politics</h1><ahref='source.html'class='ui-btn-left'data-icon="home">Home</a><ahref='#'class='ui-btn-right'data-icon='arrow-l'onclick="history.back(); return false">Back</a></div><divid="polit"data-role="content"data-theme="e">Loading Headlines, Please Wait</div><divid="Div2"data-position="fixed"data-role="footer"data-theme="b"><divdata-role="navbar"><ul><li><ahref="#business"data-role="button"data-inline="true"data-icon="info">Business News </a></li><li><ahref="#sportsnews"data-role="button"data-inline="true"data-icon="info">Sports News </a></li><li><ahref="#weather_update"data-role="button"data-inline="true"data-icon="info">Weather </a></li><li><ahref="#interactive"data-role="button"data-inline="true"data-icon="info">Get Live </a></li></ul></div></div></div><divdata-role="page"id="sportsnews"data-prev="politics"data-next="business_news"><divdata-role="header"data-theme="b"><h1>Sports News</h1><ahref='source.html'class='ui-btn-left'data-icon="home">Home</a><ahref='#'class='ui-btn-right'data-icon='arrow-l'onclick="history.back(); return false">Back</a></div><divid="sports"data-role="content"data-theme="e">Loading Headlines, Please Wait</div><divid="Div3"data-position="fixed"data-role="footer"data-theme="b"><divdata-role="navbar"><ul><li><ahref="#business"data-role="button"data-inline="true"data-icon="info">Business News </a></li><li><ahref="#sportsnews"data-role="button"data-inline="true"data-icon="info">Sports News </a></li><li><ahref="#weather_update"data-role="button"data-inline="true"data-icon="info">Weather </a></li><li><ahref="#interactive"data-role="button"data-inline="true"data-icon="info">Get Live </a></li></ul></div></div></div><divdata-role="page"id="business_news"data-prev="sportsnews"data-next="weather_update"><divdata-role="header"data-theme="b"><h1>Business News</h1><ahref='source.html'class='ui-btn-left'data-icon="home">Home</a><ahref='#'class='ui-btn-right'data-icon='arrow-l'onclick="history.back(); return false">Back</a></div><divdata-role="content"data-theme="e">Loading Headlines, Please Wait</div><divid="Div4"data-position="fixed"data-role="footer"data-theme="b"><divdata-role="navbar"><ul><li><ahref="#"data-role="button"data-inline="true"data-icon="info">Business News </a></li><li><ahref="#sportsnews"data-role="button"data-inline="true"data-icon="info">Sports News </a></li><li><ahref="#weather_update"data-role="button"data-inline="true"data-icon="info">Weather </a></li><li><ahref="#interactive"data-role="button"data-inline="true"data-icon="info">Get Live </a></li></ul></div></div></div><divid="interactive"data-role="page"data-theme="d"data-position="fixed"><divdata-role="header"data-theme="b"><h1>Get Interactive</h1><ahref='source.html'class='ui-btn-left'data-icon="home">Home</a><ahref='#'class='ui-btn-right'data-icon='arrow-l'onclick="history.back(); return false">Back</a></div><divdata-role="content"data-theme="e"><divdata-role="collapsible-set"><divid="morning_show"data-role="collapsible"data-theme="d"><h3>Morning Show</h3><h3>&nbsp;</h3></div><divdata-collapsed="true"data-role="collapsible"data-theme="d"><h3>E- News</h3><p>&nbsp;</p></div><divdata-collapsed="true"data-role="collapsible"data-theme="d"><h3>Political Programme</h3><p>&nbsp;</p></div></div></div><divid="Div5"data-position="fixed"data-role="footer"data-theme="b"><divdata-role="navbar"><ul><li><ahref="#business"data-role="button"data-inline="true"data-icon="info">Business News </a></li><li><ahref="#sportsnews"data-role="button"data-inline="true"data-icon="info">Sports News </a></li><li><ahref="#weather_update"data-role="button"data-inline="true"data-icon="info">Weather </a></li><li><ahref="#interactive"data-role="button"data-inline="true"data-icon="info">Get Live </a></li></ul></div></div></div><divdata-role="page"id="weather_update"data-prev="weather_update"data-next="news"><divdata-role="header"data-theme="b"><h1>Weather Update</h1><ahref='source.html'class='ui-btn-left'data-icon="home">Home</a><ahref='#'class='ui-btn-right'data-icon='arrow-l'onclick="history.back(); return false">Back</a></div><divid="weather"data-role="content"data-theme="e">Getting Updates, Please Wait</div><divid="Div6"data-position="fixed"data-role="footer"data-theme="b"><divdata-role="navbar"><ul><li><ahref="#"data-role="button"data-inline="true"data-icon="info">Business News </a></li><li><ahref="#sportsnews"data-role="button"data-inline="true"data-icon="info">Sports News </a></li><li><ahref="#weather_update"data-role="button"data-inline="true"data-icon="info">Weather </a></li><li><ahref="#interactive"data-role="button"data-inline="true"data-icon="info">Get Live </a></li></ul></div></div></div>

change your script:

$(document).on("pageinit", "[data-role='page']", function () {
        var page = "#" + $(this).attr("id");

    $(document).on("swipeleft", page, function () {
        next = $(this).jqmData("next");
        console.log(next);
        if (next) {
            $.mobile.changePage("#" + next, { transition: "slide" });
        }
    });

    $(document).on("swiperight", page, function () {
        prev = $(this).jqmData("prev");
        if (prev) {
            $.mobile.changePage("#" + prev, { transition: "slide", reverse: true });
        }
    });
});