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>
Related
When navigating with $.mobile.changePage("#page2"); I realized that jQM adds 1-3px gap under the header on the next page.
When calling the photolibrary with Cordova to select a photo, the gap will disappear, but I don't need the camera plugin, I want the gap not to appear in the first place.
(I am not talking about the white gap that gets added to the bottom when calling camera plugin - and can be resolved by changing the self web view in MainViewController under viewWillAppear - or any other of the gap issues I found).
The gap I am talking about is between header and ui-content.
I have been working with jQM before and the versions I used in past projects have not caused any similar problem.
I am using jQM 1.4.2, JQuery 1.11.0 and Cordova 3.1.0.
Here are 2 images, I changed to colors to make the problem more obvious.
darkgray -> header
red -> ui-page background
blue -> first (and only) DIV element in ui-content
1 image: no gap - this is if the page is the INDEX page
2 image: this is when the page is page 2 and gets navigated to with changePage
Between header and first DIV in content you can see a gap.
I have commented out every single line of code, except the basic structure and those to color the elements. Plus, the page WILL appear without gap IF it is the MAIN page. However, if I have a different main page and tap on a div which calls $.mobile.changePage("#page2"); the second page will be shown with a gap between header and content.
edit - UPDATE:
I created a clean project just to reproduce this issue. I don't know how to resolve it and if I can't fix this I can't continue with any project, because this happens in every Project with jQM 1.4.2:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
<link rel="stylesheet" href="jquery.mobile-1.4.2.css" />
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.mobile-1.4.2.js"></script>
<script>
$(document).on('tap', '#gotop2', function(event){
event.preventDefault();
//$.mobile.changePage('#p2');
$.mobile.pageContainer.pagecontainer("change", "#p2")
});
</script>
</head>
<body>
<div data-role="page" id="p1">
<div data-role="header" id="header" data-position="fixed" data-tap-toggle="false" data-id="h1">
<h1>page 1</h1>
</div>
<div data-role="content" style="padding:0px; margin:0px;">
<div id="gotop2">go to page2</div>
</div>
</div>
<div data-role="page" id="p2">
<div data-role="header" id="header" data-position="fixed" data-tap-toggle="false" data-id="h1">
<h1>page 2</h1>
</div>
<div data-role="content" style="padding:0px; margin:0px;">
<div id="blueblock" style="height:20px; width:100%; background-color:#22272c; background-color:blue; padding:0px !important; margin:0px !important;"></div>
</div>
</div>
</body>
Don't forget to include jQ or jQM in the folder.
If you call "/index.html" in you browser and navigate to the second page you will see the gap.
If you call "/index.html#p2" directly in the browser there won't be any gap.
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 have got a jQueryMobile page that adds some white space after the content. How do I remove it? I know I have not got a footer in the page, is that the reason? Any advice much appreciated.
<div data-role="page" id="home">
<div data-role="header">
<h1></h1>
</div>
<div data-role="content">
<div class="message"></div>
<a data-role="none" href="" id="btn_loginEmail" class="button"></a>
<a data-role="none" href="" id="btn_loginFacebook" class="button"></a>
</div>
</div>
What do you mean white space??
I've tried your page and it works just fine
Check out this fiddle
You mean the space between header bar and first element inside content (in above case the button)?
Then you can do style as below
.ui-content{
margin-top: -23px;
}
Check out this fiddle
if u are using jqm 1.2.0. In min.css, change min-height to 400px in ui-page{min-height:420px}. Hope it works for you!!
I have an issue with Jquery mobile persistent navbar. I am developing a mobile app using phonegap to deploy on iOS and Android. I have a navbar to navigate from one page to another. (footer/navbar fixed).
Example on: http://jquerymobile.com/demos/1.2.0/docs/toolbars/footer-persist-a.html
The navigation works, the bar persists when rendered in a browser such as chrome or safari. But when I upload the app to the Android emulator or iOS emulator, clicking a link from the navbar makes the whole screen go white for a sec and then re-appears. (Kind of a flicker)
Can someone help with this?
Here's my code for the footer: (a.html,b.html... are the name of my pages)
<div data-role="footer" data-id="foo1" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar">
<ul>
<li>Info</li>
<li><a href="b.html" data-prefetch rel="external" >Friends</a></li>
<li>Albums</li>
<li>Emails</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
Thank you !
I figured it out. It's a combination of what you said and what I had.
So to stop the Jquery mobile footer from flickering when you upload to Android or iOS, you need to set the following properties in your div:
page1.html:
<div data-position="fixed" data-tap-toggle="false" data-role="footer" data-id="f1">
Page 1 NAV
Page 2 NAV
</div>
page2.html
<div data-position="fixed" data-tap-toggle="false" data-role="footer" data-id="f1">
Page 1 NAV
Page 2 NAV
</div>
The data-id="f1" has to match in both pages so that jquery mobile knows that this is the same footer that was on the previous page therefore it won't render it again.
Let me know if you need help with this.
Regards,
Tony
Same problem here (I was trying to fix it for over 3 hours with no luck trying lots of stuff I found on the web but no luck).
If you remove the entire footer and add a button in the content area the transition works like a charm all of a sudden. So one workaround would be to fake the navbar via buttons from the content area you place at the bottom of the page... Not very pretty though.
<div data-role="content">
<h1>
Page Nav and Dialog Example
</h1>
<a data-role="button" href="index2.html">Page Navigation</a></div>
I'm using this with a custom-scripting.js:
$(document).bind("mobileinit", function(){
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
$.mobile.useFastClick = true;});
Referencing it via:
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script src="custom-scripting.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.js"></script>
Maybe anyone else found a solution for using navbar without flickering?
Without using the navbar in the footer it stops flickering (tested on iPhone4 iOS5). So you can use the footer but don't use navbar inside it :-)
But attention: If you use data-position="fixed" it will start to flicker again...
<div data-role="footer">
<a data-role="button" href="#">Main</a>
<a data-role="button" href="favorites.html">Favorites</a>
<a data-role="button" href="more.html">More</a>
</div>
Hope it helps :-)
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.