I have a header and footer plus a listview in the main html5 body but the issue that I am having is that when the listView is large, it scrolls the whole page including the header.
what I am trying to achieve is to just make the listview scrollable and nothing else so that the header and footer is always visible.
Is this possible in html5/jquery?
edit:
Here is what I have tried.
<link href="src/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css" />
<script src="src/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="src/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<body>
<div data-role="page" id="page">
<div data-role="header" data-position="fixed">
Back
<h1>Claim Items</h1>
</div>
<div data-role="content">
<h3 style="margin-left:1em">The Demo Title</h3>
<ul data-role="listview" id="itemList" data-inset="true" data-scroll="true">
<li>1: demo</li>
<li>2: demo</li>
<li>3: demo</li>
</ul>
</div>
<div data-role="footer" data-position="fixed" class="ui-bar">
<div data-role="navbar">
<ul>
<li>Add an Item</li>
<li> Remove an Item</li>
<li>Add comment</li>
</ul>
</div>
</div>
</div>
</body>
I think that you are asking for a fixed toolbar:
In browsers that support CSS position: fixed (most desktop browsers, iOS5+, Android 2.2+, BlackBerry 6, and others), toolbars that use the "fixedtoolbar" plugin will be fixed to the top or bottom of the viewport, while the page content scrolls freely in between. In browsers that don't support fixed positioning, the toolbars will remain positioned in flow, at the top or bottom of the page.
To enable this behavior on a header or footer, add the data-position="fixed" attribute to a jQuery Mobile header or footer element.
Fixed header markup example:
<div data-role="header" data-position="fixed">
<h1>Fixed Header!</h1>
</div>
Fixed footer markup example:
<div data-role="footer" data-position="fixed">
<h1>Fixed Footer!</h1>
</div>
Working demo here.
<div data-role="header" data-position="fixed" data-id="header1" data-tap-toggle="false" style="border-bottom:4px solid #f57122;">
<h1>Header</h1>
</div>
In my experience you need also to set data-tap-toggle to false, because you dont want the header to disappear if they click anywhere on the page. Also you need this data-id, if you have multiple pages you need the header on each page to have the same data-id so the jquery mobile will not replace current header of the active page.
EDIT:
If you experience blinking during page transitions on the actual device you have to add this to your index html also
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Related
From getmdl.io/components/index.html#layout-section
I opened link to
https://codepen.io/anon/pen/MEoBqG
When I saved html code and opened it in few browsers locally. I see that menu button is mispositioned.
<html>
<head>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Simple header with scrollable tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-3">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-4">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-5">
<div class="page-content"><!-- Your content goes here --></div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-6">
<div class="page-content"><!-- Your content goes here --></div>
</section>
</main>
</div>
</body>
</html>
How I can fix the misposition of menu icon? Why it looks good on codepen but not locally?
screenshot with mispositioned icon
The only difference between Codepen code and your code is the the missing <!DOCTYPE html>. At first, you might wonder, so what? sure the browser can handle it, right?. The truth is that, omitting <!DOCTYPE html> forces your browser to render your page in Quirks Mode.
So, what can go wrong in quirks mode? A lot of things can go wrong in quirks mode. I suspect that flexbox does not work as intended in your case (I will look into it and come back later).
Some useful info:
MDN: Quirks Mode and Standards Mode
MDN: Mozilla Quirks Mode Behavior
How to tell if a browser is in “quirks” mode?
Why does my div height 100% work only when DOCTYPE is removed?
I'm trying to get the fixed navigation in the example below to work with fullpage.js
http://turnwall.com/demos/webdev_part11/index.html
http://www.turnwall.com/articles/adding-single-page-scrolling-navigation-to-your-site/
The issue I'm having is the active state isn't showing depending on which anchor has passed/clicked. The only thing I've differed is not using section ID's as the reference/anchor ID (need same class for sections in order for fullpage.js to work).
Also aware fullpage.js has it's own built-in nav, however, I need the flexibility of one active 'anchor' referring to/being active on a few sections, and not just displaying every single section in the nav.
Would appreciate any advice!
<script type="text/javascript" src="js/scrolloverflow.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script type="text/javascript" src="js/jquery.combinedScroll.js"></script>
</head>
<div id="fullpage">
<nav class="site-navigation page-navigation">
<ul div="menu">
<li class="">Top</li>
<li class="current">One</li>
<li class="">Two</li>
</ul>
</nav>
<div class="section" data-color="red">
<div id="right"><img id="sweets" src="work/hav-2.png"/></div>
</div>
<div class="section" data-color="indigo">
</div>
</div>
<div class="section" data-color="grey">
<div id="next">NEXT PROJECT ↓</div>
</div>
</div>
I need the flexibility of one active 'anchor' referring to/being
active on a few sections, and not just displaying every single section
in the nav.
Just create your own menu as detailed in this answer.
No need to use the menu option in that case. As you want a much more custom menu that will activate the same element for multiple sections.
I need to make a inner div horizontally scrolleable, but using the browser scrollbar and not that particular div's scrollbar.
One option would be making every other div's position as static and overflowing the wrapper div, but since I'm modiyfing a premade template, I would prefer to be able to do this without changing the layout. In that sense, a JavaScript/jQuery plugin would be nice, but totally not a must.
Here is the code:
<title>This is a test</title>
<body>
<header>
This is the header.
</header>
<div id="wrapper">
<div id="left-sidebar">
This is the left sidebar.
</div>
<div id="test">
<div id="content">
This is the main content.
<div id="flex">
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
</div>
</div>
</div>
</div>
<footer>
This is the footer.
</footer>
</body>
Here is the jsFiddle: https://jsfiddle.net/k6e3sv6v/
Thanks bra
I think you cannot focus BROWSER scrollbar into some div it appears if the whole page is wider than 100% width.
But I think it can be done by putting all other elements around that div as fixed position which won't move over the screen even if the scroll was moved left-right...
As far as I can tell this isn't a duplicate question because it's a bit different than the other questions on this topic.
I'm using Google's Material Design Lite and the footer will not stay at the bottom of the page properly.
I've seen the different fixes using this trick
<div class="content">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
and I've tried using this method
#footer {
bottom: 0;
width: 100%;
position: absolute; (or fixed)
}
The first option doesn't work because Material Design Lite actually uses the footer tag. And to be honest I don't really want to do that anyway because it seems kind of sloppy to me.
The CSS method for the footer almost works but there are a few problems. When using position: absolute; it doesn't always keep the footer on the bottom of the page and it will sometimes cover content. When I try fixed the footer is always kept at the bottom of the page but when there is enough content for the page to scroll it stays at the bottom of the screen and covers content. Both fixed and absolute will keep the footer at the bottom of the screen not the page, which means that when there is enough content to scroll the footer covers content at the edge of the screen.
The behavior for fixed can be reproduced 100% of the time, but for absolute I haven't figured out what causes it to work sometimes and not others.
This is the code I have for the footer
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--left-section">
<button class="mdl-mini-footer--social-btn social-btn social-btn__twitter">
<span class="visuallyhidden">Twitter</span>
</button>
<button class="mdl-mini-footer--social-btn social-btn social-btn__blogger">
<span class="visuallyhidden">Facebook</span>
</button>
<button class="mdl-mini-footer--social-btn social-btn social-btn__gplus">
<span class="visuallyhidden">Google Plus</span>
</button>
</div>
<div class="mdl-mini-footer--right-section">
<button class="mdl-mini-footer--social-btn social-btn__share">
<i class="material-icons" role="presentation">share</i>
<span class="visuallyhidden">share</span>
</button>
</div>
</footer>`
Has anyone else had this issue or have any ideas on a solution?
Edit to add more information:
The issue isn't with the height of the body or html they are both at 100%.
Full Layout Code
<body>
<div class="site mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<div class="mdl-layout__header-row">
<!-- Header Content Here -->
</div>
</header>
<div class="mdl-layout__drawer">
<!-- Drawer Content -->
</div>
<main class="mdl-layout__content">
<!-- View Content Here -->
</main>
<footer class="mdl-mini-footer">
<!-- Footer Content -->
</footer>
<div class="mdl-layout__obfuscator"></div>
</div>
</body>
I managed to do that by:
1. Without waterfall header
Moving the footer element outside the main element
Set the style of the .mdl-layout__content element to"flex: 1 0 auto"
Example:
<body>
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header">
...
</header>
<main class="mdl-layout__content" style="flex: 1 0 auto;">
...
</main>
<footer class="mdl-mega-footer">
...
</footer>
</div>
</body>
2. With waterfall header
Just by moving the footer element outside the main element
Example:
<body>
<div class="site mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<div class="mdl-layout__header-row">
<!-- Header Content Here -->
</div>
</header>
<div class="mdl-layout__drawer">
<!-- Drawer Content -->
</div>
<main class="mdl-layout__content">
<!-- Main Content -->
</main>
<footer class="mdl-mini-footer">
<!-- Footer Content -->
</footer>
</div>
</body>
Tests:
Short content: http://codepen.io/kabudahab/pen/vGdVQM
Long content: http://codepen.io/kabudahab/pen/JXpmpv
I was having the same problem, where a mdl-mini-footer was overlapping with my mdl-layout__content.
My solution was to keep the tags separate, i.e.
<main class="mdl-layout__content">
...
</main>
<footer class="mdl-mini-footer">
...
</footer>
and modify the classes as follows (taking inspiration from #K.A.D's first solution above)
.mdl-layout__content {
flex: 1 0 auto;
}
.mdl-mini-footer {
flex: 0 0 auto;
}
The modification of the footer class was necessary to stop the footer growing into spaces I didn't want it to (the first 0 in 0 0 auto).
Try This
<main class="mdl-layout__content">
<div class="page-content">
</div>
<div class="mdl-layout-spacer"></div>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">Title</div>
<ul class="mdl-mini-footer__link-list">
<li>Help</li>
<li>Privacy & Terms</li>
</ul>
</div>
</footer>
</main>
Just Add:
<div class="mdl-layout-spacer"></div>
After:
<div class="page-content"></div>
I faced the same issue as you. After browsing through many tutorials and 2 questions like this, I had a peek at one of the templates provided by MDL and noticed that the footer is included within the main section. I find it higly counter-intuitive but the footer element should be specified just before the closing tag, NOT after it.
See the screenshot of the markup which is now working fine. I'm working on the website of TEDx GEC.Visit the tedx GEC website to see the footer in action.(changes will be uploaded by 20-07-2016, anyone visiting before that will notice that the footer overlaps the content. Here's the screenshot:Notice the closing main tag is after the footer.
In my app I'm trying displaying a pdf in an iFrame (got that covered).
My problem is that the iFrame doesn't take up the full space of the page between my header and footer divs. I'm using Jquery Mobile 1.1.0 for my themes.
I don't think it's something as minor as margins & padding. It's on a much larger scale of open space.
Here is my html:
<!-- Start of pdfReader page: #pdfReader -->
<div data-role="page" id="pdfReader" data-theme="b">
<div data-role="header">
<h3 id="keyHeader2">Key Description</h3>
</div> <!-- /header -->
<div data-role="content">
<iframe id="pdfFrame" width="100%" height="auto" src=""></iframe>
</div>
<div data-role="footer" class="footer">
<p class="margin">
Back
</p>
</div>
</div> <!-- /#pdfReader -->
Relevant CSS:
.footer{
position:fixed;
height:50px;
bottom:0px;
left:0px;
right:0px;
margin-bottom:0px;
}
JQM links:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
As I've said. My problem is that the div containing the iFrame won't take up the full height of the page (leaving an unappealing empty space). Sorry if this is a basic fix but my CSS is rather rusty, especially when it has to conflict with the JQM CSS. Help is greatly appreciated>
Thank you in advance.
There is a very little CSS issue here. The wrapping div around the iframe has a padding that needs to be canceled.
div.ui-content {
padding: 0;
}
and then to make your iframe full-height (excluding the navbar and the footer) simply add this to your iframe
iframe#pdfFrame {
min-height: calc(100% - 100px)
}
Here is a demo JSFIDDLE: http://jsfiddle.net/ymKL9/2/