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.
- You forgot to close
litags in your navbar links. - You have added
<p>tags between pages.
Use the below code to navigate using swipe events.
$(document).on('swipeleft swiperight', function (event) {
// next page
if (event.type == 'swipeleft') {
var nextPage = $.mobile.activePage.next('[data-role=page]');
if (nextPage) {
$.mobile.changePage(nextPage, {
transition: "flip" // or any transition
});
}
}
// previous page
if (event.type == 'swiperight') {
var prevPage = $.mobile.activePage.prev('[data-role=page]');
if (prevPage) {
$.mobile.changePage(prevPage, {
transition: "flip",
reverse: true // reverse effect
});
}
}
});
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.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
Solution 4:
Try including the libraries:
<link href="jquery.mobile-1.3.2.css" rel="stylesheet" />
<link href="jquery.mobile.structure-1.3.2.css" rel="stylesheet" />
<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.mobile-1.3.2.js"></script>
I hope this helps you.
I've removed the html warnings.
Html:
<div data-role="page" id="news" class="demo-page" data-prev="weather_update" data-next="business">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b">
<h1>Current Affairs</h1>
<a href='source.html' class='ui-btn-left' data-icon="home">Home</a>
<a href='#' class='ui-btn-right' data-icon='arrow-l' onclick="history.back(); return false">Back</a>
</div>
<div id="news_feed" data-role="content" data-theme="e">Loading Headlines, Please Wait</div>
<div id="tv_links" data-position="fixed" data-tap-toggle="false" data-role="footer" data-theme="b">
<div data-role="navbar">
<ul>
<li>
<a href="#business" data-role="button" data-inline="true" data-icon="info">Business News </a>
</li>
<li>
<a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>
</li>
<li>
<a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>
</li>
<li>
<a href="#interactive" data-role="button" data-inline="true" data-icon="info">Get Live </a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="business" data-prev="news" data-next="politics">
<div data-role="header" data-theme="b">
<h1>Business News</h1>
<a href='source.html' class='ui-btn-left' data-icon="home">Home</a>
<a href='#' class='ui-btn-right' data-icon='arrow-l' onclick="history.back(); return false">Back</a>
</div>
<div id="biz" data-role="content" data-theme="e">Loading Headlines, Please Wait</div>
<div id="Div1" data-position="fixed" data-role="footer" data-theme="b">
<div data-role="navbar">
<ul>
<li>
<a href="#business" data-role="button" data-inline="true" data-icon="info">Business News </a>
</li>
<li>
<a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>
</li>
<li>
<a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>
</li>
<li>
<a href="#interactive" data-role="button" data-inline="true" data-icon="info">Get Live </a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="politics" data-prev="business" data-next="sportsnews">
<div data-role="header" data-theme="b">
<h1>Politics</h1>
<a href='source.html' class='ui-btn-left' data-icon="home">Home</a>
<a href='#' class='ui-btn-right' data-icon='arrow-l' onclick="history.back(); return false">Back</a>
</div>
<div id="polit" data-role="content" data-theme="e">Loading Headlines, Please Wait</div>
<div id="Div2" data-position="fixed" data-role="footer" data-theme="b">
<div data-role="navbar">
<ul>
<li>
<a href="#business" data-role="button" data-inline="true" data-icon="info">Business News </a>
</li>
<li>
<a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>
</li>
<li>
<a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>
</li>
<li>
<a href="#interactive" data-role="button" data-inline="true" data-icon="info">Get Live </a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="sportsnews" data-prev="politics" data-next="business_news">
<div data-role="header" data-theme="b">
<h1>Sports News</h1>
<a href='source.html' class='ui-btn-left' data-icon="home">Home</a>
<a href='#' class='ui-btn-right' data-icon='arrow-l' onclick="history.back(); return false">Back</a>
</div>
<div id="sports" data-role="content" data-theme="e">Loading Headlines, Please Wait</div>
<div id="Div3" data-position="fixed" data-role="footer" data-theme="b">
<div data-role="navbar">
<ul>
<li>
<a href="#business" data-role="button" data-inline="true" data-icon="info">Business News </a>
</li>
<li>
<a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>
</li>
<li>
<a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>
</li>
<li>
<a href="#interactive" data-role="button" data-inline="true" data-icon="info">Get Live </a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="business_news" data-prev="sportsnews" data-next="weather_update">
<div data-role="header" data-theme="b">
<h1>Business News</h1>
<a href='source.html' class='ui-btn-left' data-icon="home">Home</a>
<a href='#' class='ui-btn-right' data-icon='arrow-l' onclick="history.back(); return false">Back</a>
</div>
<div data-role="content" data-theme="e">Loading Headlines, Please Wait</div>
<div id="Div4" data-position="fixed" data-role="footer" data-theme="b">
<div data-role="navbar">
<ul>
<li>
<a href="#" data-role="button" data-inline="true" data-icon="info">Business News </a>
</li>
<li>
<a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>
</li>
<li>
<a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>
</li>
<li>
<a href="#interactive" data-role="button" data-inline="true" data-icon="info">Get Live </a>
</li>
</ul>
</div>
</div>
</div>
<div id="interactive" data-role="page" data-theme="d" data-position="fixed">
<div data-role="header" data-theme="b">
<h1>Get Interactive</h1>
<a href='source.html' class='ui-btn-left' data-icon="home">Home</a>
<a href='#' class='ui-btn-right' data-icon='arrow-l' onclick="history.back(); return false">Back</a>
</div>
<div data-role="content" data-theme="e">
<div data-role="collapsible-set">
<div id="morning_show" data-role="collapsible" data-theme="d">
<h3>Morning Show</h3>
<h3> </h3>
</div>
<div data-collapsed="true" data-role="collapsible" data-theme="d">
<h3>E- News</h3>
<p> </p>
</div>
<div data-collapsed="true" data-role="collapsible" data-theme="d">
<h3>Political Programme</h3>
<p> </p>
</div>
</div>
</div>
<div id="Div5" data-position="fixed" data-role="footer" data-theme="b">
<div data-role="navbar">
<ul>
<li>
<a href="#business" data-role="button" data-inline="true" data-icon="info">Business News </a>
</li>
<li>
<a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>
</li>
<li>
<a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>
</li>
<li>
<a href="#interactive" data-role="button" data-inline="true" data-icon="info">Get Live </a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="weather_update" data-prev="weather_update" data-next="news">
<div data-role="header" data-theme="b">
<h1>Weather Update</h1>
<a href='source.html' class='ui-btn-left' data-icon="home">Home</a>
<a href='#' class='ui-btn-right' data-icon='arrow-l' onclick="history.back(); return false">Back</a>
</div>
<div id="weather" data-role="content" data-theme="e">Getting Updates, Please Wait</div>
<div id="Div6" data-position="fixed" data-role="footer" data-theme="b">
<div data-role="navbar">
<ul>
<li>
<a href="#" data-role="button" data-inline="true" data-icon="info">Business News </a>
</li>
<li>
<a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>
</li>
<li>
<a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>
</li>
<li>
<a href="#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 });
}
});
});
Post a Comment for "Swipe To Switch Page With JQUERY"