I'm using the code given in this answer to swipe several pages in my Phonegap application.
However, it seems that the live function is deprecated and furthermore, a "0" appears below the page when I try to reload. As I try more, a string of zeroes is created, the number of each telling the number of reloads of that page.
Long story short: swiping works but a 0 appears in each load of the swiped page.
I tried to change to this but doesn't seem to work (I'm using Phonegap 2.1.0, jQuery 1.8.2 and jQuery Mobile 1.1.1).
<script type="text/javascript">
$('div.ui-page').on("swipeleft", function () {
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, {
transition: "slide",
reverse: false
}, true, true);
}
});
$('div.ui-page').on("swiperight", function () {
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {
transition: "slide",
reverse: true
}, true, true);
}
});
</script>
Edit: I tried with this and the same as the initial problem happens:
<script type="text/javascript">
$(document).delegate('div.ui-page', 'swipeleft', function () {
var nextpage = $(this).nexy('div[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, {
transition: "slide",
reverse: false
}, true, true);
}
});
$(document).delegate('div.ui-page', 'swiperight', function () {
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {
transition: "slide",
reverse: false
}, true, true);
}
});
</script>
That version of on is equivalent to bind. To replace live you need
$(document).on("swipeleft", "div.ui-page", function...
To further debug the event, check what $(this) refers to - it may not be the page you think it is, and may not have a next / previous element.
It depends a certain amount on how your app is set up, but in general you can't rely on the page divs existing in any particular order.
Also, the call to changePage doesn't appear to match the current documentation (
http://jquerymobile.com/test/docs/api/methods.html ) - what are the two trues at the end?
I don't know if answering my own question is of good etiquetter, but i found the solution and I think it'd be handy being visible.
I updated to jQuery 1.8.2 and jQuery mobile 1.2.0 and everything worked. An example that works is here:
<!DOCTYPE HTML>
<html>
<head>
<title>EventApp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/css/jquery.mobile.structure-1.2.0.min.css" />
<script type="text/javascript" charset="utf-8" src="js/core/cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('div.ui-page').live("swipeleft", function () {
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, {
transition: "slide",
reverse: false
});
}
});
$('div.ui-page').live("swiperight", function () {
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {
transition: "slide",
reverse: true
});
}
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2 class="ui-title">Page one</h2>
</div>
<div data-role="content">
You are in page one.
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Info</li>
<li>Settings</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
<div data-role="page">
<div data-role="header">
<h2 class="ui-title">Page two</h2>
</div>
<div data-role="content">
You are in page two.
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Info</li>
<li>Settings</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
<div data-role="page">
<div data-role="header">
<h2 class="ui-title">Page three</h2>
</div>
<div data-role="content">
You are in page three.
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Info</li>
<li>Settings</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
<div data-role="page">
<div data-role="header">
<h2 class="ui-title">The map</h2>
</div>
<div data-role="content">
<div id="map_canvas"></div>
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Info</li>
<li>Settings</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
</body>
And if you want the JsFiddle is here
Related
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mobile Application Development - The Influence of Touch and Gestures</title>
<script>
$(document).on("pagebeforeshow", ".assignment", function() {
$(document).on("swipeleft swiperight", ".assignment", function(e) {
if ($(".ui-page-active").jqmData("panel") !== "open") {
if (e.type === "swipeleft") {
$("#right-panel").panel("open");
} else if (e.type === "swiperight") {
$("#menu").panel("open");
}
}
});
});
</script>
</head>
<body>
<!-- Start of Home page -->
<div data-role="page" id="home" data-title="Home" class="assignment">
<div data-role="header" data-add-back-btn="true" class="ui-button-right" data-add-back-btn="true">
<h1>Mobile Application Development</h1>
</div>
<div data-role="content">
<h3>The Influence of Touch and Gestures on Mobile Device Usability</h3>
<p>Below is some of the functionality that is possible with jQuery and how it can be used.</p>
Section #1
</div>
<!-- Overlay Menu -->
<div data-role="panel" id="menu" data-display="overlay" data-position="left">
<div data-role="header">
<h2>Menu</h2>
</div>
<div data-role="content">
Section #1
</div>
</div>
<!-- End of Menu -->
<div data-role="footer" id="footer">
<p class="footerText">Ben Saunders</p>
</div>
</div>
<!-- End of Page -->
<!-- Start of Home page -->
<div data-role="page" id="section1" data-title="Home" class="assignment">
<div data-role="header" data-add-back-btn="true" class="ui-button-right" data-add-back-btn="true">
<h1>Section 1</h1>
</div>
<div data-role="content">
</div>
<!-- Overlay Menu -->
<div data-role="panel" id="menu" data-display="overlay" data-position="left">
<div data-role="header">
<h2>Menu</h2>
</div>
<div data-role="content">
Section #1
</div>
</div>
<!-- End of Menu -->
<div data-role="footer" id="footer">
<p class="footerText">Ben Saunders</p>
</div>
</div>
<!-- End of Page -->
</body>
</html>
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Using this code,
$( document ).on( "pagecreate", ".assignment", function() {
$( document ).on( "swipeleft swiperight", ".assignment", function( e ) {
if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" ) {
if ( e.type === "swipeleft" ) {
$( "#right-panel" ).panel( "open" );
} else if ( e.type === "swiperight" ) {
$( "#menu" ).panel( "open" );
}
}
});
});
I am trying to use this for swipe menus in a jQuery all in one html page, small applications, but when I change to another page, the swipe animation to bring up the menu no longer works.
I have a feeling it could be the jQuery event but am not entirely lied up on the subject.
Any help would be greatly appreciated.
JSFiddle link: https://jsfiddle.net/u73hgLuy/
I am following the jsfiddle. The code sample is working fine on jsfiddle, However I am unable to make it to work in my cordova mobile app.
I have placed the javascript code in home.js in js folder.
home.js:
$(document).on('swipeleft', '.ui-page', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var nextpage = $.mobile.activePage.next('[data-role="page"]');
// swipe using id of next page if exists
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
}
event.handled = true;
}
return false;
});
$(document).on('swiperight', '.ui-page', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var prevpage = $(this).prev('[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
}
event.handled = true;
}
return false;
});
home.html:
<!DOCTYPE html>
<html>
<head>
<title>Share QR</title>
<meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
<script type="text/javascript" src="js/home.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="article1">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
<h1>Articles</h1>
</div>
<div data-role="content">
<p>Article 1</p>
</div>
</div>
<div data-role="page" id="article2">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
Home
<h1>Articles</h1>
</div>
<div data-role="content">
<p>Article 2</p>
</div>
</div>
<div data-role="page" id="article3">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
Home
<h1>Articles</h1>
</div>
<div data-role="content">
<p>Article 3</p>
</div>
</div>
</body>
</html>
I can't swipe to change the pages. Could someone point me in right direction ?
Seems you are missing the 'ui-page' class from your HTML.
<div class="ui-page" data-role="page" id="article1">
I'm developing an app with PhoneGap and I want to create a simple between some pages.
This is my html file
<html>
<head>
<title>Prova</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
</head>
<body>
<div class="prima" data-role="page" id="article1">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
<h1>Articles</h1>
</div>
<div data-role="content">
<p>Article 1</p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
<h1>Footer</h1>
</div>
</div>
<div class="prima" data-role="page" id="article2">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
Home
<h1>Articles</h1>
</div>
<div data-role="content">
<p>Article 2</p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
<h1>Footer</h1>
</div>
</div>
<div class="prima" data-role="page" id="article3">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
Home
<h1>Articles</h1>
</div>
<div data-role="content">
<p>Article 3</p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
<h1>Footer</h1>
</div>
</div>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery_mobile.js"></script>
<script src="js/gianni.js"></script>
</body>
</html>
My js file is (http://jsfiddle.net/Gajotres/NV6Py/)
$(document).on('swipeleft', '.prima', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var nextpage = $(this).next('.prima');
console.log(nextpage);
// swipe using id of next page if exists
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
}
event.handled = true;
}
return false;
});
$(document).on('swiperight', '.prima', function(event){
if(event.handled !== true) // This will prevent event triggering more then once
{
var prevpage = $(this).prev('.prima');
console.log(prevpage);
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
}
event.handled = true;
}
return false;
});
When I open this html file it works and read all page div but if I use this page in my app where I have some pages before arrive to this page the swipe doesn't work because var nextpage = $(this).next('.prima') is empy and if I check with Ispector in html there is only the fist div and no other (ex. article2, article3)
Your question is a bit unclear, but unfortunately I can't comment on your question because of my low reputation. So I can't ask you for more clarification.
But you have 3 divs all with the class: prima. And your problem is that you can only see the first div, so the div with the id: article1.
The reason why you can only see one div, is because you use the data-role: page. You are creating a page, and you can only see one page at the time.
I am developing android app using phonegap and try to integrate admob into my coding. The problem is "The ad is not displayed in index page." I am using admobpro plugin. Kindly help me. Here is index.html coding (admob script is directed added to index page not separate js)
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/mycss.css" />
<script src="css/jquery-1.11.1.min.js"></script>
<script src="css/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<script>
var admobid = {};
if( /(android)/i.test(navigator.userAgent) ) {
admobid = { // for Android
banner: 'xxxxxxxxxxxxxxxxxxxx',
interstitial: 'xxxxxxxxxxxxxxxxxxxx'
};
} else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
admobid = { // for iOS
banner: 'xxxxxxxxxxxxxxxxxxxx',
interstitial: 'xxxxxxxxxxxxxxxxxxxx'
};
} else {
admobid = { // for Windows Phone
banner: 'xxxxxxxxxxxxxxxxxxxx',
interstitial: 'xxxxxxxxxxxxxxxxxxxx'
};
}
if(( /(ipad|iphone|ipod|android|windows phone)/i.test(navigator.userAgent) )) {
document.addEventListener('deviceready', initApp, false);
window.alert("arun here")
} else {
initApp();
}
function initApp() {
if (! AdMob ) { alert( 'admob plugin not ready' ); return; }
AdMob.createBanner( {
adId: admobid.banner,
isTesting: true,
overlap: false,
offsetTopBar: false,
position: AdMob.AD_POSITION.BOTTOM_CENTER,
bgColor: 'black'
} );
AdMob.prepareInterstitial({
adId: admobid.interstitial,
autoShow: true
});
}
</script>
<div data-role="page" id="quest">
<div data-role="header" data-position="fixed">
<h1>Hello World</h1>
</div><!-- /header -->
<div data-role="content" class="links_home">
<!--<h1>links</h1> -->
<ul>
<li>This Link 1</li>
<li>This Link 2</li>
<li>This Link 3</li>
<li>This Link 4</li>
<li>This Link 5</li>
</ul>
</div><!-- /content -->
<!--<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div> /footer -->
</div><!-- /page -->
</body>
</html>
cordova.js is the cordova bridge between javascript and native code, if missing it, the plugins won't be called.
You forget to add cordova.js in your index.html.
<script src="cordova.js"></script>
See example index.html here:
https://github.com/floatinghotpot/admob-demo-game-phaser/blob/master/demo/index.html
You can directly copy this admob.js to your project, and reference in index.html:
https://github.com/floatinghotpot/admob-demo-game-phaser/blob/master/demo/js/admob.js
Edit: I see the issue is with using live instead of on. I fixed that however, can't get the second timer to fire..
Error: Object [object Object] has no method "popup"
I am trying to implement a client side session time out using jquery mobile. My code is at: http://jsfiddle.net/83BSW/5
Appreciate any insights..
Here is the code for convenience:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<!-- Application specific -->
<script>
var first_timer = 2 * 1000;
var second_timer = 3 * 1000;
var down = -1;
function initTimer() {
down = setTimeout(processTimeout, first_timer)
}
function processTimeout() {
down = setTimeout(logout, second_timer);
$.mobile.changePage('#timeout1',{transition:'slide', role:'dialog'});
//alert ("Timeout of first timer, timerid:" + down );
}
function logout() {
$("#timeout").popup('close');
$.mobile.changePage('#timeout2',{transition:'slide', role:'dialog'});
alert("You are logged out");
// window.location = "http://www.google.com"
}
function resetMyTimer() {
if ( -1 != down )
clearTimeout(down);
alert("Restarting timer");
initTimer();
}
$("#loadingpage").on(function() {
resetMyTimer();
});
initTimer();
</script>
</head>
<body>
<div data-role="page" id="loadingpage">
<div data-role="header" data-position="fixed">
<div class="headerlogo"> </div>
<h1> Test </h1>
</div>
<div data-role="content" >
<div id="ssagov">
<h1> Hi there </h1>
</div>
<input type="button" data-shadow="false" data-corners="false" value="Next" />
</div><!-- /content -->
</div><!-- /launch page -->
<div data-role="page" id="timeout1" data-role="popup">
<div data-role="header" data-backbtn="false">
<h1>Timeout1</h1>
</div>
<div data-role="content">
Your session will timeout in 2 mins.
</div>
</div>
<div data-role="page" id="timeout2" data-role="popup">
<div data-role="header" data-backbtn="false">
<h1>Timeout2</h1>
</div>
<div data-role="content">
Your session has timed out
</div>
</div>
</body>
</html>
Finally I fixed the issue, instead of popup, I should be using dialog. Here is the working version: http://jsfiddle.net/83BSW/6