I am seeing some odd behavior with a JQM listview in a popup on Safari on an iPad. It's an iPad 2 with iOS 8.2.
The listview has data-filter="true". When a listitem is touched the item isn't highlighted as selected and focus is immediately sent back to the filter text box and the listview scrolls back to the top. You can see a demo of the strange behavior here. This is the only real code on the page:
Show Job Popup
<div data-role="popup" id="job-popup" data-theme="a" data-overlay-theme="a" class="ui-corner-all ui-content" data-dismissible="false">
<ul data-role="listview" data-theme="a" data-filter="true" data-filter-placeholder="Find a job" data-inset="true" style="min-width:210px;">
<li data-role="list-divider">Choose a job</li>
<li>1001 Job 1</li>
<li>1002 Job 2</li>
<li>1003 Job 3</li>
<li>1001 Job 4</li>
<li>1002 Job 5</li>
<li>1003 Job 6</li>
<li>1001 Job 7</li>
<li>1002 Job 8</li>
<li>1003 Job 9</li>
</ul>
<div data-role="navbar" data-iconpos="left">
<ul>
<li>Select Job</li>
<li>Cancel</li>
</ul>
</div><!-- /navbar -->
</div>
On other devices the listitem is highlighted as selected and focus is not placed back onto the filter text box. My question is why is Safari behaving in this manner and what can I do to fix it.
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 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 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 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 -->