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
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" ...)
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
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 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.
I am trying to use iScroll for my webpage and it is behaving weird.
My markup looks something like this.
<div id="content">
<div id="some-header">
</div>
<div id="wrapper">
<ul>
<li></li>
</ul>
</div>
</div>
Now both header and wrapper have heights and they both are positioned absolute.
when I try to scroll, it does scroll but its kind of stuck, when I stop scrolling it returns back to the starting point. Weird :(
Any Sugestions.
btw this is on ipad safari.
Thanks
Dhaval
I met the same problem with you.Did you use ajax the render in the scroller element.
Finally I use iscroll pull to refresh to solve this problem.
This is the question I asked : When I am using ajax to render the Scroller part iScroll doesn't work