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
Related
I want to add show and hide button for fixed footer on jquerymobile.
I tried to add an close button but i did not do.
<div data-role="footer" data-position="fixed"></div>
Thanks...
I found the solution. I made a Collapsible Block. Like this:
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
At the moment my mobile app looks similar to the one on the link below:
http://jsfiddle.net/TM6Dt/
with the following code:
<body>
<div data-role="page">
<div data-role="header">
<h1 data-inline="true">Demo Page</h1>
Mail
Settings
</div>
<div data-role="content" class="content">
<p>Demo Page</p>
</div>
</div>
</body>
What I'd like to do is have both of the circular buttons on the right side of the header bar. I've tried putting them in a controlgroup div but for some reason this changes them so they are no longer circular - I get square buttons with the icons in the middle. What's worse is they are not even aligned properly! You can see what I mean here:
http://jsfiddle.net/Gd8ZB/
and the code:
<body>
<div data-role="page">
<div data-role="header">
<h1 data-inline="true">Demo Page</h1>
<div data-role="controlgroup" class="ui-btn-right">
Mail
Settings
</div>
</div>
<div data-role="content" class="content">
<p>Demo Page</p>
</div>
</div>
</body>
How do I get around this problem? Any help would be appreciated!
I've done that as follows:
<div class="ui-btn-right">
Mail
Settings
</div>
Fiddle
http://jsfiddle.net/TM6Dt/1/
one way to do it is to change position of the first button in first example and move it to the right with following css
style="right: 40px; left: initial;"
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
I'm having a very strange issue...
When I click in a button that is disabled, the header scrolls up... (demo below)
Why this happen?
Demo
Here is the code:
<div data-role="page" data-theme="b" #TempData["DataUrl"]>
<div data-role="header" data-position="fixed">
MyApp
</div>
<div data-role="content">
<div style="height:300px">Content</div>
<div class="controlGroupButtons" data-role="controlgroup">
<a class="Button1" data-role="button">Marcar</a>
<a class="Button2" data-role="button">Desmarcar</a>
</div>
</div>
$(".Button1, .Button2").buttonMarkup().addClass("ui-disabled");
Just add data-tap-toggle="false" to the header div and the problem will vanish! Because when the buttons are disabled, the click will be trigger tap event. Once Tap event is triggered, it will show/hide header.
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>