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');
});
});
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 want to create three loading spinners in my Jquery mobile application that will be
showed on my page(in different places) for a while. In my example when I call function1() I want to have loading spinners in #main-menu div,when I call function2() I want to have loading spinner in .news div and when I call function3() I want to have loading spinner in .some-class div. Here is example of my HTML page:
<html>
<head>
<script>
function1();
function2();
function3();
</script>
</head>
<body>
<div id="container">
<div data-role="page" id="home">
<div data-theme="a" data-role="header">
<div id="main-menu" >
</div>
</div>
<div data-role="content">
<div class="news">
</div>
<div class="some-class">
</div>
</div>
<div data-theme="a" data-role="footer">
</div>
</div>
</div>
</body>
If I use $.mobile.loading('show') it will only show one loading spinner in the middle of page. Is there any way
to create more than one loading spinner? I would really appreciate any tip.
If anybody needs here is how I solved this problem: I've used plugin spin.js
http://fgnass.github.io/spin.js/
It's pretty easy to use and you can have multiple loading spinners.
jQuery Mobile doesn't provide you a way to show 3 loaders at a time. You can utilise jQuery Mobile to show a loader in the middle.
I think you are trying to emulate Android UI with loader on ActionBar etc. What you can do is dynamically show and hide a gif loader image in the divs.
User jquery .css method to add and remove background gif to the div
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 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 :-)
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.