<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/
Related
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'm trying to trigger the open of a panel using the
$("#searchpanel").panel("open");
method. it throws a
Uncaught TypeError: undefined is not a function
error because .panel() doesn't exist on that object as a method.
here is the html code:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/themes/db.css" />
<style>#import "css/bible.css";</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<script data-main="js/main" type="text/javascript" src="js/require-jquery.js"></script>
<style>
.panel-content { padding:3px; }
.ui-btn-text { font-size: .75em;}
h3 { font-size: 1em;}
p {font-size: .8em;}
.ui-submit .ui-btn-inner .ui-btn-text { font-size: 1.2em;}
.ui-submit {height:35px;}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="a">
<div class="ui-grid-c my-breakpoint">
<div class="ui-block-a"><a id="menuicon" href="#defaultpanel"></a></div>
<div class="ui-block-b"><input id="searchvalue" type="search" /></div>
<div class="ui-block-c"><input value="Search" type="submit" id="searchbtn" /></div>
<div class="ui-block-d"><a id="searchicon" href="#searchpanel"></a></div>
</div>
</div>
<div data-role="content">
<div id="resultwrap">
<ul id="result"></ul>
</div><!-- /content -->
</div>
<div data-role="panel" id="searchpanel" data-theme="a" data-position="right" data-display="overlay">
<div class="panel-content">
<h3>Search Results: <span id="searchTotal"></span></h3>
<div id="searchresults"></div>
</div>
</div>
<div data-role="panel" id="defaultpanel" data-theme="a">
<div class="panel-content">
<h3>Settings</h3>
</div>
</div>
</div><!-- /page -->
</body>
EDIT: per Alexanders suggestion below, modified the question for clarity.
EDIT2: also added relevant head section so you can see the versions in use.
Have you created your method first before doing an open function?
Here is an example on how to do that: panel-swipe-open
$( document ).on( "pageinit", "#demo-page", function() {
$( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
// We check if there is no open panel on the page because otherwise
// a swipe to close the left panel would also open the right panel (and v.v.).
// We do this by checking the data that the framework stores on the page element (panel: open).
if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
if ( e.type === "swipeleft" ) {
$( "#right-panel" ).panel( "open" );
} else if ( e.type === "swiperight" ) {
$( "#left-panel" ).panel( "open" );
}
}
});
});
So it turns out the issue here is the
<script data-main="js/main" type="text/javascript" src="js/require-jquery.js"></script>
tag. Require is failing to load something correctly interfering with the event system. Testing without Require fixes the issue.
Problem is to show/hide requested specific page from among pages in the html. The code I tried is shown below. Can any one point me the right direction. I n the blow code I tried to show only pagethree, but it displayed pageone.
<!DOCTYPE html PUBLIC >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.1.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
<script>
$("#pageone").hide();
$("#pagetwo").hide();
$("#pagethree").show();
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>page one</h1>
</div>
<div data-role="main" class="ui-content">
<p>page one contents </p>
</div>
<div data-role="footer">
<h1>page one</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>page two</h1>
</div>
<div data-role="main" class="ui-content">
<p>page two contents</p>
</div>
<div data-role="footer">
<h1>page two</h1>
</div>
</div>
<div data-role="page" id="pagethree">
<div data-role="header">
<h1>page three</h1>
</div>
<div data-role="main" class="ui-content">
<p>page three contents...</p>
</div>
<div data-role="footer">
<h1>page three</h1>
</div>
</div>
</body>
</html>
To prevent page from showing or redirect a user before next page is shown, you need to listen to pagebeforechange event. This event fires before changing page transition is commenced and URL History is updated.
When pagebeforechange is emitted, it omits a data object holding details of previous and next page. Use this data to determine from and which pages the user is navigating.
$(document).on("pagebeforechange", function (e, data) {
var nextPage = data.toPage,
prevPage = data.options.fromPage;
if (typeof nextPage === "object" && typeof prevPage === "undefined") {
var page = nextPage[0].id;
if (page === "pageone") {
$.mobile.changePage("#pagethree", {
transition: "flip"
});
return false;
}
}
});
Using .show() or .hide() will get you nowhere. In addition, refrain from using .ready() or $(function () {}); in jQuery Mobile and use Page Events instead.
Demo
Try to put your code inside pagecreate event:
Triggered when the page has been created in the DOM (via ajax or
other) and after all widgets have had an opportunity to enhance the
contained markup.
<script>
$(document).on('pagecreate', function() {
$("#pageone").hide();
$("#pagetwo").hide();
$("#pagethree").show();
});
</script>
<script>
$(document).ready(function()
{
$("#pageone").hide();
$("#pagetwo").hide();
$("#pagethree").show();
});
</script>
I have three pages A,B,C and i want to swap right from A to B then go back, and swap left from A to C then go back ...
I'm new to jquery mobile and javascript, I've tried a lot of scripts but non of them did the job,
here is my js and html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.1.min.css">
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.mobile-1.4.1.min.js"></script>
<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page1" >
<div data-role="header">
<h1>page1</h1>
</div>
<div data-role="main" class="ui-content">
<p>page1</p>
</div>
<div data-role="footer">
<h1>swap</h1>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>page2</h1>
</div>
<div data-role="main" class="ui-content">
<p>page2</p>
</div>
<div data-role="footer">
<h1>swap</h1>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1>page3</h1>
</div>
<div data-role="main" class="ui-content">
<p>page3</p>
</div>
<div data-role="footer">
<h1>swap</h1>
</div>
</div>
</body>
</html>
js
<script>
$(document).on('swiperight swipeleft', function(event) {
if (event.type == 'swiperight') {
if(id == 'page1'){
$.mobile.changePage("#page3");
}
else
{
$.mobile.changePage("#page1");
}
}
if (event.type == 'swipeleft') {
if(id == 'page1'){
$.mobile.changePage("#page2");
}
else
{
$.mobile.changePage("#page1");
}
}
});
</script>
Add in page header of #page2 and #page3
<a data-rel="back" href="#" data-transition="slide" direction="reverse">Back</a>
Javascript
$(document).on('swiperight swipeleft', "#page1", function(event) {
if (event.type == 'swiperight') {
$.mobile.changePage("#page2");
}
if (event.type == 'swipeleft') {
$.mobile.changePage("#page3");
}
});