Here is my footer:
<div data-role="footer" data-id="footer" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Home</li>
<li>Nearby</li>
<li>Search</li>
</ul>
</div>
</div>
And here is my custom icon using a mask image:
.ui-icon-nearby {-webkit-mask-image: url(../i/nearby.png); -moz-mask-image: url(../i/nearby.png); background-color: #ffffff}
I get a white square on the Nearby item in the navbar, no icon...
BUT if I add data-visible-on-page-show="false" in the footer div, I see the icon but the footer is not fixed anymore, it goes at the bottom of the page...
Thanks!
Related
I would remove the space between the header and the beginning of the collapsible, I would appreciate if you can help
<div data-role="page">
<div data-role="header">
<h1>Test</h1>
</div>
<div data-role="collapsible-set" data-corners="false">
<div data-role="collapsible">
<h3>Title</h3>
<p>Content</p>
</div>
<div data-role="collapsible">
<h3>Title 2</h3>
<p>Content 2</p>
</div>
</div>
</div>
[Here is a link with a picture. I would remove the space between the header and the beginning of the collapsible][1]
[1]: http://afines.com/foro/space.jpg
"There's a 15px padding .... on the content div"
This appears to have been answered here to some extent. Also, when inspecting the .ui-collapsible-set element using Chrome's Developers tools option I found that there is provision for margin which is set at .5em.
In order to completely remove the space between a header and a collapsible-set the margin requires adjusting using the <style> tag:
.ui-collapsible-set {
margin: 0 0;
}
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'm using:
jquery-1.8.2 and jquery-mobile-1.2.0 (generated with all options checked)
Targeted devices are iPhone 4/4s/5 and iPad.
The current data-role="listview":
Test link
The current code:
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Test</h1>
</div>
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li><a href="index.html">
<img src="pics/paul_jones.jpg" />
<h3>First Element</h3>
<p>First</p>
</a></a>Test
</li>
<li><a href="index.html">
<img src="pics/ray_moore.jpg" />
<h3>Second Element</h3>
<p>Second</p>
</a>Test
</li>
<li><a href="index.html">
<img src="pics/lisa_wong.jpg" />
<h3>Third Element</h3>
<p>Third</p>
</a>Test
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
</pre>
What is the best way to make each item auto-adjust its height to stretch to full screen vertically (I see that the framework handles very well horizontal stretching), so that each row is 33% of the screen in this case, and have the images resize accordingly? Obviously this would have to work when there are four or more items.
In my site main page I would instead like to have three or four "image buttons" that I styled this way.
<b>#button_id .ui-btn-inner</b>
background: url("../img/button_image.png") no-repeat rgba(0, 0, 0, 0.4);
background-size: 100% 100%;
fill the screen vertically autoresizing themselves.
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've a div(phone-no) which need to be fixed and it is just above the footer. When we resize the window, user must be able to see the "phone-no" div. here is the image the blue bar which says "free trial" is the fixed bar and the bar below that is the footer.
When I tried data-position="fixed' on header and footer, it seems to work. but not on this. Any insight?? link to the page
Try put this code in your document ready and it will disable disappearing when clicking and scrolling
$("[data-role=header]").fixedtoolbar({ tapToggle: false });
$("[data-role=footer]").fixedtoolbar({ tapToggle: false });
Best of luck
Live Example:
http://jsfiddle.net/zD5RU/4/
http://jsfiddle.net/zD5RU/8/ (more content)
HTML:
<div data-role="page" data-theme="b" id="jqm-home">
<div data-role="header" data-position="fixed">
<h1>Header</h1>
Home
</div>
<div data-role="content">
<p>Content</p>
</div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li></li>
<li></li>
<li>Footer</li>
<li></li>
<li>(888)444-8901</li>
</ul>
</div>
</div>
</div>