I am trying to use jquery mobile panels and it hides the slider when I open the panel, it removes/hides the slider. Adding rel="external" to the button for panel doesn't do anything as it is not a link to physical page.
Here is an example given in fiddle:
http://jsfiddle.net/dhavaljani/zZKhT/
Html for panel
<div data-role="panel" id="rightpanel2" data-position="right" data-display="push" data-theme="d" data-content-theme="d">`
<ul data-role="listview" data-theme="d" data-icon="false">
<li>Home</li>
<li>Services</li>
<li>Case Studies</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
123-456-7890
</div>
This is a bug in jQuery Mobile 1.4, as panel when first opened, it wraps it's siblings in a <div class="ui-panel-wrapper"> other than header and footer.
This problem isn't present in previous versions of jQuery Mobile.
<section class="slider ui-panel-wrapper">
<!-- elements -->
</section>
Demo
Related
Can anyone please help me?
I'm trying to create a menu inside an external jquery mobile panel. This is JQM 1.4.0 that supports external panels.
I have a collapsible listview inside the external panel. There is some kind of inset applied that I don't seem to be able to get rid off for submenu3 and inside it as well.
Please check out my fiddle: http://jsfiddle.net/UHYz9/2/
Here's the html:
<div data-role="page" class="jqm-demos" data-quicklinks="true">
<div data-role="header">
<h1>External panels</h1>
</div>
<div role="main" class="ui-content jqm-content jqm-fullwidth">
Open External Panel
</div>
</div>
<div data-role="panel" id="externalpanel" data-position="left" data-display="reveal" data-theme="a">
<h3>Menu</h3>
<ul data-role="listview" style="padding-right: 8px">
<li>Submenu 1</li>
<li>Submenu 2</li>
<li data-role="collapsible" data-iconpos="right" data-inset="false">
<h2>Submenu 3</h2>
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>Submenu 4</li>
<li>Submenu 5</li>
</ul>
</div>
Here's the js:
$(function() {
$("body>[data-role='panel']").panel();
$("#externalpanel ul").listview();
$("#externalpanel").trigger("create");
});
For this to work, please include the following css and js links:
http://demos.jquerymobile.com/1.4.0/css/themes/default/jquery.mobile-1.4.0.min.css
http://demos.jquerymobile.com/1.4.0/js/jquery.js
http://demos.jquerymobile.com/1.4.0/js/jquery.mobile-1.4.0.min.js
Thanks a lot!
You need to wrap contents on panel in <div data-role="content"> or `.
To enhance content of panel or any other div, use .enhanceWithin().
$(function () {
$("body>[data-role='panel']").panel().enhanceWithin();
});
Demo
I created a popup with a listview inside. I also applied a list filter. However, it is not correctly formatted. Is there any way I can push it up a bit (like a list divider would be)?
EDIT: the code
<div data-role="content">
<div data-role="popup" id="popupMenu" data-theme="d">
<ul data-role="listview" data-inset="true" id="symptomslist" style="min-width:210px;" data-theme="d" data-filter="true">
</ul>
</div>
</div>
To get best results of jQuery Mobile styles of contents inside page, dialog, panel or popup, always place them inside data-role="content".
<div data-role="popup" id="popupMenu" data-theme="d">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="d" data-filter="true">
<!-- list items -->
</ul>
</div>
</div>
Demo
I am Using cordova-2.1.0, JQueryMobile-1.3.0 for iOS app. Some of the pages in my app has very small content still that pages scrolls. I am testing it on iOS 6. How to stop scrolling of the pages having small content. I dont want to use the preventDefault.
It's just looks normal when I tried in the fiddle http://jsfiddle.net/JEqKh/
this is the HTML I used. Try import the libraries in the <head></head> tag
<div data-role="page" id="menu">
<div data-theme="b" data-role="header" data-position="fixed">
<h3>Header</h3>
</div>
<div data-role="content">
<ul data-role="listview" id="mainMenu">
<li style="height:50px"><img src="a.png" class="ui-li-icon"/>Menu1
</li>
<li style="height:50px"><img src="b.jpg" class="ui-li-icon"/>Menu2
</li>
</ul>
</div>
</div>
I am working on a site that uses Bootstrap for desktop and jQuery Mobile for mobile devices. I am running into a problem with the HTML structure for tabs in Bootstrap vs. pages in jQuery Mobile. Essentially the jQuery Mobile pages end up being nested if I use Bootstrap's HTML (as seen below). When the jQuery Mobile data-role="page" tags are nested it does not seem to work. Any ideas?
<div class="tabbable" data-role="page"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1" data-role="page">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2" data-role="page">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
The solution I used to solve this problem was a jquery mobile plugin called subpage.
I changed the nested pages to subpages and it worked.
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