I am currently trying to build a Facebook-styled web App using jQuery mobile. My main problem is that users are not able to scroll both navigation-bar and content at the same time. I tried many css based solutions but whereas my normal browser displays everything correct all my mobile devices refuse to display two scroll bars at the same time.
So I tried to implement iScroll with iScrollview. It works just perfectly with every content but with my slideable menu-bar. I have no idea where the problem might be. As soon as a page is added iScrollview seems to ignore the data-iscroll attribute.
<body class="ui-mobile-viewport">
<div id="menu" data-role="content" data-iscroll> <!--Menu-->
<div id="memberDetails">
<h3>Username</h3>
</div>
<ul>
<li class="menuDivider" >MENUDIVIDER</li>
<li class="active"><span class="icon" id="home"></span><span class="text">Home</span></li>
<li></span><span class="text">Page One</span></li>
<li></span><span class="text">Page Two</span></li>
<li></span><span class="text">Page Three</span></li>
<li></span><span class="text">Page Eight</span></li>
<li class="menuDivider" >MENUDIVIDER</li>
</ul>
</div>
<!--/Menu-->
<!--page Home-->
<div data-role="page" class="pages ui-page ui-body-c ui-page-active" id="home" data-url="home" tabindex="0" style="margin-left: 0px; min-height: 882px; ">
<div data-role="header" class="ui-header ui-bar-a" role="banner"> <span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true"><span class="ui-btn-text">Menu</span></span>
<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Home</h1>
</div>
<!-- /header -->
<div id="logo"><img src="files/images/wig_logo.png" alt="wig-logo" width="54" height="25"></div>
<!-- /logo -->
<div data-role="content" class="ui-content" role="main">
<p>Text</p>
</div>
<!-- /content -->
</div>
<!-- /page Home-->
</body>
I am using jQuery 1.8.2, JQM 1.2.0. The slideeffect is done by basically setting the content's margin to the menu's width. Let me know if you need any further information.
Related
I am using Cordova with JQuery mobile, it working fine on android, but when made build for Windows Phone 8, the JQM Toolbar(Header and footer) not getting fix, Toolbar little goes up when I am scrolling up page and when I am scrolling down the toolbar little goes down, like below screenshots
http://159.100.223.157/screens/IMG_0712.JPG
http://159.100.223.157/screens/IMG_0713.JPG
here is the code
<div role="main">
<div id="SearchRides" data-role="page" class="page innerPage">
<div class="ui-header ui-bar-a ui-header-fixed header" data-position="fixed">
<h1 aria-level="1" role="heading" class="ui-title">Search</h1>
</div>
<!--end header-->
<div class="projects ui-content content">
<form method="post" action="#">
<div class="ui-field-contain">
<label for="txtFrom" style="text-align: center">Source</label>
<input type="text" name="txtFrom" id="txtFrom" placeholder="To">
</div>
</form>
</div>
<!--end body-->
<div data-theme="a" class="footer" data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li> </li>
</ul>
</div>
<!--end footer-->
</div>
</div></div>
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 am having a problem with nested popups with v1.4.0.RC.1. It works in v1.3.2. I have a footer, which has a button, which opens a popup, which contains a listview, and one of the listitems opens a popup. Again, in v1.3.2, this works as expected... but not with v1.4.0.RC.1. I understand that v1.4 isn't out yet, but I pose this issue anyway as someone may have some insight that I haven't come up with yet. I have a fiddle for both versions. The code for each is exactly the same. The only difference is that the first fiddle uses the 1.3.2 libraries and the second fiddle uses the v1.4.0 libraries.
Also, I have seen answers linking to a jQM popup page, showing that the page itself indicates that chaining popups isn't allowed. However, that's typically a v1.2.0 of jQM. The popup demo in v1.3.2 doesn't indicate that restriction, and is supported by the fact that it does in fact work (see fiddle below).
That being said, if anybody has any guidance or information, I'd really appreciate it. I've poured through the limited 1.4.0 documentation and the interwebs and the only thing I can come up with is doing a setTimeout within the popupafterclose event to open another popup. That seems like a sloppy hack to me, and I'd like to avoid doing that if at all possible.
Anyway, below is code and fiddles for 1.3.2 and 1.4.0.RC.1.
Thanks!
<div data-role="page" id="pgMain">
<!-- HEADER -->
<div id="hdrMain" data-role="header">
<h1>Popups from popups using jQM-1.3.2</h1>
</div>
<!-- CONTENT -->
<div data-role="content" id="contMain">
With jQM-1.3.2, the menu button down there opens a popup window as a menu. In the popup window is a listview, and the "Delete" listitem calls another popup to confirm deletion.<br/><br/>With jQM-1.4.0.RC.1, the second popup doesn't work.
</div>
<!-- FOOTER -->
<div id="ftrMain" data-role="footer" data-position="fixed" data-tap-toggle="false">
<div class="ui-btn-inline ui-shadow" style="margin-left:5px; margin-right:2px;" data-role="controlgroup" data-type="horizontal" data-mini="true">
Menu <--- Click this...
</div>
</div>
<!-- POPUP: SELECTED ITEMS MENU -->
<div id="mnuSelectedItemsMenu" data-role="popup">
<ul id="lvItemMenu" style="min-width: 210px;" data-role="listview" data-inset="true" data-icon="">
<li>Edit</li>
<li>Delete <--- ...then this</li>
<li data-role="list-divider" style="padding:2px 0px 0px 0px;"></li>
<li>Select All</li>
</ul>
</div>
<!-- POPUP: CONFIRM DELETE DIALOG -->
<div id="popupConfirmDelete" class="ui-corner-all" data-role="popup" data-overlay-theme="a" data-dismissible="false">
<div class="ui-corner-top" data-role="header">
<h1>Delete Transaction</h1>
</div>
<div class="ui-corner-bottom ui-content" data-role="content" >
<h3 class="ui-title">Are you sure you want to delete these transactions?</h3>
<p>This action cannot be undone!</p>
<div class="ui-grid-a point6em" style="margin-top:10px;">
<div class="ui-block-a">
<a id="btnDoDeleteTransactions" data-role="button" data-mini="true">Delete</a>
</div>
<div class="ui-block-b point6em">
<a data-role="button" data-rel="back" data-mini="true">Cancel</a>
</div>
</div>
</div>
</div>
fiddle for v1.3.2 above
<div data-role="page" id="pgMain">
<!-- HEADER -->
<div id="hdrMain" data-role="header">
<h1>Popups from popups using jQM-1.4.0.RC.1</h1>
</div>
<!-- CONTENT -->
<div data-role="content" id="contMain">
With jQM-1.3.2, the menu button down there opens a popup window as a menu. In the popup window is a listview, and the "Delete" listitem calls another popup to confirm deletion.<br/><br/>With jQM-1.4.0.RC.1, the second popup doesn't work.
</div>
<!-- FOOTER -->
<div id="ftrMain" data-role="footer" data-position="fixed" data-tap-toggle="false">
<div class="ui-btn-inline ui-shadow" style="margin-left:5px; margin-right:2px;" data-role="controlgroup" data-type="horizontal" data-mini="true">
Menu <--- Click this...
</div>
</div>
<!-- POPUP: SELECTED ITEMS MENU -->
<div id="mnuSelectedItemsMenu" data-role="popup">
<ul id="lvItemMenu" style="min-width: 210px;" data-role="listview" data-inset="true" data-icon="">
<li>Edit</li>
<li>Delete <--- ...then this</li>
<li data-role="list-divider" style="padding:2px 0px 0px 0px;"></li>
<li>Select All</li>
</ul>
</div>
<!-- POPUP: CONFIRM DELETE DIALOG -->
<div id="popupConfirmDelete" class="ui-corner-all" data-role="popup" data-overlay-theme="a" data-dismissible="false">
<div class="ui-corner-top" data-role="header">
<h1>Delete Transaction</h1>
</div>
<div class="ui-corner-bottom ui-content" data-role="content" >
<h3 class="ui-title">Are you sure you want to delete these transactions?</h3>
<p>This action cannot be undone!</p>
<div class="ui-grid-a point6em" style="margin-top:10px;">
<div class="ui-block-a">
<a id="btnDoDeleteTransactions" data-role="button" data-mini="true">Delete</a>
</div>
<div class="ui-block-b point6em">
<a data-role="button" data-rel="back" data-mini="true">Cancel</a>
</div>
</div>
</div>
</div>
fiddle for v1.4.0.RC.1 above
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