I have an jqm page with an header and an div block who will be always visible. After this block I have added a listview in an new div and enabled iscroll via data-iscroll="".
If it has to scroll, the iscroll-div gets an to high height value. Some Content is not Visible and Scrollable (see Screenshot the Red Circle).
My shorted Code is following:
<div data-role="page" id="pageId">
<div data-role="header" data-position="fixed">
{title}
</div>
<div data-role="content">
<div class="details-header">
<img src="{url}" />
{some text}
</div>
<div data-iscroll="">
<ul data-role="listview">
<li>
<h2>Lorem Ipsum</h2>
<p style="white-space:normal">Lorem ipsum dolor sit amet[..]</p>
</li>
<li>
<h2>Lorem Ipsum</h2>
<p style="white-space:normal">Lorem ipsum dolor sit amet[..]</p>
</li>
[...]
</ul></div>
</div>
</div>
It seems that the min-height is calculated by the device-height - header-height. Is there a way to to recalculate the iscroll divs height?
I have found the solution: data-iscroll-fixed="" for containers outside the data-iscroll element do the job.
Related
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 attempting to have a jQuery Mobile collapsible listview expand upwards instead of the default downwards direction. The listview code I have is:
<div data-role="collapsible" data-mini="true" data-theme="a" data-inset="false" id="mpage1">
<h1>Menu</h1>
<ul data-role="listview" id="lvpage1">
<li data-icon="false">Page2</li>
<li data-icon="false">Page3</li>
<li data-icon="false">Page4</li>
</ul>
</div>
When the Menu h1 tag is clicked, the listview expands downwards. What I'm trying to do is get the menu to expand out the top of the Menu h1 tag, so the Menu h1 tag then appears at the bottom of the listview with all li items above it.
I'm guessing it has something to do with binding the slideUp effect (which normally hides a div) to the expand event but can't figure it out!
Any help would be appreciated.
Try moving the collapsible content before your collapsible element
Does this work?
http://jsfiddle.net/SnRx8/
JS:
$('.ui-collapsible-content').insertBefore('#mpage1');
HTML
<div data-role="page" class="type-home">
<div data-role="content">
<div data-role="collapsible" data-mini="true" data-theme="a" data-inset="false" id="mpage1">
<h1>Menu</h1>
<ul data-role="listview" id="lvpage1">
<li data-icon="false">Page2</li>
<li data-icon="false">Page3</li>
<li data-icon="false">Page4</li>
</ul>
</div></div>
</div>
For a project that I was working on the solution was to set bottom position. If you set absolute position and define the bottom distance, the sections will open upward.
E.g. http://jsfiddle.net/ea4duyfa/
#test-set{
position: absolute;
top: 100px;}
<div data-role="collapsibleset" data-theme="a" data-content-theme="a" id="test-set">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
I am having problems with adding a page to a listview sublist (li)..
I'm doing something like this:
<ul data-role="listview">
<li>Click me
<ul>
<li data-role="page">
<div data-role="header" data-position="fixed">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div>
</li>
</ul>
</li>
</ul>
Is there a better way to do this as I have a few problems with it...
The fixed header and footer does'nt work on IOS 6 (iphone 3GS)
Padding and Margins need setting to 0.
Is this the best way to do this?
Normally a list will contain a sub list with links but I want to sublist to contain the page detail (information page).
Update: Trying this but the link does not link to the page gererated:
$.each(data.id, function(index, value){
output += <li>\
<a href="#mypage">\
<h3 class="h3_title">link title</h3>\
</a>\
</li>\
<div id="mypage" data-role="page">\
<div data-role="header" data-position="fixed">\
<h1>Page Title sub</h1>\
</div>\
<div data-role="content">\
one<br/>\
</div>\
<div data-role="footer" data-position="fixed">\
<h4>Page Footer</h4>\
</div>\
</div>';
...
You could just add the page as a separate div outside the ul tag and make the li a link to it. For example:
<div id="your-current-page" data-role="page">
<ul data-role="listview">
.
.
.
<li>Click me
.
.
.
</ul>
</div>
<div id="your-second-page" data-role="page">
You can put here whatever you'd like
</div>
Anytime I put in a simple footer bar, instead of docking at the bottom of the screen, it floats in the middle, halfway up the screen. My code is as simple as is permitted:
<body id="mainBody" onload="initialize()">
<div id="mainPage" data-role="page" data-theme="e">
<div data-role="header">
<!-- <img src="headerlogo.png" />-->
<br />
<p style="text-align:center">To begin searching for samples, select one of the search methods from the following table.</p>
</div>
<div data-role="content">
<a data-role="button" data-theme="a" href="useMyLocation.html">Use My Location</a>
<a data-role="button" data-theme="a" href="InputCoordinates.html">Input Coordinates</a>
<a data-role="button" data-theme="a" href="selectRegion.html">Select Region</a>
</div>
<div data-role="footer">
<h1>Hey guys!</h1>
</div>
</div>
</body>
This results in a nice header and three nice button links, followed immediately by a footer in the middle of the screen! Why would it appear there instead of attaching to the bottom of the viewport?
try this one
<div data-role="footer" data-position="fixed">
<h1>Hey guys!</h1>
</div>
As of JQM 1.3, you can use the data-position="fixed" in the footer div to achieve this:
<div data-role="footer" class="ui-bar" data-position="fixed">
<h4>I am a fixed footer!!</h4>
</div>
However, the footer seems to be floating on top of the content (like full screen background image) rather than being applied at the bottom of the image.
While #stay_hungry has a solution as well the problem is the content
<div data-role="content">
<a data-role="button" data-theme="a" href="useMyLocation.html">Use My Location</a>
<a data-role="button" data-theme="a" href="InputCoordinates.html">Input Coordinates</a>
<a data-role="button" data-theme="a" href="selectRegion.html">Select Region</a>
</div>
The footer is applied after the content and is not fixed to a position by default, so if your content does not fill the screen your footer will appear in what looks like the middle of the screen.
Example:
http://jsfiddle.net/ZLMQk/
Now add some content to push the footer down the page:
http://jsfiddle.net/ZLMQk/1/
And more content:
http://jsfiddle.net/ZLMQk/2/
Using the Fixed Position:
http://jquerymobile.com/demos/1.1.0/docs/toolbars/bars-fixed.html
Or Persistent option:
http://jquerymobile.com/demos/1.1.0/docs/toolbars/footer-persist-a.html
is also an option that might work for you
I would like to change the data-transition for all links in specific sections. The docs on jQuery Mobile page transitions (http://jquerymobile.com/test/docs/pages/docs-transitions.html) only specify how to set a transition type on a per-element basis by using an attribute.
I would prefer to manage interaction behavior entirely in the javascript layer, rather than the content. Setting an option for $.mobile.changePage() for a group of elements would be ideal, but I have not been able to figure out how to do that.
jQuery Mobile docs attribute example:
I'll pop
If limited to setting data-transition by an attribute, it would be great if I could specify the transition on a parent element ('flip'):
<ul data-transition="flip">
<li>I'll flip</li>
<li>I'll flip too</li>
<li>I'll flip as well</li>
</ul>
I'll use the default transition (eg slide)
Unfortunately this doesn't seem to be how it works.
Currently my best solution is to add the section-specific data-transition attribute to all links within the appropriate section with javascript, but would prefer to handle this in a more performant manner. jQuery .attr solution:
$(document).ready(function(){
$('ul a').attr('data-transition', 'flip');
});
Thank you!
UPDATED: Much easier implementation
Live Link:
http://jsfiddle.net/EwyGL/10/
I used flip instead of pop to show the transition a little more, but just replace flip with pop.
HTML:
<div data-role="page" id="page1">
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-theme="c" data-dividertheme="f">
<li data-role="list-divider">Transition Flip</li>
<li>I'll Flip</li>
<li>I'll Flip too</li>
<li>I'll also Flip</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-theme="c" data-dividertheme="f">
<li data-role="list-divider">Transition Flip</li>
<li>I'll Flip</li>
<li>I'll Flip too</li>
<li>I'll also Flip</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-theme="c" data-dividertheme="f">
<li data-role="list-divider">Transition Flip</li>
<li>I'll Flip</li>
<li>I'll Flip too</li>
<li>I'll also Flip</li>
</ul>
</div>
</div>
</div>
JS:
$('a').each(function() {
$(this).attr('data-transition','flip');
});