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.
Related
I am using jquery mobile and wanted a overlay in to be visible when ever i need. I have this at first in my html
<body>
<div id="overlay"></div>
</body>
(if you are wondering about other pages then they are added afterwards)
but when jquery mobile 1.4.2 initializes it turns my div in to a page like so:
<div data-role="page" data-url="/" tabindex="0" class="ui-page ui-page-theme-a" style="min-height: 640px;">
<div id="overlay">
</div>
</div>
How can i make Jquery not touch this element?
Let me guess you are using it to show a splash screen.
jQuery Mobile requires at least one page to exist during initialization.
To solve this problem add one dummy jQuery Mobile page and just set it CSS to display: none; something like this:
<body>
<div id="overlay"></div>
<div data-role="page" style="display: none;">
<div/>
</body>
I seems it only does it if there are no pages initially in the body. but if you add a blank page every works fine:
<div data-role="page"></div>
I want to create three loading spinners in my Jquery mobile application that will be
showed on my page(in different places) for a while. In my example when I call function1() I want to have loading spinners in #main-menu div,when I call function2() I want to have loading spinner in .news div and when I call function3() I want to have loading spinner in .some-class div. Here is example of my HTML page:
<html>
<head>
<script>
function1();
function2();
function3();
</script>
</head>
<body>
<div id="container">
<div data-role="page" id="home">
<div data-theme="a" data-role="header">
<div id="main-menu" >
</div>
</div>
<div data-role="content">
<div class="news">
</div>
<div class="some-class">
</div>
</div>
<div data-theme="a" data-role="footer">
</div>
</div>
</div>
</body>
If I use $.mobile.loading('show') it will only show one loading spinner in the middle of page. Is there any way
to create more than one loading spinner? I would really appreciate any tip.
If anybody needs here is how I solved this problem: I've used plugin spin.js
http://fgnass.github.io/spin.js/
It's pretty easy to use and you can have multiple loading spinners.
jQuery Mobile doesn't provide you a way to show 3 loaders at a time. You can utilise jQuery Mobile to show a loader in the middle.
I think you are trying to emulate Android UI with loader on ActionBar etc. What you can do is dynamically show and hide a gif loader image in the divs.
User jquery .css method to add and remove background gif to the div
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 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>
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.