I have an accordion in jquery mobile that is being populated through json data. In order to keep the styling, I call $( ".folders" ).collapsibleset.( "refresh" ); after all the data has been appended and it works, but only for the main folders. In my code I have made subfolders and those do not receive the styling changes. Here is my folder code
<div class="folders" data-role="collapsible-set" data-corners="false" data-theme="c" data-content-theme="d">
<div data-role="collapsible">
<h3>Main Folder</h3>
<div data-role="collapsible">
<h3>Sub Folder</h3>
<p>
Subtext
</p>
</div>
<div data-role="collapsible">
<h3>Folder</h3>
<p>Text</p>
</div>
<div data-role="collapsible">
<h3>Folder</h3>
<p>Text</p>
</div>
</div>
</div>
Related
I am trying to use the panel feature from JQuery mobile, and after following some tutorials I cannot make the panel to link the pages within my app to work, and it just stays at the first page The animation works fine tho´. Any suggesting of how to fix this?
This is my code:
<body>
<!--Activity Feed Page-->
<div id="activityFeed" data-role="page">
<!--Panel-->
<div data-role="panel" id="myPanel" data-display="reveal" data-theme="a" class="ui-response">
<div data-role="listview" class="nav-seacrh">
<li>Activity</li>
<li>Messages</li>
<li>Profile</li>
<li>Settings</li>
<li>Log out</li>
</div>
</div> <!--ends panel-->
<div data-role="header">
<h1>Activity Feed</h1>
Panel
</div>
<p>Activity Feed Page</p>
</div>
<!--End Feed Page-->
<!--Messages Page-->
<div id="messagesPage"data-role="page">
<div data-role="header">
<h1>Messages</h1>
Panel
</div>
<p>Messages Page</p>
</div>
<!--Ends Messages Page-->
<!--Profile Page-->
<div id="profilePage"data-role="page">
<div data-role="header">
<h1>Profile</h1>
Panel
</div>
<div>
<p>Profile Page</p>
</div>
</div>
<!--Ends Settings Page-->
<div id="settingsPage"data-role="page">
<div data-role="header">
<h1>Settings Feed</h1>
Panel
</div>
<div>
<p>Settings Page</p>
</div>
</div>
<!--Ends Settings Page-->
The data-rel="close" inside your page links is causing JQM to override their click handlers to close the panel.
Remove that and it should navigate to page mentioned in href.
How to collapse all the nested collapsible-set and collapsible elements in nested collapsible set in Jquery Mobile?
Below is the code in the JSFiddle:
http://jsfiddle.net/ycP8y/
<body>
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>
<div class="ui-btn-up-c ui-btn-corner-all custom-count-pos">47</div>
Test</h1>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>
<div class="ui-btn-up-c ui-btn-corner-all custom-count-pos">47</div>
Test</h1>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>
<div class="ui-btn-up-c ui-btn-corner-all custom-count-pos">47</div>
Test</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Assuming you are using jQM 1.2 as in your fiddle, you can just call trigger("collapse") on all collapsibles (http://demos.jquerymobile.com/1.2.1/docs/content/content-collapsible-methods.html ):
$(document).on("pageinit", function(){
$("#btnCollapse").on("click", function(){
$("[data-role=collapsible]").trigger("collapse");
});
});
Updated FIDDLE
I want two scrollable div side by side, but the following html is generating scrollbar for first div only with class "ui-block-a".
<div class="ui-grid-b" style="height:100%;margin-bottom:40px;">
<div data-iscroll="" data-role="content" class="ui-block-a" style="padding-left:40px; padding-right:40px;width:29.95%; max-height:900px;">
<div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed="false">
<h3>Heading 1st Div</h3>
Data in 1st Div
</div>
</div>
<div data-iscroll='{"resizeWrapper" : false}' class="ui-block-b" style="width:68%; padding-left:4%; padding-right:2%; max-height:900px;">
<div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed="false">
<h3>Heading 2nd Div</h3>
Data in 2nd Div
</div>
</div>
</div>
I'm getting white space at bottom of the page in iPad and I use jQuery mobile beta2. I'm splitting the UI as primary and secondary page.
when I move from first page to second page I'm getting white space in bottom of the iPad. Can any one help me?
Thanks in advance.
code:
<div data-role="page" class="type-interior" id="homePage">
<div data-role="header"><label> header </label></div>
<div data-role="content" id="contentHomePage">
<div class="content-primary">
<div data-role="fieldcontain" data-inset="true" id="search">
<div style="width:40em;"><select tabindex="2" name="select-choice-1" class="ui-select" id="searchIn" data-native-menu="true"></select>
</div>
</div>
</div>
<div class="content-secondary" >
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<ul data-role="listview" id="mainMenuListView" data-theme="a" data-dividertheme="a"></ul>
</div>
</div>
</div>
</div> </div>
//page:2
<div data-role="page" class="type-interior" id="resultPage">
<div data-role="header"><label> header </label></div>
<div data-role="content" id="resultPage">
<div class="content-primary">
<div data-role="fieldcontain" data-inset="true" id="search">
<div style="width:40em;"><select tabindex="2" name="select-choice-1" class="ui-select" id="searchIn" data-native-menu="true"></select>
</div>
</div>
</div>
<div class="content-secondary" >
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<ul data-role="listview" id="mainMenuListView" data-theme="a" data-dividertheme="a"></ul>
</div>
</div>
</div>
</div> </div>
Her I found solution for this problem. I set content height.
.ui-content {
min-height: 775px;
}
It's because your 'content-primary' does not take too much space. You can solve it in few ways, but I guess that the most logic one will be to use media queries (CSS) and to set the div dimensions in your CSS file. For more info: http://jquerymobile.com/demos/1.0b3/docs/api/mediahelpers.html
BTW, You might want to use jQuery mobile Beta 3
When creating a jQuery Mobile Accordion, how do I get a section of the accordion to open when a button is clicked?
When the user clicks the search button, I want to load the results into a list in the second panel, collapse the first and expand the second.
<div data-role="collapsible-set">
<div id="filterContainer" data-role="collapsible" data-collapsed="false">
<h3>Filters</h3>
<p>controls to pick options</p>
Search
</div>
<div id="resultsContainer" data-role="collapsible">
<h3>Results</h3>
<p>list of results</p>
</div>
<div>
Live Example:
http://jsfiddle.net/h2pPz/19/
HTML:
<div data-role="page" id="home" class="type-home">
<div data-role="content">
<div data-role="collapsible-set">
<div id="filterContainer" data-role="collapsible" data-collapsed="false">
<h3>Filters</h3>
<p>controls to pick options</p>
<!-- Either button syntax works -->
<!-- Search -->
<input type="button" value="Search" id="search"/>
</div>
<div id="resultsContainer" data-role="collapsible" data-collapsed="true">
<h3>Results</h3>
<p>list of results</p>
</div>
<div>
</div>
</div>
JS:
$('#search').click(function() {
$('#resultsContainer').trigger('expand');
});