I have a strange problem with jQuery Mobile page transitions.
Demo can be found here:
http://www.dev.theorie24.ch/mobile_index.php
If you click on "ANMELDEN" the new page gets loaded, but without the background gradient and some other styles missing.
After refreshing the new page, it looks fine. But then, if you go back (browser back button or arrow to the left on top), the first page gets displayed with some styles messed up.
What is happening here? How can I enforce the correct display of the whole page after the transition?
EDIT:
After the page transition, this is how the DOM looks like:
The body-tag actually closes much too early. This can't be right. Is that a bug in jQuery Mobile?
Thanks a lot!
Chris
I think the problem is that in your second html file data-role attribute applied to the body.
Try to wrap the content with div element with data-role="page", like so:
<html>
...
<body>
<div data-role="page">
<!-- content -->
</div>
</body>
</html>
Related
I'm developing a Cordova project, building the user interface with jQuery Mobile (first project using any of them), and I'm having problems adding a logo image to the header.
Since it makes the header bigger than default, the header overlaps the content in the main div as in this capture:
If I navigate to other page and return to this one, then everything looks like it should:
I've read that when jQuery Mobile initializes the page, the header image is not loaded and the header is much smaller, so I've tried
this is my html for the image:
<div data-role="header" data-id="header" data-position="fixed">
<h1>
<img src="img/flycosette_logo-88cb7efa9f6acfcaf246f8523e87805d.png" alt="FlyCosette"/>
</h1>
</div><!-- /header -->
And this my css in a custom file called after jQM files:
.ui-header img {
width: 100%;
}
I've tried the approach in the quoted link:
$(window).on('load', function () {
$(this).trigger('resize');
});
but it doesn't work for me.
I've also tried placing the image inside a div, instead <h1>, and setting the code for it instead of the image, playing with several properties, but it doesn't solve the problem and the image size does not display as well as in the screencaptures...
So, any idea on how to fix it?
When you get back to the page, JQM internally triggers an event called upateLayout which probably also adapts the content positioning relative to the header. Try triggering this yourself by doing something like:
$([your_page]).trigger("updatLayout");
See if this works. Maybe you need to call it on the header or content instead of the page.
After refactoring my code, I've been trying all different solutions once again, and it turns out that the initial solution:
$(window).on('load', function () {
$(this).trigger('resize');
});
from the post: https://stackoverflow.com/a/11110607/3708095
is what finally solved my problem.
I'm calling the script with that code after the </body> tag, below all the html (not sure about how was it being called before), and now is working.
Sorry for the inconveniences.
I thought my external panels (jQM 1.4) were working great, until I added more content to them, and now, I can see the external panel underneath my app's home page.
If they are short, it's fine, but once they reach a certain height, you can scroll down on the home (first) page and see the panel's contents.
The new docs aren't much help :/
I've tried a lot of variations... but here's a basic example that will trigger it:
<div data-role="panel" id="imExternal" data-theme="a">
<div style="height: 1200px; background: #000;">
<p>this is the panel, code is tight and outside of any containing page divs.</p>
</div>
</div>
*update: I'm specifically seeing it in my app with a popup open, and then clicking on an input field to show the Android keyboard. It seems to resize the page, which shows content from another page (external panel) underneath it.
You should enhance External widgets manually, as they don't get enhanced when page is created.
$(function () {
$("[data-role=panel]").panel();
});
Also, elements / widgets inside External panel should be enhanced as well.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
Actually... DON'T use popups in external panels. Ultimately, that was the root cause of this.
I solved this by setting the css height of the page in question to the window height, which prevented the underlying panel from showing below it.
$('#page').css('height', $(window).height());
I have implemented a fixed header in jQuery Mobile, and it's working great for the most part. When I scroll, the toolbar remains visible. When I tap the screen, the header does not disappear. Great. The only annoyance I see is that when you tap into an input field that's towards the bottom of the page, the header then reverts to position:static so it disappears. You can see that by scrolling back up to the top. Once you unfocus the input box (hit done on the keyboard), then it goes back to position:fixed. I would like it to always be visible no matter what.
<div data-role="header" data-position="fixed">
I'm using jQM 1.4.0 RC1 and in the change log it states:
- Fixed Toolbars are now an extension on the toolbar widget
Sounds relevant, but I'm not sure what exactly that means.
Thanks. :)
This actually a fix for many issues raised on fixedtoolbar widget.
Issue #4410
Issue #4724
jQM hides fixed toolbars once focus is triggered on select, textarea and select; to give more working place when screen width less than 1025.
I have tried the below solution but the results were ugly.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).on("mobileinit", function() {
$.mobile.toolbar.prototype.options.hideDuringFocus = "";
});
</script>
<script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
For more details, check fixedToolbar.js widget on GitHub, go to line 243.
Demo (1)
(1) To be tested on Mobile browsers, not desktop.
I have an image in my jquery mobile fixed header. When the page loads in Google Chrome or Apple Safari the header content overlaps the content div below the header until I resize the page. Firefox and IE work just fine.
Thanks!
I think the problem is that when jQuery Mobile initializes the page, the header image is not loaded and the header is much smaller so jQuery Mobile puts a padding on the .ui-page element that is too small once the image loads. A simple fix for this is to manually set the size of the header image so that it takes-up it's required space even before its source loads.
You could also do this, although it seems pretty hacky to me, force a redraw by triggering the resize event on document.ready or maybe window.load:
$(window).on('load', function () {
$(this).trigger('resize');
});
I pasted this code into the console while on your page and it re-positioned the title element as expected.
Does applying the following CSS help?
.ui-page {
padding-top: 91px !important;
}
Note that you will have to refine the selector as this will apply to overlay popups either.
I had lots of trouble with this. This worked until I wanted to add a link:
<div data-role="header">
<img border="0" src="logo.png" style="float:left;display:inline"/> <h1></h1>
</div>
Note the empty h1 tag.
I ended up not using a data-role="header" at all, I just couldn't get it to work with a link. I used a ui-bar class instead. Like this:
<div class="ui-bar ui-bar-a">
<a href="/" data-role="none">
<img border="0" src="images/logo.png" style="float: left; display:inline">
</a>
</div>
A solution based on #Jasper answer that worked for me was:
$(document).on('pageshow', "div[data-role='page']", function () {
$(window).trigger('resize');
});
It has an improvement that apply to all the jquery mobile pages
I played with the rather good solutions from Jasper and Carlos487 and found this to be the most up-to-date and reliable way to do it (jQM 1.4.x):
if it's due to an image without specified dimensions that will need some time to load and thus may cause the header to enlarge, then specifying the known dimensions (ideally via CSS) should do it. Otherwise there should be a way to determine if it has finished loading and thus applying the idea of solution 3 below.
if it's is due to some (maybe) unknown header resize event (e.g. through some image loaded later or some other content shrinking the header and thus making it vertically bigger), then this should work with a reasonable big enough timeout value:
$( ':mobile-pagecontainer' ).on( 'pagecontainershow', function(e) {
// maybe value > 100 needed for your scenario / page load speed
setTimeout( function() { $(window).trigger('resize'); }, 100 /*ms*/ );
}
if you know what is causing this (as in my case, where I am right shifting the page content on large screens via some (otherwise hidden/overlayed) left aligned navigation panel), then the following may be even better, beeing independent of the actual time the page needs to load on some device or scenario (which may be longer than your predefined timeout above):
// if its due to some animation like in my case
// otherwise try to find a similar way to determine when the resizing event has
// completed!
$('#someAnimated').animate( 'complete', function() { $(window).trigger('resize'); });
(I am not sure if Jaspers solution using $(window).on( 'load', ... will be correct in all jQM page load scenarios (with AJAX page navigation). That's why I would prefer Carlos487's approach in my example.)
None of the solutions above worked for me. But I found out my problem lies in the events after the page navigation. If the content div is hidden during this time, it doesn't get positioned under the header div, rather stays in its original place:
$(document).on("pageshow", "div[data-role='page']", function()
{
$("#pageContentDiv").hide();
setTimeout(function()
{
$("#pageContentDiv").show();
}, 0);
});
EDIT:
Found a better solution; set header div height and page div top padding to the same value:
<div data-role="page" style="padding-top: 60px">
<div data-role="header" data-position="fixed" style="height: 60px">
Hope this helps.
I have a jQuery dialog box on my website. I give a div on the page the "dialog" id it's contents become the contents of the dialog box. However, when the page is loading, this div appears at the top of the page and looks bad. Does anyone know how to deal with this?
Just hide your div via your CSS file:
#dialog {display: none}
This will not affect its actual display when the dialog is opened.
I tested to be sure, and this method worked with jQuery UI 1.7.2
Assuming that the dialog is changing the 'display' style [eg using .show() and .hide()] then all jQueryUI is doing is setting the display style. thus, you can set the div with the display:none by default, and that way it won't show when you load.