I'm building a mobile app with Cordova, Backbone for the MVC structure and jQuery Mobile for UI.
This works well except for the user experience while loading a new page. Actually a new page is created dynamically, and when it's ready, jquery mobile handles the page transition to this page. In a mobile browser this transition is slower than in a classic browser, so while page is loading the user sees a blank white screen and then appears the new page.
The matter is about my header/footer bar. I'd like it to keep showing while the content is loading, so the user will see the header/footer and only a blank/white content during the transition.
So this is a classic page structure:
<div data-role="page">
<div data-role="header"></div>
<div data-role="content"></div>
<div data-role="footer"></div>
</div>
For me the easiest way to go is like that:
<div data-role="header"></div>
<div data-role="page">
<div data-role="content"></div>
</div>
<div data-role="footer"></div>
And fix the content with CSS positioning.
But I'd like to find something smarter.
What do you think of having a single JQM page, with Backbone just updating the <div data-role="content"> for each route? What about JQM rendering? And what about transitions?
Documentation: http://jquerymobile.com/demos/1.1.0/docs/toolbars/footer-persist-d.html
Basically you put a data-role="footer" element in each page like this:
<div data-role="footer" data-id="foo-footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Friends</li>
<li>Albums</li>
<li>Emails</li>
<li><a href="d.html" >Info</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
Notice the data-id, it must be the same on all data-role="footer" elements to take advantage of the persistent toolbar option. The data-role="footer" element also must have the data-position="fixed" attribute.
Here is a demo: http://jsfiddle.net/SpRAA/
Related
I am using jquerymobiles 1.4.2
Is it possible to place a page within another page before closing first page.
HTML
<div data-role="page" id="page1">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content">
Go to Page Two
contents</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>header2</h1>
</div>
</div>
Short answer is no, you can't. Nothing can prevent you but this "page" will never work as regular page. All pages must be part of a page container which is body.
On the other hand, inner pages were possible before with some 3rd party plugins but they were not updated since jQuery Mobile 1.0.
I have encountered a weird issue with jQuery Mobile, where when tapping on a link in an iFrame and scrolling makes the persistent header in the parent HTML document move up and down with the scrolling. The interesting part is that this behaviour only happens when jQuery mobile has loaded a page in the iFrame. The full example can be seen here: http://www.cs.au.dk/~gedefar/jqm/parent.html (remember to load it on iPhone).
To the code and sorry for the lengthy example, but in order to show the problem I need three pages, parent.html, that contains the iframe, and two child pages, child_{1,2}.html that are loaded in the iFrame (with links to each other):
<div data-role="page">
<div id="header" class="header" data-role="header"
data-position="fixed" data-theme="c">
Foo Bar header
</div>
<div data-role="content">
<iframe src="child_1.html" />
</div>
</div>
child_1.html:
<div data-role="page">
<div data-role="content">
<h1> Child page 1</h1>
Go to child 2
<p>
Normal text, where the header is perfectly positioned when touching
here.
</p>
<p>
No problems below, when this page loaded directly in the iFrame. But loading
child 2 using JQM we get the scolling issues.
</p>
<ul data-role="listview">
<li>No link.</li>
<li>A link</li>
<li>No link</li>
<li>A link</li>
</ul>
</div>
</div>
child_2.html (no real difference to child_1.html, except the description):
<div data-role="page">
<div data-role="content">
<h1> Child page 2</h1>
Go to child 1
<p>
Normal text, where the header is perfectly positioned when touching
here and moving up and down after the first touch.
</p>
<p>
The problem is with list items below containing a link. For those the
header is not fixed. For the other it is fixed.
</p>
<ul data-role="listview">
<li>No link.</li>
<li>A link</li>
<li>No link</li>
<li>A link</li>
</ul>
</div>
</div>
What I find really weird is that the header is only moving when scrolling, if the first tap of the scroll is on a link on the child page. So any ideas here how to proceed? Or
Updated
I have tested the above scenario on different versions of iOS and it works perfectly in 7.0.3, but anything older than 7.0.0 the above problem is present. I don't have access to an Android phone, so I haven't been able to test it there.
In jquery mobile I have a nested list.
When the nested list apears the page is not the same as the previous page.
The page showing the list "1.html" is:
data-theme="a", with a nice header and footer.
The nested list looks like data-theme="d", no footer and has a back button - i would prefer a custom button?
Is there anyway to fixed this so the nested list page is consistent with its fathers' page?
Thanks :-)
A bug? What version of jQuery Mobile are you using? As of version 1.1.0 the back button in the header is disabled by default. Check out this example http://jquerymobile.com/demos/1.1.0/docs/lists/lists-nested.html
About your second question regarding the buttons, the footer and the themes.
To render a button, all you need to do is to put data-role="button" and for a theme add data-theme="a" to a link like this
Link button
To create the footer you need to place the following inside the page div:
<div data-role="footer">
<h4>Footer content</h4>
</div><!-- /footer -->
As a demo, here is a page with the theme e applied:
<div data-role="page" data-theme="e">
<div data-role="header" data-theme="e">
<h1>Single page</h1>
</div><!-- /header -->
<div data-role="content">
<p>Some text here</p>
Link button
</div><!-- /content -->
<div data-role="footer" data-theme="e">
<h4>Footer content</h4>
</div><!-- /footer -->
</div><!-- /page -->
As a tip, you can look the examples here http://jquerymobile.com/demos/1.1.0/ and study the code by selecting "View Page Source" in your browser. This is the way I am learning JQM now.
i thought this would be a problem of jquery-mobile 1.1.0 RC.
But also in the final release i got this weird problem, that my header overlaps my content div:
When i now click somewhere in the content div, the page rerenders and the content div is at the correct position(directly beneath the header).
I'm using Backbone.js Views for representing content, and jquery-mobile-router. I tried almost everything but i counldn't find any solution for this problem.
Does anyone know a solution for that?
html:
<!-- newsoffers page -->
<div data-role="page" id="newsoffers">
<div data-role="header" data-theme="a" data-fullscreen="false" data-position="fixed">
</div>
<!-- /content -->
<div data-role="content" data-scroll="true" class="content-full">
</div>
<!-- /content -->
<div id="newsoffersFooter" data-role="footer" data-position="fixed" data-fullscreen="false" data-id="mainFooter" data-theme="b">
</div>
<!-- /footer -->
</div>
the code for the header is dynamically injected! The content will be injected while the "pagebeforeshow" event is fired.
"setNavBarCollection" adds a backbone collection to the header, which is then rendered as a navbar.
The "refreshOffers" function generates a view containing a backbone collection which is fetched asynchronously.
Can I embed one page (data-role="page") in another page like:
<div data-role="page"> <!-- outer page -->
<div data-role="header"></div>
<div data-role="content">
<div data-role="page"> <!-- inner page -->
<div data-role="header"></div>
<div data-role="content">
inner page content goes here....
</div>
<div data-role="footer"></div>
</div> <!-- inner page -->
<div data-role="footer"></div>
</div> <!-- outer page -->
When I tried like this, i didn't see my content but outer header, footers displaying for
me.
Thanks,
nehatha.
No, you cannot. Pages are not meant to be embedding each other. May be you can probably write what are you trying to achieve by this?
You have two options.
Write your own transition logic, which will not be very difficult, you can say $('#content').html(new html); on every button click and keep only one page.
use data-position="fixed" for header and footer in jQuery mobile and use normal page, this way your header and footer will not move on scrolling, paginating.
Multi-page template structure: http://demos.jquerymobile.com/1.4.2/transitions/pages/