I'm using jquery mobile to create a little mobile website.
I have a popup with a link, but this link works only if the popup is not taller than the phone screen. But it works on a computer...
The cross to close the popup is illuminated when I click on my link.
<div id="trouverUnMatch" data-role="page">
<div id="notification" data-role="popup" data-overlay-theme="b">
STUFF HERE
More
</div>
</div>
<div id="allNotifications" data-role="page">
</div>
Edit: It's not a problem with the bottom link, when I click on everywhere inside the popup it go to the popup top and illuminate the close button.
For example if you go to http://demos.jquerymobile.com/1.4.5/popup/ and click on a picture (Photo lightbox), you resize your browser to get only the half of it (in height), then if you click on the picture the close button will be illuminated.
I have replace the link by :
<span class="link" data-link="allNotifications">More</span>
$(document).ready(function() {
$(".link").on('tap', function () {
$.mobile.changePage( "#" + $(this).attr("data-link") );
});
});
It works with iOS but chrome on desktop has the problem now...
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 am using the fastklick plugin for iOS what is very popular on the net for speeding the click event on jquery mobile apps with phonegap on iOS.
The buttons and links are working very well except the back button from jquery.
If I use this:
<div data-role="page" id="test" data-add-back-btn="true">
then if I want to click on the button, there is already the delay from iOS. The button is getting blue at first and after that the page is sliding. How can I prevent this so this button is working fast like the other buttons I am creating with
<button>...</button>?
Is it possible to create my own back button and apply an event to it?
First remove data-add-back-btn="true" then you can try this:
<a class="ui-btn-left" data-icon="arrow-l" href="javascript:history.back(1) " data-theme="a">Back</a>
or this:
<a class="ui-btn-left" data-icon="arrow-l" href="#" data-theme="a" id="back-btn">Back</a>
$('#back-btn').bind('touchstart', function(e) {
$.mobile.changePage("#pageID");
});
Just change #pageID to your real page ID. touchstart event is great for back button if you are just doing it and not a page scrolling.
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/
In jQuery mobile I am using an iframe. When you press the back button (in the app or the browsers back button) the iframe content goes away. Then when you press the back button again the app transitions to the previous page.
The iFrame is getting added to history. I thought this was never supposed to happen.
A jsFiddle has been created that illustrates the puzzle in as simple a form as possible.
In it you will find a fragment of HTML that creates two jQuery Mobile pages. On the first page there is a link to go to the second page. On the second page,there are two back buttons (one on the header and one as a button on the page) and also a button to reload the <iframe>. To recreate the problem:
From page 1 follow the link to page 2
On page 2, click the button to load the <iframe>
Click either of the back buttons
You will notice that you do not go back to page 1.
Here is the HTML:
<div data-role="page">
<p>This is page 1</p> Go to page 2
</div>
<div data-role="page" id="page2">
<div data-role="header" data-add-back-btn="true">
<h1>Page 2</h1>
</div>
<p>This is page 2</p>
<p>What follows is the iFrame</p>
<iframe id="i1" width="500" src="http://www.ibm.com"></iframe>
<p>This button issues a programmatic back</p>
<button id="backButton">Go Back</button>
<p>This button loads new content into the iframe</p>
<button id="reloadButton">Reload iFrame</button>
</div>
Here is the JavaScript
$(function () {
$("#backButton").click(function () {
jQuery.mobile.back();
});
$("#reloadButton").click(function() {
$("#i1").attr("src", "http://www.microsoft.com?x=" + Math.random());
});
});
(This is the code you will find in the jsFiddle).
I'm guessing it is because JQM programatically manipulates the history with replaceState. You can read more about how they track history in an ajax environment in the docs
Show me some code or a fiddle and I may be able to give you a more detailed answer.
One answer that seems to work (so far) is not to attempt to reload the <iframe> via changing its src attribute but instead, inserting a brand new <iframe> element to replace the one that was previously there. The logic to achieve this might look as follows:
$("#frameLocation").html('<iframe id="i1" width="500" src=' + newURL + '"></iframe>');
A corresponding jsFiddle showing it working is available.
This has been tested on Chrome 38.0 and Internet Explorer 11.0.
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.