I have a jquery mobile page like following
<div id="main_template_wrapper">
<div data-role="header" class="header" data-position="fixed">
<h1>中文</h1>
</div><!-- /header -->
<div data-role="content" class="content">
userprofile
login
tutorial
Jasming
</div><!-- /content -->
<div data-role="footer" class="footer" data-position="fixed">
</div><!-- /footer -->
</div>
When I see this page on ios device, there is always a weird scrollbar on the right, where you can scroll a little bit, why and how to fix this.
Ok. after some fix, it seem in index.html viewport, I set height=device-height, which caused this error, device-height is longer than screen it seems, after i removed height, the scrollbar is gone.
Related
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.
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/
How to make Jquery Mobile splitView (http://asyraf9.github.com/jquery-mobile/) works with Iphone,
I have tried changing min-width: 480px to smaller values in jquery.mobile.splitview.js, It dosen't work.
Any idea please?
I have taken an example from here, https://github.com/asyraf9/jquery-mobile/. It works fine when views from ipad and desktop,but not for my android and iphone devices.
Sample Code:
<div data-role="panel" data-id="menu">
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called bar</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- other side panel pages here -->
</div>
<div data-role="panel" data-id="main">
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>Back to foo</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- other main panel pages here -->
</div>
it wont work on iphone.. i tried it, even if u change the 480px thing it will become so slow that it will become unusable... best way is to have 3 modes..
splitview -> 2 columns
popover -> the complementary view of splitview.. appears in ipad, with a popover menu
none -> for normal phones.
the way u can do this is see the spltview code where it checks the condition of whether splitview can work or not. in its else it removes all the panel-html and leaves just the html of the menu panel. so this is your 3rd case. i suggest u do it this way only
Please help,
jquery mobile multipage wont work when a page is called from another page. It only displays the buttons but doesnt navigate to its internal pages when clicked. It works fine when the page is access directly.
<!-- Page 1-->
<div data-role="page" id="description" data-title="Description">
<div data-role="header" data-position="fixed" data-theme="d">
<!-- header 1-->`enter code here`
</div>
</div>
<div data-role="content">
<!--- content 1-->
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>Description</li>
<li>Physicians</li>
</ul>
</div>
</div>
</div>
<!-- Page 2-->
<div id="Physicians" data-role="page" data-title="Physicians">
<div data-role="header" data-position="fixed" data-theme="d">
<!-- header 2 -->
</div>
<div data-role="content">
<!-- content 2 -->
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>Description</li>
<li>Physicians</li>
</ul>
</div>
</div>
</div>
Try adding to the anchor the attribute rel="external".
Example:
Description
try giving <div data-role="page" first for your second page
When you call this page from another page, it ONLY loads the div[data-role="page"] of that page, not the other div in this multi-page file!
Actually to be precise, when you link to a page from another page, ONLY the code inside the div you are targeting is pulled in via AJAX, even if you had JS in the <head> that won't get loaded either.
Try linking to this page with an external link and you'll find it works fine.
Environment
jQuery 1.7.1
jQuery Mobile 1.0 Final
PHP w/ CodeIgniter 2.1.0
LAMP
Testing on:
GSM iPhone 4 with iOS 5.0.1
Kubuntu 11.10
Google Chrome 17.0.963.12 dev
Firefox 9.0.1
Problem
On loading the page, jQuery Mobile appropriately assumes that I want to view the first "page wrapper" and display that quite beautifully. However, when clicking the "Usage" link, nothing happens. By nothing, I mean that clicking it does not load the page with the appropriate ID, nor does it do a post-back/ajax call. However, if I refresh the page, I can then use the menu (including the Usage button and then the Transaction button while on the usage page) as it should work.
I have looked at the Chrome Developer Tools Network tab and nothing shows up (as it shouldn't because it's an anchor link and the content is already in the DOM). I have tested this on my iPhone and Chrome/Firefox (relevant version numbers above).
I'd really like to have these two pages on the same DOM but I suspect that splitting them up would work. I'd like to leave that as a last resort.
Question
Do I have some syntax error or am I possibly missing something key to the jQuery Mobile environment?
Code
Note: The page below is wrapped in a normal HTML>Head+Body skeletal structure, base_view, I have omitted that but if you would like to see it, just ask and I will append it. The only additions are a meta tag for viewport config, two Javascript script tags and two CSS link tags.
The link that points to the following page/DOM:
Account Details
The page with the persistent navbar:
<!-- ============ PAGE ONE ============ -->
<div id="transactions" data-role="page" class="ui-page">
<div data-role="header" data-position="fixed">
<a href="home.php" data-role="button" data-icon="arrow-l" data-iconpos="notext" class="ui-button-left" data-direction="reverse" data-prefetch>Back</a>
<h1>Transactions</h1>
</div> <!-- /header -->
<div id="content" data-role="content" class="ui-content">
Hello World!
</div> <!-- /content -->
<div data-role="footer" data-position="fixed" data-id="account_details">
<div data-role="navbar">
<ul>
<li>
Transactions
</li>
<li>
<a href="#usage" data-transition="fade" data-prefetch>Usage</a>
</li>
</ul>
</div> <!-- /navbar -->
</div> <!-- /footer -->
</div> <!-- /page one -->
<!-- ============ PAGE TWO ============ -->
<div id="usage" data-role="page" class="ui-page">
<div data-role="header" data-position="fixed">
<a href="home.php" data-role="button" data-icon="arrow-l" data-iconpos="notext" class="ui-button-left" data-direction="reverse" data-prefetch>Back</a>
<h1>Usage</h1>
</div> <!-- /header -->
<div id="content" data-role="content" class="ui-content">
Hello World, Again!
</div> <!-- /content -->
<div data-role="footer" data-position="fixed" data-id="account_details">
<div data-role="navbar">
<ul>
<li>
<a href="#transactions" data-transition="fade" data-prefetch>Transactions</a>
</li>
<li>
Usage
</li>
</ul>
</div> <!-- /navbar -->
</div> <!-- /footer -->
Thanks
Thanks in advance for taking the time to read this and for any help/feedback you can provide!
Sigh. I just didn't read the documentation properly. When linking to a page with multiple pages (multiple data-role="page" divs, or "page wrappers"), the rel="external" param has to be set on the link that points to the multi-page document.
So the solution was to change:
Account Details
To:
Account Details