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>
Related
Am trying to get the focus of my chat messages top the newest, at the bottom of the page but the scroll automatically goes to the top.Here is my code:
js:
$(document).ready(function){
$('#GridDiv').click(function(){
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
return false;
})
}
html:
{{ extend 'layout.html' }}
<head>
<title>Britam Intell Services</title>
<link rel="stylesheet" type="text/css" href="{{=URL('static', 'css/index.css')}}">
<script src="index.js" language="javascript" type="text/javascript"></script>
</head>
<div class="well" id="GridDiv">
<div class="chatbox">
<div class="chatlogs">
<div class="chat">
{{for reply in replies:}}
<div class="chat self">
<div class="user-photo"><img src="{{=URL('static','images/userOne.png')}}"/></div>
<p class="chat-message">
<small>{{=prettydate(reply.created_on)}}</small>
{{=XML(reply.quest.replace('\n','<br>'))}}
</p>
</div>
</div>
<div class="chat">
<div class="chat friend">
<div class="user-photo"><img src="{{=URL('static','images/userTwo.png')}}"/></div>
<p class="chat-message">
{{=XML(reply.message.replace('\n','<br>'))}}
</p>
</div>
{{pass}}
</div>
</div>
{{=form.custom.begin}}
<div class='chat-form'>
<textarea name="message"></textarea>
<button>
Send
</button>
</div>
{{=form.custom.end}}
</div>
</div>
is there a way i can cod this to function properly to look like this with the newest message at the bottom:
It seems that when the click fires the document is not completely loaded (especially images) so the height is not the final one.
You could check the document height with a console.log inside the click handler.
Try to put the animation code line inside a timer, in order to get it executed after a page repaint.
setTimeout(function () {
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
}, 100};
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.
Is there any method to call/show Dialog or popup before page load using jquery Mobile?
I want to get some input before page load and according to that input next page will be loaded
To load a dialog or a popup before showing a page, you need to use seTimeout. if you call it without a delay, it will open and close at once.
$(document).on('pagebeforeshow', '#pageID', function() {
setTimeout(function () {
$('#popupID').popup('open');
}, 100); // delay above zero
});
Similar issue.
There's a very simple solution to your question, only thing you need to do is make your first page to be a dialog.
Working example: http://jsfiddle.net/Gajotres/dj3UP/1/
As you can see it in my example this is a pure HTML solution. First page data-role attribute was changed to dialog.
HTML :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="dialog" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<input type="text" value="" id="some-input"/>
<a data-role="button" id="some-button" href="#second">Next page</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second">
<div data-theme="a" data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Try Following:
$.mobile.loading( 'show', {
text: 'foo',
textVisible: true,
theme: 'z',
html: ""
});
Refere Link:
http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html
I am new to jquery and jquery mobile. I am currently trying to create a simple mobile application that, once a page is loaded, displays an alert message.
I have added in the head section of the html file, as suggested, the following code:
<link rel="stylesheet" href="jquery.mobile-1.3.0.min.css" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$('#chart').live('pageinit', function() {
alert('jQuery Mobile: pageinit for Config page');
});
</script>
<script type="text/javascript" src="jquery.mobile-1.3.0.min.js"></script>
In the body section I have added, as expected, the code for the chart page:
<div data-role="page" data-theme="b" id="chart">
<div data-role="header" data-position="fixed">
Back
<h1>Year Chart</h1>
</div>
<div data-role="content">
<div id="container"></div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
</div>
</div>
</div>
However, when the chart page is loaded in the browser of my computer (not the phone), no alert message is displayed. Does anyone know where the problem may lie? Thanks in advance!
Here is the full HTML and code that I can success alert in my all browser(IE, chrome, firefox). I guess some of your javascript are not exist or typo. Try to use CDN.
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript">
$( '#chart' ).live( 'pageinit',function(event){
alert( 'This page was just enhanced by jQuery Mobile!' );
});
</script>
</head>
<body>
<div data-role="page" data-theme="b" id="chart">
<div data-role="header" data-position="fixed">
Back
<h1>Year Chart</h1>
</div>
<div data-role="content">
<div id="container"></div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
</div>
</div>
</div>
</body>
</html>
UPDATED:
If you are using jquery 1.9+, we should use .on instead of .live. It is because .live has been removed from 1.9. http://api.jquery.com/live/
So, the code should change like this if you are using 1.9
$( document ).on( 'pageinit','#chart', function(event){
alert( 'This page was just enhanced by jQuery Mobile!' );
});
I think that jQuery Mobile page events (like pageInit) don't bubble outside the page. Try to insert the script tag inside the the page div like this
<div data-role="page" data-theme="b" id="chart">
<div data-role="header" data-position="fixed">
Back
<h1>Year Chart</h1>
</div>
<div data-role="content">
<div id="container"></div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
</div>
</div>
<script type="text/javascript">
$('#chart').live('pageinit', function() {
alert('jQuery Mobile: pageinit for Config page');
});
</script>
</div>
Alternatively you can bind the pageInit function to the document element like this:
$(document).live('pageinit', function() {
alert('jQuery Mobile: pageinit for Config page');
});
But I think the first solution is more inline with the best practices