Does anyone know if JQuery Mobile does Tabs that stick to the bottom like the iphone native apps?
Thanks
Yes, they have tabs that stay fixed to the bottom:
http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/footer-persist-a.html
They behave slightly differently in that they disappear while scrolling and then reappear after the scrolling is finished.
You can also watch the navbar section for more examples:
http://jquerymobile.com/test/docs/toolbars/docs-navbar.html
Example code:
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div><!-- /navbar -->
Related
[Using jQuery Mobile version 1.3.2]
I'm working on a jQM project and am running into a bit of a dilemma here. For pages that don't have much content (such as a home page with only 3 buttons on it), and when the footer data-position is set to "inline", there is a big ugly gap below the footer...
Of course, if I set the footer's data-position to "fixed", then it looks good IF viewed in portrait mode...
BUT... when it's viewed in landscape mode, it looks bad, as there is barely any room for the content area, due to the header and footer taking up most of the visible area...
So, my question is... is there a good, working solution for getting the footer to be fixed to the bottom in situations where the content area does not fill up the entire screen, and then have the footer position automatically switch to "inline" for situations where the content area DOES fill up (at least) the entire screen?
OR... alternately... is it possible to have the footer position "fixed" when the device is in portrait mode, and then switch the footer position to "inline" when the device is in landscape mode?
I've spent a few hours researching this online today, but I haven't found any promising solutions to this problem so far (I found a handful of articles / forum posts that addressed the topic, but they were from 2-3 years ago, and the few proposed "solutions" looked like they might create more problems than they solve).
I'm not looking for a solution that is 100% cross-browser (because I know that doesn't exist), but as long as I can find a solution that works well on mobile iOS and mobile Android, I'd be happy.
I would imagine that this would be a fairly popular issue, so I'm a bit surprised that I haven't come across a good solution so far (maybe I just haven't looked in the right place yet).
So.... any ideas?
Thanks!
You can listen to the resize and orientationchange event and then fix/unfix the footer depending on available space.
Here is a DEMO
Using script, measure the header height + footer height + content height and compare it to the total window height (viewport). Then add or remove the ui-footer-fixed class on the footer div:
$(document).on("pagebeforeshow", "#page1", function(){
$(window).on("orientationchange resize", function(){
FooterPositionFixed()
});
setTimeout(FooterPositionFixed, 300);
});
function FooterPositionFixed(){
scroll(0, 0);
var totHeight = $(window).height();
var headerHeight = $("#jqmHeader:visible").outerHeight();
var footerHeight = $("#jqmFooter:visible").outerHeight();
var contentHeight = $("#jqmContent:visible").outerHeight();
if (totHeight > (headerHeight + footerHeight + contentHeight)){
if (!$("#jqmFooter").hasClass("ui-footer-fixed")){
$("#jqmFooter").addClass("ui-footer-fixed");
}
} else {
if ($("#jqmFooter").hasClass("ui-footer-fixed")){
$("#jqmFooter").removeClass("ui-footer-fixed");
}
}
}
Here is the HTML for this script:
<div data-role="page" id="page1">
<div data-role="header" id="jqmHeader">
<h1>My page</h1>
</div>
<div data-role="content" id="jqmContent">
<ul data-role="listview">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
<div data-role="footer" data-position="fixed" id="jqmFooter">
<h2><a>Go to website</a><br />Copyright<br /> business name</h2>
</div>
</div>
I have a jqm/phonegap application which uses a fixed header and footer.
When I focus a textbox the footer gets removed and the keyboard pops up.
Is it possible to stop the footer from getting removed on focus?
Edit:
I've read that the screen width sets the hide or show the toolbar(for tablet support). Is it possible to always set the header and foother. No matter what screen size.
This is an example of a page I use(I use ajax paging):
<html>
<body>
<div data-role="page" id="myPage" data-theme="a">
<div data-role="header" data-tap-toggle="false" data-theme="a" data-position="fixed">
<h1 id="myHeader"></h1>
</div>
<div data-role="content">
<ul data-role="listview" id="lstvw_Items" data-filter-theme="a" data-filter="true"></ul>
</div>
<div data-role="footer" data-tap-toggle="false" data-position="fixed">
<div data-role="navbar">
<ul>
<li></li>
<li></li>
<li></label></li>
<li><label></label></li>
</ul>
</div>
</div>
</div>
</body>
</html>
The listview get's filled with ajax and can be filtered with the data-filter. If I press the datafilter txtbox the footer gets removed and when I close the keyboard the footer is at the bottem of the page.(Outside the screen).
Also when there's a field in focus and a link is pressed the page flickers and when theres no focus it doesn't happen.
First I was using iSCroll to keep the fixed headers and footers but this was creating alot of other issues.(With keyboard input,performance,...)
Extra info:
I'm using
jqm 1.3.1
phonegap 2.9.0
testing at the moment on android 2.3.x and higher
Edit:
I have figured out why the focus is never lost when press enter. The application blocks the enter key behaviour to prevent form submitting.
Like this:
document.onkeypress = stopRKey;
function stopRKey(evt){
var evt = (evt) ? evt: ((event) ? event: null);
var node = (evt.target) ? evt.target:((evt.srcElement) ? evt.srcElement:null);
if((evt.keyCode == 13) && (node.type=='text')){node.blur();return false;}
}
I'm now using node.blur(); in the if cause of this function. But this still causes flicker.
I upgraded to jqm 1.3.2 and modified the code for the hideduringfocus.
line 9905:
$.widget( "mobile.fixedtoolbar", $.mobile.widget, {
options: {
visibleOnPageShow: true,
disablePageZoom: true,
transition: "none", //can be none, fade, slide (slide maps to slideup or slidedown)
fullscreen: false,
tapToggle: false,
tapToggleBlacklist: "a, button, input, select, textarea, .ui-header-fixed, .ui-footer-fixed, .ui-popup, .ui-panel, .ui-panel-dismiss-open",
hideDuringFocus: "",...
This seems to work pretty good on android and the bar has stopped flickering. If you know a better answer that doesn't require jquery modifications please post it!
I have an issue with Jquery mobile persistent navbar. I am developing a mobile app using phonegap to deploy on iOS and Android. I have a navbar to navigate from one page to another. (footer/navbar fixed).
Example on: http://jquerymobile.com/demos/1.2.0/docs/toolbars/footer-persist-a.html
The navigation works, the bar persists when rendered in a browser such as chrome or safari. But when I upload the app to the Android emulator or iOS emulator, clicking a link from the navbar makes the whole screen go white for a sec and then re-appears. (Kind of a flicker)
Can someone help with this?
Here's my code for the footer: (a.html,b.html... are the name of my pages)
<div data-role="footer" data-id="foo1" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar">
<ul>
<li>Info</li>
<li><a href="b.html" data-prefetch rel="external" >Friends</a></li>
<li>Albums</li>
<li>Emails</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
Thank you !
I figured it out. It's a combination of what you said and what I had.
So to stop the Jquery mobile footer from flickering when you upload to Android or iOS, you need to set the following properties in your div:
page1.html:
<div data-position="fixed" data-tap-toggle="false" data-role="footer" data-id="f1">
Page 1 NAV
Page 2 NAV
</div>
page2.html
<div data-position="fixed" data-tap-toggle="false" data-role="footer" data-id="f1">
Page 1 NAV
Page 2 NAV
</div>
The data-id="f1" has to match in both pages so that jquery mobile knows that this is the same footer that was on the previous page therefore it won't render it again.
Let me know if you need help with this.
Regards,
Tony
Same problem here (I was trying to fix it for over 3 hours with no luck trying lots of stuff I found on the web but no luck).
If you remove the entire footer and add a button in the content area the transition works like a charm all of a sudden. So one workaround would be to fake the navbar via buttons from the content area you place at the bottom of the page... Not very pretty though.
<div data-role="content">
<h1>
Page Nav and Dialog Example
</h1>
<a data-role="button" href="index2.html">Page Navigation</a></div>
I'm using this with a custom-scripting.js:
$(document).bind("mobileinit", function(){
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
$.mobile.useFastClick = true;});
Referencing it via:
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script src="custom-scripting.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.js"></script>
Maybe anyone else found a solution for using navbar without flickering?
Without using the navbar in the footer it stops flickering (tested on iPhone4 iOS5). So you can use the footer but don't use navbar inside it :-)
But attention: If you use data-position="fixed" it will start to flicker again...
<div data-role="footer">
<a data-role="button" href="#">Main</a>
<a data-role="button" href="favorites.html">Favorites</a>
<a data-role="button" href="more.html">More</a>
</div>
Hope it helps :-)
I created a carousel with swipe.js , it works fine in iOS4 and iOS5. But in iOS6, without acceleration of hardware, when we swipe, there is a lag that can not be accepted.
I have tried to create a carousel without jquery mobile, the performance is really great, but when we use JQM and listview (data-role="listview"), it became slower and the more elements in the list, the slower carousel is.
In html code, we have a carousel list and a normal listview, it seems if there are more elements in the listview, the carousel swipe will be slower. and they are two elements independent.
Here is html code
<div id='slider' class='swipe' style='width:250px'>
<ul>
<li style='display:block'><div>1</div></li>
<li style='display:none'><div>2</div></li>
<li style='display:none'><div>3</div></li>
<li style='display:none'><div>4</div></li>
<li style='display:none'><div>5</div></li>
</ul>
</div>
and a normal list view
<section class="nav_univers">
<h1>Toutes les catégories</h1>
<nav>
<ul class="categories" data-role="listview" data-inset="true">
<li>Livre<a class="xt_books"></a></li>
<li>Musique<a class="xt_music"></a></li>
<li>Video<a class="xt_video"></a></li>
<li>Jeux<a class="xt_video_games"></a></li>
<li>AAA<a class="xt_phone_gps"></a></li>
<li>QQQ<a class="xt_computing"></a></li>
<li>DDS<a class="xt_multimedia"</a></li>
<li>VVV<a class="xt_home"></a></li>
<li>GGG<a class="xt_sports"></a></li>
<li>HHH<a class="xt_mode"></a></li>
</ul>
</nav>
</section>
and with Swipejs to create an object
var slider1 = new Swipe(document.getElementById('slider'));
You can find our site here:
www.priceminister.com with user agent set to mobile device.
anyone can help me?
I had the same problem,
Change your css with :
.swipe
{
....
....
/* IOS6 issue*/
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
Does anyone know how to stop a fixed navbar from fading in and out every time I scroll. I'm using jquerymobile 1.0.1 with the following code but I can't stand how the nav bar fades in and out:
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Friends</li>
<li>Albums</li>
<li>Emails</li>
<li>Emails</li>
<li>Emails</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
I don't just want the "toggle" fix. I would like it stay 100% visible 100% of the time. Thoughts?
Well for JQM 1.1 you actually set data-tap-toggle="false" on your footer.
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
...
</div>
I like to do this to disable tapToggle in every page and also every fixed toolbar, header or footer:
$(document).on('pageinit','[data-role=page]', function(){
$('[data-position=fixed]').fixedtoolbar({ tapToggle:false });
});
That way I don't have to keep typing data-tap-toggle="false" over and over.
Then if your using JQM 1.0.1 do:
$('[data-role=page]').live('pageinit', function(){
$.mobile.fixedToolbars.setTouchToggleEnabled(false);
});
This is a common grievance among JQM 1.0.x users. Their developers switched the dynamicly positioned behavior you are referencing in their latest release. As of JQM 1.1 they use true fixed tool bars that do not fade. A stable version of JQM should be out shortly. Until then you could use version 1.1-rc1
There is one solution in older versions of JQM but this only works in ios 5:
$(document).bind("mobileinit", function(){
$.mobile.touchOverflowEnabled = true ;
});
You can add the data-tap-toggle="true" attribute to the data-role="footer" element to disable the tap-to-fade functionality:
tapToggle boolean
default: true
Enable or disable the user's ability to toggle toolbar visibility with
a tap on the screen (or a click, for mouse users). This option is also
exposed as a data attribute: data-tap-toggle=""true""
$("[data-role=header]").fixedtoolbar({ tapToggle: true }); Note: This
behavior was formerly configurable as follows, but as of version 1.1
this syntax is no longer supported:
$.mobile.fixedToolbars .setTouchToggleEnabled(false);
Source: http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/bars-fixed-options.html
This should make your toolbar stay put all the time.