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.
Related
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...
Is it possible to call a JQM Popup using a custom image as a button. Using the following, I can call an external site, but I can't seem to get it to call a JQM popup.
<img src="../MapPin1.png" />
Yes, but you need data-rel="popup" in your anchor tag for JQM popups, and the href is supposed to contain the ID of the popup element (not a hyperlink).
Here's an example:
<img src="../MapPin1.png" />
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
</div>
See: http://demos.jquerymobile.com/1.2.1/docs/pages/popup/
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);
});
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.