I have the following hyperlink on an AMP page, it's a link to an anchor further down on the page:
party
The anchor tag is present too:
<a name="party"></a>
Now when the user is on URL https://www.example.com/venues/amp and clicks the hyperlink, the entire page reloads and shows https://www.example.com/venues/amp#party
I don't want the page to reload, I just want to jump to the anchor tag like in a regular web page, so why is this happening? Testing Chrome on Windows 10.
Change the following
party
to
<span role="button" tabindex="0" on="tap:customId.scrollTo(duration=500, position=top)"> Go to Target </span>
and
<a name="party"></a>
to
<span id="customId"></span>
Click here for example
For more information Click Here
Related
Weirdest thing, using JQuery Mobile 1.2.0. When a user travels to a page with a collapsible, clicking anywhere inside that collapsible div except on buttons adds ui-mobile-viewport-transitioning viewport-slidefade to the body, which is freezing the pane and hiding the scroll bar, and snapping the view to the top of the page. Before click :
<body class="ui-mobile-viewport ui-overlay-c">
After clicking inside a collapsible (Not anywhere else):
<body class="ui-mobile-viewport ui-overlay-c ui-mobile-viewport-transitioning viewport-slidefade">
If I f5 and reload the page, it doesn't do this anymore. Only after following a link.
Example of a link that leads to the page :
<a href="ax_mer_view.cfm?MERID=XXX" class="ui-link-inherit">
<h3>Info here
</a>
This is happening on every single page across our entire mobile application, no matter the browser. iOS, Android, Chrome on PC, Firefox on PC, etc.
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 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.
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.
I have a page with a normal link to an image. When jQuery Mobile is loaded and you click on the link, all that is returned is 'undefined'.
How can you link to an image and have the image loaded when clicked?
edit:
It's just a normal link with an image:
<img src="picture_thumbnail.jpg" />
Seems to work when adding rel="external" to the <a> tag.
<a href="picture.jpg" class="image" rel="external">
<img src="picture_thumbnail.jpg" />
</a>