My Isotope layout is returning 0px height on its container. Refreshing the page always resolves the problem.
Has anyone run into this?
Here is my Isotope:
var $container = $('#Stream');
$container.imagesLoaded(function () {
$container.isotope({
itemSelector: '.stream-items',
transformsEnabled: false
});
It occurs consistently albeit intermittently on Chrome, Safari, and FF. By "intermittently" I mean that sometimes it's on the first load, others on the third, or fourth, but eventually always happens.
I'm running on jQuery Mobile and have tried loading it the various options (window.load, pageinit, etc) but it happens regardless.
So, any ideas are much appreciated including any hacks that will force a refresh which always fixes the problem.
Thanks!
UPDATE: Just noticed that resizing the window resets to 0px height too.
It looks like Isotope doesn't have enough time to calc the images.
So I use window.load instead. Works a treat:
$(window).load(function(){
// Gallery Isotope
$(function(){
var $container = $('#gallery');
$container.isotope({
itemSelector: 'li',
masonry : {
columnWidth : 320
}
});
});
});
Related
When I load my jQuery Mobile page on an iphone, some of the page extends out of the initial viewport. The space that is out of the initial viewport to begin with is white, not gray which it should be. I've attempted to set the height to 100% using this line of code: [data-role=page]{height: 100% !important; position:relative !important;} however this still does not do the trick.
I always have the same problem with my JQM pages. I use that to make my page height 100%:
$(document).delegate('#yourPage', 'pageshow', function () {
var the_height = ($(window).height() - $(this).find('[data-role="header"]').height() - $(this).find('[data-role="footer"]').height());
$(this).height($(window).height()).find('[data-role="content"]').height(the_height);
});
Hope this helps.
First, don't misuse !important. To diagnose what's wrong with the CSS, you can use Firebug in Firefox / Developer Console in Chrome. ( Safari & IE have similar things ). Some CSS may be overridden, or layers maybe overlapped.
Without your HTML codes & jQuery scripts, I can't really help on this, but normally, to make the content to full height, you have to set html CSS and body CSS to use height: 100%;.
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 would like to automatically scroll to a particular div when the page loads. However, I seem to get into some conflict with JQM's scroll to top functionality.
I am using the following code:
$.mobile.silentScroll($("#myElementId").offset().top);
which does not scroll correctly when wrapped like this:
$('[data-role=page]').bind("pageshow", function() {
$.mobile.silentScroll($("#myElementId").offset().top);
});
but works correctly with a little timeout like this:
$('[data-role=page]').bind("pageshow", function() {
setTimeout(function(){$.mobile.silentScroll($("#myElementId").offset().top);},100);
});
the problem with the last piece of code is that it causes a flicker, with a jump to the top and then a jump down the page. Any ideas how to avoid this?
Your setTimeout works because the jQuery Mobile framework remembers where you were scrolled-to if you are returning to a page you've been to before and you have to wait for their scroll to complete before running your own. You can essentially disable this feature by changing the minScrollBack option inside the mobileinit event handler to something really big:
<script src="[jQuery Core]"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.minScrollBack = 90000;
});
</script>
<script src="[jQuery Mobile]"></script>
That should disable the auto-scroll that the jQuery Mobile framework does when you visit a page on a subsequent visit.
Docs: http://jquerymobile.com/demos/1.0.1/docs/api/globalconfig.html
First post on StackOverflow!
Thanks for this, I have been working on a project that uses quite a bit of custom animation for the transitions and while it took a while to get here, Jasper's answer set me in the right direction, it was just missing a bit of code:
<script src="[jQuery]"></script>
<script>
$(document).bind("mobileinit", function(){
$.extend($.mobile, {
minScrollBack: 90000 // turn off scrolling to position on last page
});
});
</script>
<script src="[jQuery mobile]"></script>
This seemed to do the trick!
Ref: http://jquerymobile.com/test/docs/api/globalconfig.html
You guys ever tried the answer???
It does not work unless you set $.mobile.defaultHomeScroll to your wanted scroll as well.
That is, two steps.
1. set $.mobile.minScrollBack to a large enough value.
2. at page load, set the defaultHomeScroll to desired value.
Then it works.
I did not have to do much ... I got it working with the following on the section.
<script>$(function() {$.mobile.defaultHomeScroll = $(window).scrollTop();});</script>
I have a web app built with jQuery Mobile that works fine when using it in Safari on an iPad. However, when you add it to the home screen to use it as a standalone app (with the browser navigation removed by , then the page transitions "blink" quickly after each page transition.
I have Googled on this and found that blinking was considered a bug a long time ago, and by now should be fixed. And it seems to be in Safari, but not as standalone from home screen. Does anyone know what is causing this and how to fix it?
Does it have anything to do with the fact that the navigation bar is not there? It works fine as standalone on iPhone though, it's only on the iPad that it occurs...
I would accept as an answer even if someone can show me that this is a known bug (not one of the old bugs that have already been fixed, where it flickered even in Safari mode) or if someone has inside knowledge about that (no one is answering my question at the jQuery forum either...). But of course I would love it if someone actually had a workaround for the problem!
i had exactly the same problem
http://mailinglist-archive.com/rhomobile/2011-08/00656-Re+rhomobile+page+views+and+transitions mentions something that worked for me.
<style>
/*** patch for jquerymobile page flicker that was happending ***/
.ui-page {
-webkit-backface-visibility: hidden;
}
</style>
I still get the flicker in the toolbar, so I converted my tool bar to :
<ul data-theme="b" data-role="listview" style="margin-top: 0;">
<li data-role="list-divider">Your text goes here</li>...
I was nervous about commenting out focus, but a google search found the following CSS that seems to work:
.ui-page * {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
Original link: https://github.com/jquery/jquery-mobile/issues/2856
I was only having a problem with the slide transition (even reverse slide worked fine.
JQ 1.7.1
JQM 1.0.1
PhoneGap 1.5.0
Revision: It should be noted that the discussion below was mitigated with the release of iOS 5.0. It can be a partial influencing factor for anyone who hasn't upgraded but if you're running 5.0, Nitro is ever present. http://arstechnica.com/apple/news/2011/06/ios-5-brings-nitro-speed-to-home-screen-web-apps.ars
--original answer--
Apple introduced the Nitro javascript engine into the Safari browser. However, they only installed it on the browser, not in the UIWebView (which is what you get when you run form the home screen or embedded in an application like PhoneGap.
There has been some speculation if this performance boost was omitted on purpose. http://www.mobilexweb.com/blog/apple-phonegap-html5-nitro.
So, if it seems like it's actually performing slowly... that's cause it really is. It's not using the Nitro engine.
Adding this line
<style>
/*** patch for jquerymobile page flicker that was happending ***/
.ui-page {
-webkit-backface-visibility: hidden;
}
</style>
helped me.
I fixed it with:
<meta id="viewPortId" name="viewport" content="width=device-width; user-scalable=no" />
This only partially works for me:
<style>
body .ui-page
{
height: 100% !important;
-webkit-backface-visibility: hidden;
}
input { outline: none; }
</style>
$(document).bind("mobileinit", function () {
$.mobile.defaultPageTransition = "none";
});
Which prevent's flickering and whitespace at the bottom of the page but notice that transitions are turned off.
Also, id's are not being used more than once which I can verify with:
// an id used more than once??
var ids = new Array();
$.each($("[id]"), function () {ids.push($(this).attr("id"));});
var matches, val1;
for (var i = 0; i < ids.length; i++) {
matches = 0;
val1 = new RegExp(ids[i], "i");
for (var i2 = 0; i2 < ids.length; i2++) {
if (ids[i].length == ids[i2].length && val1.test(ids[i2]) == true)
matches++;
}
if (matches > 1)
alert("This id was used more than once: " + ids[i]);
}
Have also tried:
$.extend($.mobile, {
metaViewportContent: "width=device-width, height=device-height, minimum-scale=1, maximum-scale=1"
});
And loading the page into the DOM and only once that is complete doing the transition as so:
var promise = $.mobile.loadPage(url, {
pageContainer : $("body")
});
promise.done(function () {
var newPage = $("body [data-role='page']:last").attr("id");
$.mobile.changePage($("#" + newPage));
});
I'm still getting the flickering on page transitions.
the answer.... jquery mobile page flicker
Unfortunately, none of the suggestions actually solved the problem, at least not for me. However, finally it has been fixed in the latest stable version of jQuery mobile (1.1.0), so the problem is finally gone! I just had to go in and change the global transition back to slide, because they set it to fade:
$(document).bind("mobileinit", function () {
$.extend($.mobile, {
defaultPageTransition: 'slide'
});
});
Hope this helps someone else who perhaps hadn't noticed the update.
It seems that the following META tag solves the issue:
<meta id="viewPortId" name="viewport" content="width=320; user-scalable=no" />
It is a known bug. See the article in the seaside mailing list.
Rolf van der Vleuten noticed:
flickering can occur when using the same #id more than once in a page,
which is not unlikely when you are using the one page template method. so
be sure to not use #id's more than once.
I don't know why this happens, but I found out that when my first page had
an element that is outlined by default, flickering would occur, this was
fixed by adding:
input {
outline: none;
}
From the currently open issue, "Slide page transition causes screen repaint on iOS 5 chromeless", the recommendation is to comment out pageTitle.focus() from the reFocus function.
This however did not solve my problem. I found it necessary to remove both pageTitle.focus() and page.focus(), basically the entire function.
This issue (and specifically the change to the reFocus function) is also mentioned in issue 2474. It is a fix for iOS4 that did not solve my iOS5 iPad problem.
This seems to be a very very strange bug.I tried to fixed it.But failed.Finally I try to add some code to my project to avoid this issue.
If you deep into jquery mobile's page transition you would know his principle.
It loads another page's (the page you want to go) body into an element such as : .
I just add an wrapper outside of this element and make a setTimeout to delay showing this page.
I made a phonegap app in iPhone 4(ios5) and can't fix this issue.Just pray that jquery mobile team would fix this bug quickly.After spending a few days on this problem I just wanna fuxk jqm...
This only worked partially for me
<style>
body .ui-page
{
height: 100% !important;
-webkit-backface-visibility: hidden;
}
input { outline: none; }
</style>
for data transition "flip" it worked but not for "slide"
I'm using the jquery ui dialog for a modal popup dialog. It's working great in Firefox/Chrome but terrible in ie6.
Problem:
When I show the dialog in ie6, the browser window grows and automatically scrolls down to the bottom. The height increase and automatic scroll-down is equal to the height of the jquery dialog.
I can scroll up and then use the dialog as normal, but the behavior where it grows the window and drops is maddeningly unacceptable.
Here is how I'm launching the window:
<div id="dialogWindow"></div>
...
$(document).ready(function() {
var $dialog = $("#dialogWindow").dialog({
autoOpen: false,
modal: true,
minWidth: 560,
width: 560,
resizable: "true",
position: "top"
});
$('.addButton').click(function(e) {
e.preventDefault();
$('#dialogWindow').load('http://myurl');
$dialog.dialog('open');
});
});
I am already using the bgiframe plugin for jquery which is key for ie6 overlay issues. But this seems unrelated to that. Has anyone seen this before and found a work around?
I've seen this behavior before and it is usually caused by the overlay. When you use the {modal: true} option an overlay is created and rendered with bgiframe support if the plug-in is loaded.
First off, try turning {modal: false} and see if you aren't getting page blow-out then we know it's the overlay.
there are a few things to check if that is the culprit;
check that the styles for the overlay are loading correctly, you'll need to include the jquery-ui dialog.css
try experimenting with position: and float: styles
try moving your dialog markup just above the < / body> tag, allowing the modal overlay to escape correctly.
I had a similar problem at one point.
$('.addButton').click(function(e) {
e.preventDefault();
$('#dialogWindow').load('http://myurl');
var y = window.pageYOffset;
var x = window.pageXOffset
$dialog.dialog('open');
window.scrollTo(x, y); // horizontal and vertical scroll targets
});
What the above should do is grab your current scroll coordinates and saves them. Once the dialog opens you then scroll back to the prior position in memory. Should be near instant and unseen by the user.