I'm developing a mobile application to look like it's running on an iPad. When the page initially loads, if the body of the page is beyond the window/screen size, the scrollbars for the page show up "over" the header and footer. But after you refresh the page, then the scrollbars show up BETWEEN the header and the footer (aka it's only over the body), which is what I want.
I'm not able to duplicate the exact behavior (where the scrollbars only show up over the body after a refresh) on jsfiddle, but it at least shows you the scrollbar over the entire page.
Any help is appreciated...
Here's the jsfiddle...
Here's the code that I have:
CSS:
.locationListItem {
margin-bottom: 5px;
}
.locationListPrimary {
color: blue;
font-weight: bold;
font-size: medium;
}
.locationListSecondary {
font-weight: bold;
font-size: smaller;
}
HTML:
#section header {
#*
Recommeneded to use an h1 element, but can contain any kind of element, but make sure to add the TrailsHeaderPrimary class to get the proper styling...
Using an h1 element will get the proper padding around the header line. To see the difference, try doing an h1 vs p *#
<h1 class="testHeaderPrimary">Search Locations</h1>
}
<div style="top: 15px; left: 15px; width: 100%; z-index: 2">
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search/Filter Locations...">
#foreach (var location in Model.AvailableLocations)
{
<li>
<a href="#">
<div class="ui-grid-b">
<div class="ui-block-a"><span class="locationListPrimary" style="width: 20%">#location.Thing</span></div>
<div class="ui-block-b"><span class="locationListPrimary" style="width: 20%">#location.Person</span></div>
<div class="ui-block-c"><span class="locationListSecondary" style="width: 60%">#location.Year | #location.Stuff | #location.Type</span></div>
</div>
</a>
</li>
}
</ul>
</div>
#section navBar1 {
Search
}
#section navBar2 {
Location
}
#section navBar3 {
LocationStrip
}
#section navBar4 {
StackOverflow
}
#section navBar5 {
NA
}
Javascript (from the Layout):
$(document).ready(function () {
resetScreenSize();
});
$(window).resize(function () {
resetScreenSize();
});
var resetScreenSize = function () {
var windowHeight = $(window).height();
var header = $('#testHeader');
var headerHeight = header.outerHeight();
var footer = $("#testFooter");
var footerHeight = footer.outerHeight() - 1;
$(".ui-grid-a").height(windowHeight - footerHeight - headerHeight);
$("#panelMain").height(windowHeight - footerHeight - headerHeight);
};
Update 1:
Here's the body from the layout file...
<body style="height: 100%">
<div id="main" role="main" class="ui-content jqm-content" style="padding: 0; height: 100%;">
<div id="testHeader" data-role="header" data-theme="b" data-position="fixed">
#RenderSection("header", false)
</div>
<div class="ui-grid-a" data-theme="a">
<div id="panelMain" style="overflow: auto;">
<div class="ui-content">
#RenderBody()
</div>
</div>
</div>
<div id="testFooter" data-role="footer" data-theme="b" data-position="fixed" data-tap-toggle="false" style="height: 60px; display: block;">
<div data-role="navbar">
<ul>
<li>#RenderSection("navBar1", true)</li> <!-- Home/1 should be reserved for the home screen -->
<li>#RenderSection("navBar2", true)</li>
<li>#RenderSection("navBar3", true)</li>
<li>#RenderSection("navBar4", true)</li>
<li>#RenderSection("navBar5", true)</li>
</ul>
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
Update 2:
One of the tabs at the bottom goes to a page where it's split 20%/80%. That page uses a different layout to do the 20/80. When that page first loads, it does NOT incorporate my style in the "head" tag that looks like this:
#panelLeft {
width: 20%;
border-right: 3px solid
}
#panelMain {
width: 80%;
}
But as soon as I refresh the page, all of the styling is applied. I'm beginning to wonder if it's not applying my custom styling that I specify in each of the "head" tags in my layout pages. Should I be placing those in a separate css file instead?
The only idea I have that I can give is. Make the body's height fixed and have a property of overflow-y:auto;.
Also, ideally, you want to make the header, body and footer's total height the same with the height of the view height, browser's height.
So fix height = ((header's height + footer's height) - browser's current height). That's my formula.
To do that, either javascript/jQuery or css.
EDIT
Here's a fiddle.
http://jsfiddle.net/4RLZv/
Forgot my JS/JQ
$( document ).ready(function() {
var height = $('#head').outerHeight() + $('#foot').outerHeight();
height = $(window).innerHeight() - height;
$('#body').css('height',height);
});
You can try something like this:
.ui-grid-a {
position: absolute;
top: 68px;
bottom: 63px;
left: 0;
right: 0;
overflow-y: auto;
}
Also you can play with property width + property margin:auto
.ui-grid-a {
position: absolute;
top: 68px;
bottom: 63px;
left: 0;
right: 0;
overflow-y: auto;
margin: auto;
width: 900px;
}
Where width you should set for each size of display separately, e.g.
#media screen and (min-width: 768px) {
.ui-grid-a {
width: 600px;
}
}
#media screen and (min-width: 968px) {
.ui-grid-a {
width: 800px;
}
}
Just play with it!
Related
Following guys, I used the code:
window.scrollBy (0, window.innerHeight)
And yes, it scrolls down the instagram home page.
However, when I go to my story, and see who viewed it, I want him to scroll the story's NOT scroll bar on the home page.
When I open the console and use the code I mentioned above, it returns me undefined and does not do what I want.
How do I scroll the bar of people who have viewed my story? Not from the home page (complete)?
EDIT
enter image description here
var button = document.querySelector('#scroll-child')
button.addEventListener('click', function() {
var childBlock = document.querySelector('.child')
childBlock.scroll(0, 50)
})
.parent {
height: 300px;
background-color: yellow;
text-align: center;
overflow: scroll;
}
.child {
width: 300px;
height: 200px;
background-color: crimson;
text-align: center;
overflow: scroll;
}
.child-content {
margin: 20px;
height: 1000px;
}
<div class="parent">
<button id="scroll-child">
scroll child content!
</button>
<div class="child">
<div class="child-content">
something1
something2
something3
something4
something5
something6
something7
something8
</div>
</div>
</div>
find your story block with its css selector:
var storyBlock = document.querySelector('#my-story-block-id')
scroll inside block
storyBlock.scroll(0, storyBlock.innerHeight)
I have a simple chat JS application, with a div.chat-holder holding all chat messages within a pane on the overall window. I set height of '.chat-holder so it remains fixed in size, and allows for scrolling of all the messages.
<style>
.chat-holder {
height: 30px;
overflow-y: scroll;
}
</style>
<div class="pane">
<div class="chat-holder">
<div class="chat-item">
first msg
</div>
<div class="chat-item">
second msg
</div>
....
<div class="chat-item">
last msg
</div>
</div>
</div>
On page load, I scroll to the bottom by setting the scrollTop of the holder:
var $holder = $('.chat-holder');
$holder.scrollTop($holder[0].scrollHeight);
and this works fine.
Problem occurs when I start with div.pane set to display:none. Ideally, I look to have a separate event to "show/hide" the chat pane, and start with the pane hidden.
When the parent pane is hidden, the .chat-holder scrollHeight is 0, so on load, the hidden pane won't be scrolled to the bottom. Which means when the pane is displayed, the chats are not scrolled to the most recent chats. You can see this in the following snippet: with .pane initially not displayed, scroll isn't set. If you set .pane to start displayed, then scroll works fine.
Is there anyway to "scroll to the bottom" while parent is hidden? (Yes, I know I could do this by detecting when the chat-holder is exposed & then scroll to the bottom, but I'm looking to do it on load.)
$(function() {
var $holder = $('.chat-holder');
$holder.scrollTop($holder[0].scrollHeight);
$('button').click(function() {
$('.pane').toggleClass('active');
});
});
.chat-holder {
height: 30px;
overflow-y: scroll;
border: thin solid black;
}
.chat-item {
font-size: 20px;
}
.pane {
display: none;
}
.pane.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pane">
<div class="chat-holder">
<div class="chat-item">first msg</div>
<div class="chat-item">second msg</div>
<div class="chat-item">last msg</div>
</div>
</div>
<button>Toggle pane</button>
You can get creative and use opacity or visibility rules instead of display: none:
$(function() {
var $holder = $('.chat-holder');
$holder.scrollTop($holder[0].scrollHeight);
$('button').click(function() {
$('.pane').toggleClass('active');
});
});
.chat-holder {
height: 30px;
overflow-y: scroll;
border: thin solid black;
}
.chat-item {
font-size: 20px;
}
.pane {
opacity: 0;
position: absolute;
z-index: 1;
}
.pane.active {
opacity: 1;
position: relative;
}
button {
z-index: 2;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pane">
<div class="chat-holder">
<div class="chat-item">first msg</div>
<div class="chat-item">second msg</div>
<div class="chat-item">last msg</div>
</div>
</div>
<button>Toggle pane</button>
I have a mobile optimized website with a fixed header. I was thinking about implementing a disappearing functionality to the header in a similar manner as Chrome for Android.
The gist of the behavior is that when the user scrolls up the header gradually disappears with the content, and then gradually re-appears when scrolling up — unlike this question’s answer where the header appears/disappears completely.
My current header looks like this:
#import url('https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css');
#import url('https://fonts.googleapis.com/icon?family=Material+Icons');
header {
position: fixed;
top: 0;
width: 100%;
}
header nav {
box-shadow: none !important;
}
#content {
margin-top: 56px;
padding: 10px;
background: #f5f5f5;
}
<header>
<nav>
<div class="nav-wrapper">
My Awesome Website
<ul id="nav-mobile" class="right">
<li><a><i class="material-icons">settings</i></a>
</li>
</ul>
</div>
</nav>
</header>
<div id="content">
<p class="flow-text">This is where the rest of the website’s content should be</p>
<br><br>
<p>Don’t mind me, just adding a few blank lines to make this scrollable…</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
How can I implement this using jQuery?
The solution is fairly simple: store the scroll position, listen for the scroll event on <body> (or, generally speaking, whatever your topmost scrollable container is) and check if the position has increased or decreased, then perform the appropriate action (increase/decrease the header’s top).
The Math.min and Math.max are necessary to prevent the header from going flying across the screen in either direction. They limit the top value so that it's either hidden just above the viewport or pinned right at the top.
Here’s a working demo:
(function($) {
var $html = $('html'),
$header = $('header'),
lastScrollTop = $html.scrollTop();
var disappearingHeaderHandler = function() {
var scrollTop = $html.scrollTop(),
headerHeight = $header.outerHeight(),
headerTop = parseInt($header.css('top'), 10);
$header.css('top',
scrollTop > lastScrollTop
? Math.max(-headerHeight, headerTop - (scrollTop - lastScrollTop))
: Math.min(0, headerTop + (lastScrollTop - scrollTop))
);
lastScrollTop = scrollTop;
};
$(window).on('scroll', disappearingHeaderHandler);
disappearingHeaderHandler();
})(jQuery);
#import url('https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css');
#import url('https://fonts.googleapis.com/icon?family=Material+Icons');
header {
position: fixed;
top: 0;
width: 100%;
}
header nav {
box-shadow: none !important;
}
#content {
margin-top: 56px;
padding: 10px;
background: #f5f5f5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
<nav>
<div class="nav-wrapper">
My Awesome Website
<ul id="nav-mobile" class="right">
<li><a><i class="material-icons">settings</i></a>
</li>
</ul>
</div>
</nav>
</header>
<div id="content">
<p class="flow-text">This is where the rest of the website’s content should be</p>
<br>
<br>
<p>Don’t mind me, just adding a few blank lines to make this scrollable…</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
I am using materialize.css, materialize.js, and jquery 2.1.1.
I am trying to construct a sticky navbar after my .jumbotron1. I have the css all there but the jquery doesn't seem to be running.
I followed this tutorial : https://teamtreehouse.com/community/forum-tip-create-a-sticky-navigation-with-css-and-jquery-2
the css
body {
padding-top: 400px;
}
.row {
margin-bottom: 0;
}
.jumbotron1 {
width: 100%;
height: 400px;
background-color: #f5f5f5;
position: fixed;
top: 0;
}
/* navbar styling */
nav.navbarSticky {
margin-top: 0;
position: relative;
}
nav {
z-index: 998;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
}
/*sticky navbar styling*/
.jumbotron1 .stuck {
position: fixed;
width: 100%;
top: 0;
}
/*lineup styling*/
.lineup1position {
position: relative;
}
.lineup1 {
height: 800px;
background-color: #f5f5f5;
}
the html
<!--jumbotron 1-->
<div class="container">
<div class="row">
<div class="col s12 valign-wrapper jumbotron1">
<p class="valign center-block center-align">
Andrea + Fiance<br>
</p>
</div>
</div>
</div>
<!--navbar-->
<nav class="navbarSticky">
<div class="nav-wrapper">
<ul id="nav-mobile">
<li>line up</li>
<li>tickets</li>
<li>history</li>
<li>venue</li>
<li>details</li>
</ul>
</div>
</nav>
<!--lineup1-->
<div class="container lineup1position">
<div class="row">
<div class="col s8 offset-s2 lineup1">
<p class="center-align">
lineup<br>
andrea - fiance<br>
made of honor - best man<br>
bridesmaid - groomsman - bridesmaid - groomsman<br>
</p>
</div>
</div>
</div>
the javascript
var sticky = $(".navbarSticky")
var stuck = "stuck";
var hdr = $('.jumbotron1').height();
$(window).scroll(function() {
if( $(this).scrollTop() > hdr ) {
sticky.addClass(stuck);
} else {
sticky.removeClass(stuck);
}
});
position:relative is overriding position:fixed
In this css class
nav.navbarSticky {
margin-top: 0;
position: relative;
}
Here position relative is overriding position:fixed in stuck class
Take a look at this snippet
So I made this changes
New classes
#topContainer{
display:inline-block;
width:100%;
z-index:1001;
}
.stuck {
width: 100%;
display:inline-block;
top: 10px;
z-index:1001;
position:fixed !important;
}
.fixContainer{
position:fixed !important;
top:0px;
}
HTML
Added id attribute to top container
<div class="container" id ="topContainer">
// rest of code
JS
var sticky = $(".navbarSticky")
var stuck = "stuck";
var hdr = $('.jumbotron1').height();
$(window).scroll(function() {
console.log($(this).scrollTop(),hdr)
if( $(this).scrollTop() > hdr ) {
$("#topContainer").addClass("fixContainer") //Change here
sticky.addClass(stuck);
} else {
$("#topContainer").removeClass("fixContainer") //Change here
sticky.removeClass(stuck);
}
});
You can check this JSFIDDLE.
Currently the div.lineup1position is scrolling below li because of z-index property attached to li Since I am not sure how div.lineup1position is going to scroll so leaving it on you
Edit: addClass & removeClass are properly used.So removing that part
Your sticky class is not on the correct element
CSS (only works if .jumbotron1 has .stuck):
/*sticky navbar styling*/
.jumbotron1 .stuck {
position: fixed;
width: 100%;
top: 0;
}
jQuery (is stetting .stuck to .navbarSticky)
sticky.addClass(stuck);
Edit: In response to the comment below.
You want .navbarSticky to be stuck, and you are using the same styling as .jumbotron1, so you need a CSS selector like
.jumbotron1,
.stuck {
Also bear in mind that since your jumbotron is set to width: 100%; that once you add the comma, your nav may be under the jumbotron. I forget the natural z-index order of html, but in any case, to fix it, add:
.stuck {
z-index: 10;
}
This, BTW, you only add to .stuck do not add it to .jumbotron1.
I want to have a long page, with a fixed top 100px div, and a fixed 50px bottom div. However, I want the bottom div to scroll as you scroll down the page.
Its hard to explain, but the best example of this is on the front page of PayPal.com
On the first page load, the bottom div looks like it is fixed, and as you adjust the height of the browser window, that div stays at the bottom. Yet as you scroll down the page it is not fixed.
Can anyone explain how they have done this? I am trying to re-create something similar, but cant see how they have managed it.
As far as I can see they have this html...
<div id="fixed-top">
<header class="table-row">
// header content
</header>
<div class="table-row table-row-two">
// Video content
</div>
<div class="table-row">
//bottom content
</div>
</div>
And this CSS...
#fixed-top {
height: 100%;
width: 100%;
display: table;
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.table-row {
display: table-row;
}
But that alone doesn't do it. I also can't see any js thats getting window height and applying it to the main fixed div.
Help! :)
EDIT:
Have just found a way to do it with javascript, controlling the height of the middle row using the window height, minus the 150px for the header and third row.
jQuery(document).ready(function(){
$('div.table-row-two').css({'height':(($(window).height())-150)+'px'});
$(window).resize(function(){
$('div.table-row-two').css({'height':(($(window).height())-150)+'px'});
});
});
But saying that, Zwords CSS only method seems like a winner.
From what I understand, you are looking for something like a sticky footer. So basically if the content is not enough, the footer should go sit at the bottom like its fixed, but if content comes in, it should scroll down like other content.
Try this - http://css-tricks.com/snippets/css/sticky-footer/
First off, you'll need to set the height of the body and html tag, otherwise the table won't take the full screen. Then I altered your code, made it a bit easier.
HTML:
<div id="fixed-top">
<header>
// header content
</header>
<div>
// Video content
</div>
<div>
//bottom content
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
#fixed-top {
display: table;
width: 100%;
height: 100%;
}
#fixed-top > * { /* makes all the direct children of #fixed-top a table row*/
display: table-row;
background: lightblue;
}
#fixed-top > *:nth-child(1) {
background: lightgreen;
height: 40px;
}
#fixed-top > *:nth-child(3) {
background: lightgreen;
height: 25%;
}
You can either set the height to a fix height (in px) or percentages. If you only give two of the three rows a height, the third one will automaticly fill up the rest space.
Also, check this demo.
Check this fiddle / Fullscreen
Using display:table;,display:table-row;,min-height to adjust to screen
HTML
<div class="wrapper">
<div class="row">menu</div>
<div class="row">content</div>
<div class="row">footer</div>
</div>
<div class="wrapper">
<div class="row">content1</div>
<div class="row">content2</div>
<div class="row">content3</div>
</div>
CSS
html,body,.wrapper{
width:100%;
height:100%;
margin:0px auto;
padding:0px;
}
.wrapper{
display:table;
border:1px solid black;
}
.wrapper .row{
display:table-row;
background-color:rgb(220,220,220);
}
.wrapper .row:nth-of-type(1){
min-height:15px;
}
.wrapper .row:nth-of-type(2){
height:100%;
background-color:white;
}
.wrapper .row:nth-of-type(3){
min-height:15px
}
You can do this easily with jQuery using $(window).height() and subtracting your footer/header's heights. See Fiddle for an example.