i am using iScrollView on my App (PhoneGap, JQM 1.3, Android). Excellent work on this. It's a gem.
Actually I'm testing on a Samsung Galaxy S3.
My first page is large in vertical dimension (round about 6000px) consisting out of a bunch of <div> containers with images (with external src).
These DIV - containers are dynamicly added to the content div, based upon Json-data. Then i'm doing a refresh. Everything is fine so far.
But what i've noticed is, when omitting the data-iscroll attribute in my content <div> , scrolling is much smoother and not choppy at all.
But when adding the data-iscroll attribute to the content-DIV, scrolling is choppy.
I thought it was because of the anchor-tag's or the images, so i replaced the div-containers with spans and put some text to it. I copied about 30 spans and watched how scrolling behaves. It is choppy - even though with spans. Then i took just 15 spans and scrolling was a bit smoother. It has something to do with the amount of containers within the content-div.
My markup looks in a more simplified form like this:
<div data-role="content" data-iscroll class="iscroll-wrapper">
<div class="iscroll-scroller">
<div class="iscroll-content">
<p>This is some content that I want to scroll</p>
<p>This is some content that I want to scroll</p>
<p>This is some content that I want to scroll</p>
<p>This is some content that I want to scroll</p>
<p>This is some content that I want to scroll</p>
<p>This is some content that I want to scroll</p>
<p>This is some more content</p>
... more content up to 6000px in vertical direction
</div>
</div>
</div>
Can anyone confirm this behaviour? Is there a workaround available?
Ok, finally got the answer from Jon Tara himself.
iScrollView is definately only for WebViews with small and not complex markup.
Read here
Related
CodePen https://codepen.io/david263/pen/zYNaoRQ shows an example simple home page layout that fits the browser viewport perfectly and centers some div content (choose Change View > Full Page View in CodePen to see the page clearly). But note the CSS style elements used to set div heights and the many Bootstrap 5 classes used to achieve vertical centering. It took several days to get this working, but it fails to use only simple Bootstrap 5 classes.
<header id=jumbo class="px-5 d-flex justify-content-center align-items-center bg-dark" style="height:70vh">
<div class="row col-12 text-center text-light">
<h1 class="font-weight-bold display-4">Vertically Centered Jumbo Content</h1>
<h3 class="font-weight-bold">A great starter layout for a landing page</h3>
</div>
</header>
My attempt to use the usual container, row, and col classes (see https://codepen.io/david263/full/xxgzLPj) failed to achieve the full height demonstrated by the first example.
<header id=jumbo class="container-fluid bg-dark">
<div class="h-50 row align-items-center col-12 text-center text-light">
<div class="col py-auto">
<h1 class="font-weight-bold display-4">Vertically Centered Jumbo Content</h1>
<h3 class="font-weight-bold">A great starter layout for a landing page</h3>
</div>
</div>
</header>
And these difficulties were encountered before adding a background image, which doesn't seem possible in Bootstrap 5 at all.
Don't get me wrong; I'm not opposed to using CSS when necessary. It's just that it's hard to tell exactly what the limits are for Bootstrap 5 so that custom CSS becomes necessary.
Many websites have a home page containing a large photo or video in the background, with text centered horizontally and vertically in the foreground, so this example represents something that is very often used. Surely such a frequent layout must be possible in Bootstrap 5.
Bootstrap isn't a silver bullet - its a framework (think of it as a chassis that you need build on top of). Bootstrap offers a few "helper" classes so that one does not need to add a whole bunch of repetitive CSS .. but that's all it can do. A clear understanding of CSS helps a lot too in using Bootstrap.
For example, the h-50 class is only height: 50%; in CSS. That's 50% of it's parent .. but your <header id="jumbo" does not have a height .. so 50% of what .. 0 .. is unknown?? (This may vary from browser to browser)
It's not clear what you're trying to achieve - but if you head on over to https://getbootstrap.com/docs/5.0/examples/ you'll see a whole bunch of examples and starting points for you to get to where you need to be. I think the Cover example is a good spot to land on. (Once there, right click and "view page source" ...)
[Using jQuery Mobile version 1.3.2]
I'm working on a jQM project and am running into a bit of a dilemma here. For pages that don't have much content (such as a home page with only 3 buttons on it), and when the footer data-position is set to "inline", there is a big ugly gap below the footer...
Of course, if I set the footer's data-position to "fixed", then it looks good IF viewed in portrait mode...
BUT... when it's viewed in landscape mode, it looks bad, as there is barely any room for the content area, due to the header and footer taking up most of the visible area...
So, my question is... is there a good, working solution for getting the footer to be fixed to the bottom in situations where the content area does not fill up the entire screen, and then have the footer position automatically switch to "inline" for situations where the content area DOES fill up (at least) the entire screen?
OR... alternately... is it possible to have the footer position "fixed" when the device is in portrait mode, and then switch the footer position to "inline" when the device is in landscape mode?
I've spent a few hours researching this online today, but I haven't found any promising solutions to this problem so far (I found a handful of articles / forum posts that addressed the topic, but they were from 2-3 years ago, and the few proposed "solutions" looked like they might create more problems than they solve).
I'm not looking for a solution that is 100% cross-browser (because I know that doesn't exist), but as long as I can find a solution that works well on mobile iOS and mobile Android, I'd be happy.
I would imagine that this would be a fairly popular issue, so I'm a bit surprised that I haven't come across a good solution so far (maybe I just haven't looked in the right place yet).
So.... any ideas?
Thanks!
You can listen to the resize and orientationchange event and then fix/unfix the footer depending on available space.
Here is a DEMO
Using script, measure the header height + footer height + content height and compare it to the total window height (viewport). Then add or remove the ui-footer-fixed class on the footer div:
$(document).on("pagebeforeshow", "#page1", function(){
$(window).on("orientationchange resize", function(){
FooterPositionFixed()
});
setTimeout(FooterPositionFixed, 300);
});
function FooterPositionFixed(){
scroll(0, 0);
var totHeight = $(window).height();
var headerHeight = $("#jqmHeader:visible").outerHeight();
var footerHeight = $("#jqmFooter:visible").outerHeight();
var contentHeight = $("#jqmContent:visible").outerHeight();
if (totHeight > (headerHeight + footerHeight + contentHeight)){
if (!$("#jqmFooter").hasClass("ui-footer-fixed")){
$("#jqmFooter").addClass("ui-footer-fixed");
}
} else {
if ($("#jqmFooter").hasClass("ui-footer-fixed")){
$("#jqmFooter").removeClass("ui-footer-fixed");
}
}
}
Here is the HTML for this script:
<div data-role="page" id="page1">
<div data-role="header" id="jqmHeader">
<h1>My page</h1>
</div>
<div data-role="content" id="jqmContent">
<ul data-role="listview">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
<div data-role="footer" data-position="fixed" id="jqmFooter">
<h2><a>Go to website</a><br />Copyright<br /> business name</h2>
</div>
</div>
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.
Has anyone actually succeeded in doing this it seems like there are so many attempts on line but no one has a definite solution. I've tried plugins that a lot of people suggested but nothing is working.
I just want to have a Google Map go full dimensions (apart from header and footer) and then on another page I want a div to do the same
JQuery-Mobile content area 100% height between head and foot
In the meantime I would recommend to use iScroll [with CSS position:fixed; for header&footer in iOS5 only]
In iScroll you just wrap the content into a wrapper & scroller class, the rest is done by the script. Here's the homepage http://cubiq.org/iscroll-4 and here's some code:
<div id="content" data-role="content">
<div id="wrapper">
<div id="scroller">
your content here.
</div>
</div>
</div>
For iScroll initialization use the documentation provided on cubiq's site.
zY
periodically_call_remote is a great rails feature, but with ease comes novices so here I am.
I have a div that is getting updated with content every 5 seconds. Looks great and was easy to setup. This page is the homepage so people will not be staying here long. So when they click another link, such as link_to "All Products", periodically_call_remote creates two displeasing issues.
1) For one thing, periodically_call_remote doesn't stop when a html link is clicked and I believe that this is causing the lag in response to open the selected page.
2) Also, when an html link is clicked the content inside the updated div disappears.
Any conceptual solutions?
This only occurred in FF because I had a div inside the updating div which had my content and that middle div had no purpose.
For example.
<div id="main_div">
<div class="div_with_no_purpose"> <<=== problem div
<div id="div_getting_updated"> <<=== content goes here
</div>
</div>
</div>