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
Related
I want to create a mobile page for mobiles and tablets. When the user uses a tablet (larger screen), the left panel-navigation should stay open all time. When the user uses a mobile phone (smaller screen) there should be only a button top-left to open the panel.
Jquery has a demo, but obviously it is not working:
http://demos.jquerymobile.com/1.4.5/panel-responsive/
I tried the demo on JSfiddle but it also did not work:
<div data-role="page" class="jqm-demos ui-responsive-panel" id="panel-responsive-page1" data-title="Panel responsive page">
<div data-role="header">
<h1>Panel responsive</h1>
Menu
Add
</div><!-- /header -->
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<h1>Panel responsive</h1>
<p>This is a typical page that has two buttons in the header bar that open panels. The left panel has the push display mode, the right panel reveal. To make this responsive, you can make the page re-flow at wider widths. This allows both the panel menu and page to be used together when more space is available. This behavior is controlled by CSS media queries. You can create a custom one for a specific breakpoint or use the breakpoint preset by adding the <code>class="ui-responsive-panel"</code> to the page container. We have added this class on this demo page. Note that when using the preset class, we also hide the dismiss layer on wider screens if the panel has the push display mode.</p>
<div data-demo-html="#panel-responsive-page1"></div><!--/demo-html -->
<br>
<br>
<br>
<br>
<br>
Back
</div><!-- /content -->
<div data-role="panel" data-display="push" data-theme="b" id="nav-panel">
<ul data-role="listview">
<li data-icon="delete">Close menu</li>
<li>Accordion</li>
<li>Ajax Navigation</li>
<li>Autocomplete</li>
<li>Buttons</li>
<li>Checkboxes</li>
<li>Collapsibles</li>
<li>Controlgroup</li>
<li>Dialogs</li>
<li>Fixed toolbars</li>
<li>Flip switch toggle</li>
<li>Footer toolbar</li>
<li>Form elements</li>
<li>Grids</li>
<li>Header toolbar</li>
<li>Icons</li>
<li>Links</li>
<li>Listviews</li>
<li>Loader overlay</li>
<li>Navbar</li>
<li>Navbar, persistent</li>
<li>Pages</li>
<li>New</li>
<li>Popup</li>
<li>Radio buttons</li>
<li>Select</li>
<li>Slider, single</li>
<li>New</li>
<li>New</li>
<li>New</li>
<li>Text inputs & textarea</li>
<li>Transitions</li>
</ul>
</div><!-- /panel -->
<div data-role="panel" data-position="right" data-display="reveal" data-theme="a" id="add-form">
<form class="userform">
<h2>Login</h2>
<label for="name">Username:</label>
<input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true">
<div class="ui-grid-a">
<div class="ui-block-a">Cancel</div>
<div class="ui-block-b">Save</div>
</div>
</form>
</div><!-- /panel -->
</div><!-- /page -->
<div data-role="page" id="panel-responsive-page2">
<div data-role="header">
<h1>Landing page</h1>
</div><!-- /header -->
<div role="main" class="ui-content jqm-content">
<p>This is just a landing page.</p>
Back
</div><!-- /content -->
</div><!-- /page -->
http://jsfiddle.net/84m0b2au/
I searched a long time, found a half-working JS solution, but the panel does not stay open when i change the pages, only when i reload the page. I found some similar questions, obviousl it is an issue, but nowhere is a (for me) working solution.
So my question is, how can i solve the problem. The best way is to find a CSS-only solution.
Thank you very much for your tips.
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.
i am implementing tab bar using jquery mobile.I need to show different pages on different buttons on tab bar .But it is showing in same page.
http://jsfiddle.net/ravi1989/654gX/
<div data-role="navbar">
<ul>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</div>
<div data-role="content" class="content">
<div id="tab-1">
<h2>Here is the first tab</h2>
</div>
<div id="tab-2">
<h2>Here is the second tab</h2>
</div>
<div id="tab-3">
<h2>Here is the third tab</h2>
</div>
</div>
You need to restructure you app, first follow this structure given at jquery mobile docs.
Secondly navbars are supposed to be inside footer or header, so wrap you navbar around footer then you need fixed header and footer with same data-id so the pages transition between dynamically keeping the same header and footer, which looks like tabs, example
<div data-role="page" id="one">
<div data-role="header" data-position="fixed" data-id="sameheader">
<h1>Single page</h1>
</div><!-- /header -->
<div data-role="content">
<p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.</p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="samefooter">
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page -->.
<div data-role="page" id="two">
<div data-role="header" data-position="fixed" data-id="sameheader">
<h1>Single page</h1>
</div><!-- /header -->
<div data-role="content">
<p>Different page same footer.</p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="samefooter">
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page2 -->
Js fiddle example
I am using Jquery mobile and I am changing to a multi page template that contains multiple pages in it. An event is triggering this code:
$.mobile.changePage("pages.html");
The pages.html file has:
<div data-role="page" data-title="page1" id="page1">
<div data-role="header">
back
<h1>page1</h1>
</div><!-- /header -->
<div data-role="content">
This is page1
<ul data-role="listview" data-inset="true">
<li>page2</li>
</ul>
</div><!-- content -->
</div><!-- /page -->
<div data-role="page" data-title="page2" id="page2">
<div data-role="header">
back
<h1>page2</h1>
</div><!-- /header -->
<div data-role="content">
This is page 2
</div><!-- content -->
</div><!-- /page -->
The changePage works, but it only brings in the first page, not the second into the DOM. Therefore when I click on the page2 link it does not go to page 2 because it is not in the DOM. How do I use changePage to bring in the entire file (pages.html) so I have access to the other pages in that file?
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