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.
Related
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 m creat a JQuery Mobile Page with a Tabbar.
If i click on the content the Footer/Header disapears, how can i disbale that?
At the moment both Bars are fixed.
A quick sample would be perfect.
There are a couple of ways to accomplish this with JQM 1.1.0
The first and easiest was is to set data-tap-toggle="false" in your fixed toolbar
<div data-role="header" data-position="fixed" data-tap-toggle="false">
The second way I like because it allows you to disable this in every page and every fixed toolbar. This way you won't drive yourself mad typing data-tap-toggle="false" over and over.
$(document).on('pageinit','[data-role=page]', function(){
$('[data-position=fixed]').fixedtoolbar({ tapToggle:false});
});
The following will disable the tap toggle in JQM 1.0.1
$(document).delegate('[data-role=page]','pageinit', function(){
$.mobile.fixedToolbars.setTouchToggleEnabled(false);
});
jQuery mobile button renders gibberish for filter button after clicking on pagination. Click event that shows map also stops working after changing the page.
Should I call refresh page?
Sandbox link
Markup is as following:
<div data-role="header" data-theme="b" id="rest-header">
<div class="ui-grid-b">
<div class="ui-block-a">Filter</div>
<div class="ui-block-b"><input type="search" name="search"value="" data-theme="d" /></div>
<div class="ui-block-c">Map</div>
</div>
</div><!-- /header -->
First I would suggest using jQuery 1.6.4 as jQM only supports this version for 1.0
Your problem is you're adding a back button when navigating to another page, this is causing an overlap of both the filter and back button.
Removing the data-add-back-btn="true" attribute should solve the issue
For map button you should use live event binding or delegation so that it works for dynamic content. Instead of
$( "#map-btn" ).bind( "click", function(event, ui) { ... });
try
$(document).on('click', '#map-btn', function() {
// ...
})
For filter button I can see the Back button under the Filter one, so you want to get rid of the Back button since you don't need it right there. You can remove data-add-back-btn="true" attribute.
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 -->