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 :-)
Related
I am using jquery mobile and wanted a overlay in to be visible when ever i need. I have this at first in my html
<body>
<div id="overlay"></div>
</body>
(if you are wondering about other pages then they are added afterwards)
but when jquery mobile 1.4.2 initializes it turns my div in to a page like so:
<div data-role="page" data-url="/" tabindex="0" class="ui-page ui-page-theme-a" style="min-height: 640px;">
<div id="overlay">
</div>
</div>
How can i make Jquery not touch this element?
Let me guess you are using it to show a splash screen.
jQuery Mobile requires at least one page to exist during initialization.
To solve this problem add one dummy jQuery Mobile page and just set it CSS to display: none; something like this:
<body>
<div id="overlay"></div>
<div data-role="page" style="display: none;">
<div/>
</body>
I seems it only does it if there are no pages initially in the body. but if you add a blank page every works fine:
<div data-role="page"></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 the following header in my JQM page to have popup menu when tapping option.
<div data-role="header" data-theme="a" data-position="fixed">
<div><img src="custom-icon.png" class="ui-btn-left" width="32" height="32"/></div>
<h1>HOME</h1>
Option
<div data-role="popup" id="main-menu">
<ul data-role="listview" data-inset="true" data-theme="a">
<li>MENU 1
<li>MENU 2</li>
</ul>
</div>
</div>
It works but it sometimes need to be tapped many times in my android device. The JQM page was used in android-webview. How to solve tapping issue?
THanks
In my suggestion you have to stop event bubbling. In jQuery you can do this by:
e.stopPropagation();
So in my suggestion write a handler function for the click event for menu link popup.
Make this change in the JQM webview page
Option
And better bind your link in the .ready(), you should try to avoid Javascript code in the DOM for better maintainability.
$('#my_link').live('tap',function(event) {
event.stopPropagation();
$('#main-menu').popup('open');
});
EDIT:
$('#YOUR_PAGE_ID').live( 'pageinit',function(event){
$('#my_link').live('tap',function(event) {
event.stopPropagation();
$('#main-menu').popup('open');
});
});
I have got a jQueryMobile page that adds some white space after the content. How do I remove it? I know I have not got a footer in the page, is that the reason? Any advice much appreciated.
<div data-role="page" id="home">
<div data-role="header">
<h1></h1>
</div>
<div data-role="content">
<div class="message"></div>
<a data-role="none" href="" id="btn_loginEmail" class="button"></a>
<a data-role="none" href="" id="btn_loginFacebook" class="button"></a>
</div>
</div>
What do you mean white space??
I've tried your page and it works just fine
Check out this fiddle
You mean the space between header bar and first element inside content (in above case the button)?
Then you can do style as below
.ui-content{
margin-top: -23px;
}
Check out this fiddle
if u are using jqm 1.2.0. In min.css, change min-height to 400px in ui-page{min-height:420px}. Hope it works for you!!
I would like to add a button to our Jquery Mobile webapp. I added a screenshot from the FourSquare App which show the upperright 'checkin' button and icon, we would love to implement in our HEADER..
http://www.iclarified.com/images/news/26011/99138/99138.png
We can;t figure out how to imlement this. We now the Navbar is able to get us a button style like the FSQ button, but we would ONLY have one of this button's in our Header, aligned right.
Has anybody already designed something like this and could help us?
Yes it can be done, here is a quick example:
<body>
<div data-role="page">
<div data-role="header">
<h1>Foursquare Like</h1>
Checkin
</div>
<div data-role="content">
<p>This is a test page</p>
</div>
</div>
</body>
See more here: http://jquerymobile.com/demos/1.2.0/docs/toolbars/docs-headers.html
jsFiddle Example: http://jsfiddle.net/Twisty/xWzFt/