I would like to have a back button on the page, using data-add-back-btn="true". However I also want a popup on the same page, with a header, that doesn't have a back button on it. It seems that the data-add-back-btn="true" attribute applies to everything on the page.
I've played around with different settings here: http://jsfiddle.net/n9trV/4/ but have had no luck. Can anyone get this working?
Is there any neat way of doing this using the JQM attributes? Otherwise I will probably just delete the button manually after the page has initialised.
I think you should report this as a bug (I feel it is so). However, to solve your problem just using markup, you can delete the
data-add-back-btn="true"
and place inside of your page header, whether it's a <div> or a <header> (better), a link like the following:
Back
If you want to use your previous icon, in the link use this attribute instead:
data-icon="arrow-l"
So you should have something like this:
<div data-role="page" id="page2">
<header data-role="header">
Back
<h1>Page 2</h1>
</header>
<!-- other code goes here -->
</div>
Related
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 bootstrap accordion (collapse) in my project, but unfortunately the result is not the desire one. I have around 8 items in the accordion, some of them having lot of text inside (sometimes more than half a page).
I am trying to collapse/expand items in accordion, but the behavior is totally strange and unpredictable. I just copied the example on their site and added more items.
My expectations was that each time I click on a closed item it will open and the open div will receive focus. Sometimes I see page scrolling very fast and focus is positioned in a wrong place or item is opened but focus is too low on the page and title is not visible.
Any idea on how to handle accordion properly or what's the correct behavior ?
Here's a working example http://jsfiddle.net/panchroma/RdK8t/
It's taken directly from the bootstrap example with extended content added to one of the elements.
The typical code is:
<div class="accordion" id="accordionParent"> <!-- start #accordionParent wrap -->
<!-- start typical content group -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionParent" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
content
</div>
</div>
</div>
<!-- end typical content group -->
</div> <!-- end accordionParent wrap -->
You could validate your page to ensure there isn't a nesting problem, and double check that if your aren't using the full bootstrap js file, make sure you are including the transitions plugin.
Hope this helps!
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/
I have a simple jquery mobile application in which every page has the following structure:
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">
<div class="content-primary">...</div>
<div class="content-secondary">...</div>
</div>
<div data-role="footer">...</div>
</div>
The content-secondary is a left sidebar, much like the jquery mobile documentation. This secondary content never changes but it can be very large and complex (expensive to reload on every page). I would like to move the same dom element from page to page as it transitions, and not have to include it on every page like the jqm documentation. I only need to load it when it doesn't exist and then move it with every page transition. Any hints on how to do this?
You can insert HTML content in to your page in a pagebeforecreate handler.
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.