I've recently started making a small website for my computer science lessons and I've got a problem. Everything was going well to a point. I wanted to use flexbox and media queries so I did but I also wanted to add a hamburger menu. I tried to make it in JavaScript but it does not work properly, actually, it does not work. Could anybody help me and direct me what is wrong there? in addition you could tell me if I can do it using only CSS and if it would be a good solution? thanks for all responses.
Codepen
function myFunction() {
var x = document.getElementsByClassName("ham");
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
* {
margin: 0;
padding: 0;
}
body {
background: white;
font-family: 'Quicksand', sans-serif;
}
.nav {
display: flex;
background: red;
box-shadow: 1px 1px 100px black;
flex-wrap: wrap;
align-content: flex-end;
}
.nav li:first-child {
margin-right: auto;
}
.nav a {
display: block;
color: #fff;
text-decoration: none;
margin: 10px;
padding: 20px;
transition: 1.3s;
}
.art {
padding-top: 30px;
font-size: 25px;
}
.img {
width: 100%;
border: black solid 1px;
}
.nav li a:hover {
transition: 1.3s;
color: yellow;
}
.logo {
background: #000;
display: block;
color: #fff;
text-decoration: none;
}
nav ul {
list-style-type: none;
}
.first-section article {
margin-top: 100px;
margin-bottom: 100px;
}
.first-section h2 {
padding: 20px;
margin: 25px;
}
.first-section {
max-width: 1000px;
margin: 0 auto;
}
.first-section article p {
text-align: justify;
}
.media {
width: 100%;
margin: 100px 0 0 0;
}
.read-more:hover {
color: darkblue;
}
.read-more {
font-family: 'Quicksand', sans-serif;
font-size: 20px;
border: 0px;
background: white;
display: block;
}
.read-more a {
text-decoration: none;
}
.media .parent {
display: flex;
flex-wrap: wrap;
}
.media .child {
flex: 1;
width: 100%;
margin: 0 auto;
height: 200px;
text-align: center;
vertical-align: middle;
}
/*HAMBURGER*/
div.al {
width: 40px;
position: absolute;
right: 1em;
top: 1em;
}
.hamburger {
display: none;
width: 40px;
height: 35px;
border: 0;
border-top: 5px solid #ffffff;
background: transparent;
position: relative;
transition: 0.3s transform linear;
}
.hamburger::before,
.hamburger::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
border-top: 5px solid #ffffff;
transform: translateY(10px);
}
.hamburger::after {
transform: translateY(25px);
transition: 0.3s transform linear;
}
.hamburger:focus {
transform: rotate(45deg) translateY(5px);
border: none;
}
.hamburger:focus::after {
transform: rotate(-90deg) translateX(-10px);
}
footer {
width: 100%;
text-align: center;
bottom: 0;
background: grey;
}
.fb {
background: url(facebook.png) no-repeat top;
height: 100%;
}
.tw {
background: url(twitter.png) no-repeat top;
height: 100%;
}
.gplus {
background: url(google-plus.png) no-repeat top;
height: 100%;
}
#media only screen and (max-width: 600px) {
.nav {
text-align: center;
flex-direction: column;
}
.hamburger {
display: block;
}
.parent {
text-align: center;
flex-direction: column;
}
.first-section {
margin: 15px;
}
.art {
font-size: 15px;
}
.ham {
display: block;
}
.hamburger {
display: block;
}
button.hamburger:focus li.ham {
display: block;
}
}
#media only screen and (max-width: 1050px) {
.first-section {
margin: 15px;
}
}
<link href="https://fonts.googleapis.com/css?family=Quicksand:200,300,400" rel="stylesheet">
<div id="wrapper">
<nav>
<div class="al" onclick="myFunction()"><button class="hamburger"></button></div>
<ul class="nav">
<li>
<a href="#" class="logo">
<h1>logo</h1>
</a>
<li>
<li class="ham">HOME</li>
<li class="ham">O NAS</li>
<li class="ham">OFERTA</li>
<li class="ham">KONTAKT</li>
</ul>
</nav>
</div>
<section class="first-section">
<article>
<h2>„Zadbaj, by nie zabijał” – polski fanpage namawia, by nie wypuszczać kotów</h2>
<img src="pr%C4%99gowany-kot-w-oknie-864x575.jpg" alt="" class="img">
<br><br>
<button class="read-more">Czytaj dalej...</button>
</article>
<article>
<h2>Artykuł</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet lacinia lacus, quis euismod velit rhoncus sed. Donec quis magna dictum, volutpat felis eu, mattis augue. Nullam magna justo, gravida eu consequat sed, interdum ac nisl. Nulla eu
venenatis urna. Curabitur consequat auctor tellus, id aliquet lectus ultricies id. Nam sit amet tortor vulputate, posuere elit vel, pretium eros. Proin risus tellus, blandit ut pharetra a, pretium in ipsum. Donec nunc magna, euismod quis vulputate
sed, tristique eget nisi. Nam dui elit, tempus sed tempor in, tristique vel dolor. Nullam eu massa id enim vulputate imperdiet. Cras congue ipsum in lectus cursus accumsan. Cras eget dui euismod, imperdiet arcu molestie, eleifend libero. Aenean
malesuada metus id consectetur efficitur. Praesent magna nulla, congue eget blandit quis, mattis porta eros. Cras et diam pulvinar, porttitor purus vitae, vestibulum sem. Fusce id eleifend nisl. <br><br> Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae; Nullam non lectus orci. Nullam mauris metus, interdum ac ornare vitae, bibendum quis odio. Mauris ex ex, finibus efficitur rutrum ut, faucibus quis sem. Nullam sit amet tortor consectetur, sagittis
magna at, aliquam ligula. Etiam condimentum urna sollicitudin faucibus dictum. Mauris imperdiet ultricies interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non magna rhoncus, dapibus mauris
eu, porttitor neque. Duis aliquet rutrum augue id aliquet. Maecenas auctor tellus lorem, id efficitur libero congue bibendum. <br><br> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam non lectus orci.
Nullam mauris metus, interdum ac ornare vitae, bibendum quis odio. Mauris ex ex, finibus efficitur rutrum ut, faucibus quis sem. Nullam sit amet tortor consectetur, sagittis magna at, aliquam ligula. Etiam condimentum urna sollicitudin faucibus
dictum. Mauris imperdiet ultricies interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non magna rhoncus, dapibus mauris eu, porttitor neque. Duis aliquet rutrum augue id aliquet. Maecenas
auctor tellus lorem, id efficitur libero congue bibendum. <br><br>
</p>
<button class="read-more">Czytaj dalej...</button>
</article>
<article>
<h2>Artykuł</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet lacinia lacus, quis euismod velit rhoncus sed. Donec quis magna dictum, volutpat felis eu, mattis augue. Nullam magna justo, gravida eu consequat sed, interdum ac nisl. Nulla eu
venenatis urna. Curabitur consequat auctor tellus, id aliquet lectus ultricies id. Nam sit amet tortor vulputate, posuere elit vel, pretium eros. Proin risus tellus, blandit ut pharetra a, pretium in ipsum. Donec nunc magna, euismod quis vulputate
sed, tristique eget nisi. Nam dui elit, tempus sed tempor in, tristique vel dolor. Nullam eu massa id enim vulputate imperdiet. Cras congue ipsum in lectus cursus accumsan. Cras eget dui euismod, imperdiet arcu molestie, eleifend libero. Aenean
malesuada metus id consectetur efficitur. Praesent magna nulla, congue eget blandit quis, mattis porta eros. Cras et diam pulvinar, porttitor purus vitae, vestibulum sem. Fusce id eleifend nisl. <br><br> Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae; Nullam non lectus orci. Nullam mauris metus, interdum ac ornare vitae, bibendum quis odio. Mauris ex ex, finibus efficitur rutrum ut, faucibus quis sem. Nullam sit amet tortor consectetur, sagittis
magna at, aliquam ligula. Etiam condimentum urna sollicitudin faucibus dictum. Mauris imperdiet ultricies interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non magna rhoncus, dapibus mauris
eu, porttitor neque. Duis aliquet rutrum augue id aliquet. Maecenas auctor tellus lorem, id efficitur libero congue bibendum. <br><br> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam non lectus orci.
Nullam mauris metus, interdum ac ornare vitae, bibendum quis odio. Mauris ex ex, finibus efficitur rutrum ut, faucibus quis sem. Nullam sit amet tortor consectetur, sagittis magna at, aliquam ligula. Etiam condimentum urna sollicitudin faucibus
dictum. Mauris imperdiet ultricies interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non magna rhoncus, dapibus mauris eu, porttitor neque. Duis aliquet rutrum augue id aliquet. Maecenas
auctor tellus lorem, id efficitur libero congue bibendum. <br><br>
</p>
<button class="read-more">Czytaj dalej...</button>
</article>
<article>
<h2>Artykuł</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet lacinia lacus, quis euismod velit rhoncus sed. Donec quis magna dictum, volutpat felis eu, mattis augue. Nullam magna justo, gravida eu consequat sed, interdum ac nisl. Nulla eu
venenatis urna. Curabitur consequat auctor tellus, id aliquet lectus ultricies id. Nam sit amet tortor vulputate, posuere elit vel, pretium eros. Proin risus tellus, blandit ut pharetra a, pretium in ipsum. Donec nunc magna, euismod quis vulputate
sed, tristique eget nisi. Nam dui elit, tempus sed tempor in, tristique vel dolor. Nullam eu massa id enim vulputate imperdiet. Cras congue ipsum in lectus cursus accumsan. Cras eget dui euismod, imperdiet arcu molestie, eleifend libero. Aenean
malesuada metus id consectetur efficitur. Praesent magna nulla, congue eget blandit quis, mattis porta eros. Cras et diam pulvinar, porttitor purus vitae, vestibulum sem. Fusce id eleifend nisl. <br><br> Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae; Nullam non lectus orci. Nullam mauris metus, interdum ac ornare vitae, bibendum quis odio. Mauris ex ex, finibus efficitur rutrum ut, faucibus quis sem. Nullam sit amet tortor consectetur, sagittis
magna at, aliquam ligula. Etiam condimentum urna sollicitudin faucibus dictum. Mauris imperdiet ultricies interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non magna rhoncus, dapibus mauris
eu, porttitor neque. Duis aliquet rutrum augue id aliquet. Maecenas auctor tellus lorem, id efficitur libero congue bibendum. <br><br> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam non lectus orci.
Nullam mauris metus, interdum ac ornare vitae, bibendum quis odio. Mauris ex ex, finibus efficitur rutrum ut, faucibus quis sem. Nullam sit amet tortor consectetur, sagittis magna at, aliquam ligula. Etiam condimentum urna sollicitudin faucibus
dictum. Mauris imperdiet ultricies interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin non magna rhoncus, dapibus mauris eu, porttitor neque. Duis aliquet rutrum augue id aliquet. Maecenas
auctor tellus lorem, id efficitur libero congue bibendum. <br><br>
</p>
<button class="read-more">Czytaj dalej...</button>
</article>
</section>
<footer>
<h2>Kuba Chimiak</h2>
<p>2018</p>
<section class="media">
<div class="parent">
<div class="child">
<div class="fb"></div>
</div>
<div class="child">
<div class="tw"></div>
</div>
<div class="child">
<div class="gplus"></div>
</div>
</div>
</section>
</footer>
You were close...
I did some changes like adding google material font, and I got the hamburger up in the upper right corner. You should probably place it somewhere better
https://codepen.io/anon/pen/gBpbmJ
When you click it, it is followed by a function that says "jesus h hamburger". In real life, you would probably rather do something like have a menu slide in and out.
//this function should be replaced with some actual menu show/hide logic.
function myFunction(){
alert("jesus f hamburger");
}
I would also recommend to use a framework that fixes this kind of stuff for you. Maybe bootstrap would work?
Related
My website has an onscroll fixed header at the top, but whenever I try to scroll it glitches out. When you try to scroll, it cuts off the top part of the text and seems to lurch into place. I'm trying to make it looks seamless, like this demo
Here's the code for my website. If I've missed anything let me know.
body {
margin: 0;
}
.top-container {
background-image: url("https://picsum.photos/400/200");
padding: 170px;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: relative;
max-width: 100%;
}
.menuBar {
background-color: rgb(168, 123, 81);
padding: 30px 40px;
text-align: left;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 102px;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex1 {
background-color: rgba(230, 199, 177, 255);
width: 50%;
margin: 10px;
text-align: center;
font-size: 15px;
line-height: 25px;
}
.flex2 {
background-image: url("https://picsum.photos/400/200");
background-size: contain;
background-repeat: no-repeat;
width: 600px;
margin: 10px;
text-align: center;
margin-top: 100px;
}
<div class="top-container"></div>
<div class="menuBar" id="menuBar"> MenuBar</div>
<div class="mainContent">
<div class="flex-container">
<div class="flex1">
<h3> Welcome to Charm Thai Restaurant Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices ligula quis nibh dignissim interdum. Proin consequat sem et lacus accumsan aliquam. Vestibulum sodales pretium ex at cursus. Maecenas efficitur
finibus dictum. Duis nec quam ultrices, laoreet magna vel, auctor nunc. Sed ultricies lacus consequat velit lacinia, in consequat sapien pretium. Vestibulum sagittis ornare odio at elementum. Vestibulum sodales mauris ut tempor posuere. Nulla
orci dolor, porta sed risus viverra, consectetur hendrerit sapien. Phasellus tristique ante augue, id efficitur nisi placerat nec. Nam rhoncus erat quis feugiat sollicitudin. Mauris id magna sit amet risus bibendum pretium. Donec in mauris mi.
Morbi dignissim porttitor iaculis. Praesent mollis placerat velit, et blandit nibh venenatis nec. Fusce ut ultrices sem. Nunc eget lectus quis mauris dignissim tempor id placerat tellus. Nam vitae semper augue. Quisque rutrum laoreet urna eget
posuere. Nulla cursus tincidunt elit et placerat. Duis sed pellentesque magna, non lacinia tortor. Nam nisl dui, rutrum et sollicitudin quis, condimentum quis augue. Aenean varius, nisi at luctus dapibus, diam magna dictum ex, ac sodales ex ex
sit amet ligula. Donec pulvinar varius est. Nam vitae rutrum dolor. Donec lacinia, ex nec tempus venenatis, ligula justo dapibus diam, cursus semper augue mauris ac odio. Aliquam a arcu nec lacus rhoncus facilisis. Vestibulum sollicitudin lorem
id metus auctor, sit amet ullamcorper mauris fringilla. In in erat eu eros volutpat bibendum sit amet fermentum enim. Vestibulum dictum orci sed tincidunt posuere. Donec viverra nunc ut sem viverra, et vestibulum mauris feugiat. Donec imperdiet
quam dui, vitae vehicula ipsum hendrerit non. Phasellus nec augue eu erat posuere varius in quis odio. Nunc justo turpis, scelerisque non leo vel, laoreet ornare neque. Donec a neque ac nibh ultricies tristique id vel magna. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque viverra ante in magna fringilla, vel sodales lectus feugiat. Donec sodales, odio eget dictum scelerisque, urna massa fringilla quam, nec pharetra erat dui at massa. Maecenas
suscipit velit id scelerisque consectetur. Praesent ac egestas enim. Vestibulum nulla turpis, hendrerit nec sodales vitae, congue at felis. Cras auctor ac quam sed fermentum. Quisque libero est, aliquam ac lorem a, semper molestie mi. Cras suscipit
eu erat eget hendrerit.
</h3>
</div>
<div class="flex2">2</div>
</div>
</div>
<script>
window.onscroll = function() {
myFunction()
};
var header = document.getElementById("menuBar");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
Use the CSS built-in position: sticky
body {
margin: 0;
}
.menuBar {
position: sticky;
top: 0;
z-index: 1;
background-color: rgb(168, 123, 81);
padding: 30px 40px;
text-align: left;
}
.top-container {
background-image: url("https://picsum.photos/400/200");
padding: 170px;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: relative;
max-width: 100%;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex1 {
background-color: rgba(230, 199, 177, 255);
width: 50%;
margin: 10px;
text-align: center;
font-size: 15px;
line-height: 25px;
}
.flex2 {
background-image: url("https://picsum.photos/400/200");
background-size: contain;
background-repeat: no-repeat;
width: 600px;
margin: 10px;
text-align: center;
margin-top: 100px;
}
<div class="top-container"></div>
<div class="menuBar" id="menuBar">MenuBar</div>
<div class="mainContent">
<div class="flex-container">
<div class="flex1">
<h3> Welcome to Charm Thai Restaurant Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices ligula quis nibh dignissim interdum. Proin consequat sem et lacus accumsan aliquam. Vestibulum sodales pretium ex at cursus. Maecenas efficitur
finibus dictum. Duis nec quam ultrices, laoreet magna vel, auctor nunc. Sed ultricies lacus consequat velit lacinia, in consequat sapien pretium. Vestibulum sagittis ornare odio at elementum. Vestibulum sodales mauris ut tempor posuere. Nulla
orci dolor, porta sed risus viverra, consectetur hendrerit sapien. Phasellus tristique ante augue, id efficitur nisi placerat nec. Nam rhoncus erat quis feugiat sollicitudin. Mauris id magna sit amet risus bibendum pretium. Donec in mauris mi.
Morbi dignissim porttitor iaculis. Praesent mollis placerat velit, et blandit nibh venenatis nec. Fusce ut ultrices sem. Nunc eget lectus quis mauris dignissim tempor id placerat tellus. Nam vitae semper augue. Quisque rutrum laoreet urna eget
posuere. Nulla cursus tincidunt elit et placerat. Duis sed pellentesque magna, non lacinia tortor. Nam nisl dui, rutrum et sollicitudin quis, condimentum quis augue. Aenean varius, nisi at luctus dapibus, diam magna dictum ex, ac sodales ex ex
sit amet ligula. Donec pulvinar varius est. Nam vitae rutrum dolor. Donec lacinia, ex nec tempus venenatis, ligula justo dapibus diam, cursus semper augue mauris ac odio. Aliquam a arcu nec lacus rhoncus facilisis. Vestibulum sollicitudin lorem
id metus auctor, sit amet ullamcorper mauris fringilla. In in erat eu eros volutpat bibendum sit amet fermentum enim. Vestibulum dictum orci sed tincidunt posuere. Donec viverra nunc ut sem viverra, et vestibulum mauris feugiat. Donec imperdiet
quam dui, vitae vehicula ipsum hendrerit non. Phasellus nec augue eu erat posuere varius in quis odio. Nunc justo turpis, scelerisque non leo vel, laoreet ornare neque. Donec a neque ac nibh ultricies tristique id vel magna. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque viverra ante in magna fringilla, vel sodales lectus feugiat. Donec sodales, odio eget dictum scelerisque, urna massa fringilla quam, nec pharetra erat dui at massa. Maecenas
suscipit velit id scelerisque consectetur. Praesent ac egestas enim. Vestibulum nulla turpis, hendrerit nec sodales vitae, congue at felis. Cras auctor ac quam sed fermentum. Quisque libero est, aliquam ac lorem a, semper molestie mi. Cras suscipit
eu erat eget hendrerit.
</h3>
</div>
<div class="flex2">2</div>
</div>
</div>
I'm working on a website where I have a huge content, that I want to be scrollable. However, my code only works in Chrome and not in Firefox or Edge.
It seems to work when I set a fixed height for the #content like height: 200px;. But I want the content to always fill the rest of the screen height. The height of the header can change when I have a smaller screen, so CSS calc wouldn't work out I think.
I could use javascript to calculate the height every time the screen size changes, but I would prefer a more elegant way without js. (If there is one)
html, body {
height: 100%;
}
body {
margin: 0px;
}
#container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow-y: hidden;
}
#header {
background-color: blue;
min-height: 50px;
height: 50px;
}
#content-container {
flex: 1 1 auto;
display: flex;
align-items: stretch;
}
#nav {
background-color: red;
width: 150px;
min-width: 150px;
}
#content {
font-size: 15px;
padding: 25px;
overflow-y: scroll;
}
<div id="container">
<div id="header"></div>
<div id="content-container">
<div id="nav"></div>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut dui id mauris pharetra auctor eu sit amet ante. Nunc sodales
nisl quis purus lacinia fringilla. Mauris mollis sit amet metus et volutpat. Cras non ante lectus. Vestibulum ullamcorper
ligula at iaculis pellentesque. Fusce nec fringilla libero, sed maximus eros. Sed aliquam semper augue, ac vulputate
neque lobortis eget. Cras pulvinar, tortor non auctor lobortis, nulla dui semper augue, ut dictum massa magna vel urna.
Mauris fringilla iaculis mattis. Mauris at mauris sed mauris fringilla rhoncus. Mauris vestibulum arcu eu lectus pellentesque
facilisis. Nulla auctor nibh ac neque tincidunt rutrum. Vestibulum dapibus elit ex. Praesent id neque quis felis sodales
elementum. Quisque condimentum pellentesque finibus. Morbi ut dictum est, vel iaculis lectus. Vivamus sed nunc scelerisque,
mattis velit id, euismod odio. Suspendisse potenti. Suspendisse eros ante, eleifend ut dictum vitae, posuere sit amet
turpis. Suspendisse congue vestibulum nulla a tincidunt. Nulla facilisi. Nullam vel leo neque. Suspendisse potenti. Curabitur
vulputate vestibulum turpis, vitae rhoncus ante gravida sed. Sed vitae efficitur eros, consectetur ullamcorper nisl.
Nunc turpis massa, dapibus ac elit eget, rutrum tincidunt nisi. Proin nec metus id metus ornare sollicitudin. Integer
turpis purus, aliquam non est at, ultricies facilisis eros. Integer luctus nisl est, eget laoreet quam commodo ut. Proin
in enim volutpat, viverra nunc non, elementum est. Integer eu placerat nisl. Nullam posuere maximus metus, ut blandit
tellus. Vestibulum tristique luctus massa, eget mollis augue lobortis a. Curabitur fermentum id enim ac vestibulum. Praesent
commodo orci cursus lobortis sodales. Nam pellentesque vulputate enim, eu porttitor libero dignissim in. Fusce ligula
odio, facilisis sit amet mollis eget, tempor et erat. Quisque sit amet arcu mi. Duis sed tortor ex. Nunc elementum neque
ex, in luctus sem egestas sed. Etiam quis lorem tincidunt, commodo lacus non, cursus tellus. Maecenas a bibendum ex.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis ut ullamcorper felis.</div>
</div>
</div>
Here's also a codepen
update like
#content-container {
flex: 1 1 auto;
display: flex;
align-items: stretch;
overflow-y: hidden;
}
Here is the demo
This is a known issue in Firefox, see Bug 1042151 - flex-direction: column-reverse (or "flex-direction:column; justify-content:flex-end") with overflow-y: auto is not scrollable
https://github.com/philipwalton/flexbugs/issues/108
update Like
#content-container {
flex: 1 1 auto;
display: flex;
align-items: stretch;
height:100%
}
Could you please use max-height instead of height
I am writing JQuery script to determine when an element of fixed height is filled by content equalling greater height, at which point I want it to create a new identical element for all of the overflowing content to flow into. I want it to do this automatically on repeat.
I have this down for the most part, but am experiencing a problem because of the "for each" loop I'm running on the child elements.
While the script effectively creates a new page once the first page has overflowed, and it successfully moves the overflowing content into the new page, it does this for each new child thereafter irregardless of the fact that the content height should be reset. The way I see it, I need to prompt the creation of the new page in the loop to transfer the current child element over into it. I tried escaping the loop with a "return false;" which breaks the entire script.
HTML:
<div id="page-container">
<div class="page">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla ipsum vitae neque fermentum, a sagittis magna lacinia. Nullam eget nibh nulla. Vivamus tellus lectus, ullamcorper sit amet diam eget, placerat gravida enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce condimentum risus sed nunc feugiat maximus. Sed tincidunt nisi velit, et hendrerit dolor suscipit eu. Aenean dui nulla, tempus eu posuere congue, iaculis eu sapien. Phasellus volutpat nisi dui, a malesuada justo posuere vitae. Sed dolor turpis, porta a libero sed, rutrum elementum augue. Proin diam nibh, gravida eget velit nec, tempor consectetur felis.</p>
<p>Aliquam interdum accumsan nisl eget ullamcorper. Morbi id ornare dui. Aliquam euismod efficitur magna ut vestibulum. Sed pellentesque metus vitae quam feugiat, eu ultricies ipsum tristique. Ut in diam quis nulla aliquam dictum. Aenean sapien leo, rutrum quis posuere quis, convallis sit amet nisi. Aenean ac pellentesque metus. Phasellus luctus sapien at massa interdum lacinia. Suspendisse lacus eros, luctus pellentesque diam a, tempor semper nunc. Vestibulum accumsan nec felis vitae finibus. In viverra aliquet est, eu semper tellus. Etiam interdum dignissim euismod. Curabitur iaculis tellus at semper suscipit. Quisque sed risus neque.</p>
<p>Phasellus tincidunt diam id finibus tempor. Pellentesque vel ultrices neque. Suspendisse potenti. Pellentesque eget gravida sapien. Pellentesque malesuada bibendum viverra. Phasellus at ante nec turpis placerat placerat. Pellentesque sed nisl ut eros finibus faucibus. Duis dignissim ut sapien eget faucibus. Mauris sem risus, consequat scelerisque dui quis, consectetur vestibulum nisi. Morbi nisl nisl, lobortis vel risus rhoncus, accumsan scelerisque nisi.</p>
<p>Maecenas odio arcu, aliquet in accumsan id, blandit vitae tortor. Nunc nec aliquet nisl. Nullam tempus turpis dolor, quis vestibulum tortor mollis vel. Sed sed ultrices ex. Curabitur accumsan arcu nec elit molestie tristique in quis lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam varius sapien gravida finibus euismod. Mauris semper consectetur massa, ut sagittis arcu. Mauris suscipit lectus id dolor semper lacinia.</p>
<p>Nunc a arcu diam. Fusce at mauris molestie, tempor nulla sed, mollis odio. Cras commodo nibh a felis aliquet tempor. Donec vitae nisi ut leo tincidunt auctor. Nam eleifend non odio quis rutrum. Curabitur scelerisque orci vel felis accumsan finibus. Vivamus ut hendrerit diam, in blandit metus. Vestibulum mollis odio arcu, ac elementum leo iaculis sit amet. Vestibulum mollis mattis nunc molestie pulvinar. Etiam ante nibh, ullamcorper nec turpis id, pretium euismod nisi. Aliquam scelerisque, metus ac laoreet iaculis, nulla mauris tristique ligula, sed sagittis risus massa quis lectus. Maecenas nec nisl ullamcorper, vehicula dui et, hendrerit risus. Quisque volutpat urna imperdiet lobortis molestie. Quisque at dapibus quam. Etiam neque mi, bibendum sit amet facilisis a, ullamcorper a enim.</p>
<p>Cras quam massa, facilisis ut elementum vel, maximus ut augue. In sem odio, blandit eu urna eget, sollicitudin convallis eros. Praesent eget lorem nec lorem faucibus euismod. Phasellus ullamcorper tristique velit sed facilisis. Etiam et lectus fringilla, tristique urna sit amet, sagittis lacus. Phasellus at erat malesuada, imperdiet nunc vel, tempor mi. Vestibulum vulputate felis sed lectus fermentum dignissim. Quisque dictum posuere tincidunt. In sit amet ante sodales, iaculis ipsum sit amet, dignissim ex. In nec turpis leo. Donec iaculis pulvinar neque nec maximus.</p>
<p>Cras auctor posuere dolor. Quisque venenatis risus sit amet lacus viverra, vitae placerat sem scelerisque. Curabitur id pellentesque lacus. In mi eros, tincidunt nec est id, auctor elementum felis. Aenean varius elementum aliquam. Fusce vehicula ipsum eget enim tincidunt, id maximus felis condimentum. Suspendisse at dignissim enim, vitae viverra sem.</p>
<p>Vivamus vitae mi id mauris varius pretium. Mauris eu nibh nec eros varius placerat. Mauris ut nulla consectetur, egestas ante id, congue leo. Vestibulum sit amet ipsum ligula. Suspendisse sed dui sed ante tempor volutpat. Duis placerat, augue non sagittis ultrices, nibh arcu fringilla dolor, eu vestibulum mi lectus et quam. Sed euismod eget neque ut venenatis. Cras metus sem, malesuada id tristique vitae, aliquet et felis. Vivamus sed elementum tortor, eget cursus mi. Suspendisse dui est, feugiat vulputate velit ac, consectetur viverra mi. Aenean porttitor turpis leo, a convallis lacus tincidunt at. Pellentesque quam nulla, dictum id sem maximus, aliquet maximus lorem.</p>
<p>Mauris ut porttitor purus, a sagittis purus. Cras at mauris nec est aliquam malesuada ut at diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sodales vestibulum dui vitae eleifend. Proin a lacus id lacus pulvinar aliquet. Donec vel eros sem. Fusce pharetra tincidunt odio ac malesuada. Aliquam pellentesque purus non rhoncus fermentum. Integer ultrices id neque id congue. Quisque mollis non velit quis tincidunt. Pellentesque semper commodo massa, vitae dapibus leo feugiat vel. Duis sit amet dignissim nibh.</p>
<p>Curabitur vitae pharetra mi. Nullam id ligula sed orci cursus suscipit a ut erat. In non fermentum neque. Aenean quis luctus tellus, sit amet accumsan leo. Aenean vel libero rhoncus, cursus nisl non, maximus lorem. Aliquam facilisis leo leo. Maecenas semper nunc arcu, eu blandit ante posuere sed. Phasellus dapibus purus lacus, interdum dapibus est tristique vel. Mauris luctus est a orci ultricies, vel gravida diam porta. Donec fermentum vestibulum bibendum. Quisque pretium maximus sollicitudin. Praesent mollis neque nisl. Praesent dignissim porttitor commodo. Donec non sapien fringilla, iaculis ante sed, consectetur quam. Maecenas condimentum lorem leo, at varius nisi malesuada sit amet. Sed vehicula magna leo, id accumsan ex ultricies eget.</p>
</div>
</div>
CSS:
/* Fonts */
/** Garamond Cormorant (regular, italic, bold and bold italic) **/
#import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,400i,700,700i');
/* General / boilerplate styles */
/** Page **/
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html, body { height: 100%; }
html { font-size: 6.25%; }
body { margin: 0; }
/** Typography **/
body { font-family: 'Cormorant Garamond', serif; font-size: 16em /* 16px */; }
h1, h2, h3, h4, h5, h6, p { margin: 0 0 0.5rem 0; }
h1 { font-size: 4em; } h2 { font-size: 3.5em; } h3 { font-size: 3em; }
h4 { font-size: 2.5em; } h5 { font-size: 2em; } h6 { font-size: 1.5em; }
p { font-size: 1em; line-height: 1.5; }
.paragraph { text-indent: 2em; }
.center { text-align: center; }
.justify { text-align: justify; }
blockquote { margin: 1rem 4em 1rem 4em; }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
html[lang="fr"] q { quotes: "\00ab" "\00bb"; }
cite { font-style: normal; }
cite:before { content: "\0020\2014\0020"; }
/** Media **/
figure { margin: 1em; text-align: center; }
#media (min-width: 750px) {
.inline-left { float: left; margin: 1em 1em 1em 0; }
.inline-right { float: right; margin: 1em 0 1em 1em; }
}
figure img { display: inline; max-width: 100%; margin: 0.5em 0; }
.greyscale { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
.sepia { -webkit-filter: grayscale(100%); filter: sepia(100%); }
/* Thematic styles */
body {
padding: 1em;
background: url(https://images.freecreatives.com/wp-content/uploads/2016/02/Download-High-Quality-Wood-Background-Wallpaper-for-Your-Desktop.jpg);
background-repeat: repeat;
}
.page {
width: 600px;
height: 800px;
margin: 0 auto;
margin-bottom: 1em;
padding: 2em;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
background: #F8ECC2;
color: #0c0d0d;
overflow: hidden;
}
JQUERY:
// On document load...
$(document).ready(function() {
// For each page...
$('.page').each(function () {
// Get page height
var pageHeight = $(this).height();
// Initialize content height
var contentHeight = 0;
// For each element of the page...
$(this).children().each(function () {
// Add element height to overall content height
contentHeight += $(this).outerHeight();
// When the content height becomes greater than the page height...
if (contentHeight > pageHeight) {
// Append a new '.page' to the '#page-container'
$(this).parent().after('<div class="page"></div>');
// Append the current, overflowing element to the next page
$(this).appendTo($(this).parent().next($('.page')));
}
});
});
});
If any of this is unclear, the Codepen should clear it up nicely.
https://codepen.io/christophercostello/pen/yXPBaN
Whenever you are in a loop, return false to exit it
Your code is correct, there is no code to execute when returning false, so nothing happens.
$.each(array, function(idx, value){
if(condition){
return true; // this will go to the next iteration
}else {
return false; // this will exit the loop
}
});
If you are in a for loop, make the condition false or break.
for(i = 0; i < arr.length; i++){
if(condition){
break;
}else {
// do stuff
}
}
I'm trying to animate the header to change height and font size when a user scrolls. I am using a function to add a class to the header when scroll is > a certain number but when tested the header remains the same. I will include my html, css and JS below.
HTML:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>Alison Hurman</title>
<meta charset="utf-8">
<!-- ENTER KEYWORDS <meta name="keywords" content=""> -->
<!-- ENTER DESCRIPTION <meta name="description" content=""> -->
<!-- ENTER FINAL URL <meta name="canonical" content="http://www." property="canonical"> -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans|Oswald:300,400|Sansita|Noto+Sans|Kalam' rel='stylesheet' type='text/css'> <!--Google fonts-->
<link rel="stylesheet" href="css/styles.css"> <!-- Link to main style sheet -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- JQuery CDN -->
<script src="javascript/animated-header.js"></script> <!-- JS for animated Header -->
</head>
<body id="pptpp">
<header>
<nav>
<ul>
<li class="leftnav">ABOUT ME</li>
<li class="leftnav">SHOP</li>
<li class="leftnav">ATTEND</li>
<li class="rightnav">BLOG</li>
<li class="rightnav">FREEBIES</li>
<li class="rightnav">SOCIAL MEDIA</li>
</ul>
</nav>
</header>
<div id="Page">
<div id="OptInContent">
<div id="OptInPlaceholder">
<p style="margin: 0px; padding: 0px; text-align: center;">OPT IN PLACEHOLDER</p>
</div>
</div>
<div id="MainContent">
<div id="AboutMe">
<a id="AboutMe"><h2>ABOUT ME</h2></a>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare sem eget fringilla scelerisque. Nullam commodo, risus nec interdum tempus, velit ipsum rhoncus mi, id finibus turpis turpis quis neque. Phasellus nec sem nunc. Suspendisse potenti. Integer massa mi, posuere a justo ac, lobortis mollis neque. Sed vitae pharetra enim. Duis faucibus pretium augue quis tempor. Vestibulum quis mi ultrices, maximus orci sed, dignissim augue. Integer a turpis sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In molestie ac purus eu porttitor. Morbi cursus imperdiet urna, a semper turpis viverra scelerisque. Mauris vel urna sit amet nunc vestibulum sagittis. Curabitur quam nisi, imperdiet et venenatis non, aliquet a urna. Sed pretium dolor diam, ac condimentum elit aliquet quis. Praesent arcu urna, rhoncus ac enim quis, tristique gravida diam. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare sem eget fringilla scelerisque. Nullam commodo, risus nec interdum tempus, velit ipsum rhoncus mi, id finibus turpis turpis quis neque. Phasellus nec sem nunc. Suspendisse potenti. Integer massa mi, posuere a justo ac, lobortis mollis neque. Sed vitae pharetra enim. Duis faucibus pretium augue quis tempor. Vestibulum quis mi ultrices, maximus orci sed, dignissim augue. Integer a turpis sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In molestie ac purus eu porttitor. Morbi cursus imperdiet urna, a semper turpis viverra scelerisque. Mauris vel urna sit amet nunc vestibulum sagittis. Curabitur quam nisi, imperdiet et venenatis non, aliquet a urna. Sed pretium dolor diam, ac condimentum elit aliquet quis. Praesent arcu urna, rhoncus ac enim quis, tristique gravida diam. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare sem eget fringilla scelerisque. Nullam commodo, risus nec interdum tempus, velit ipsum rhoncus mi, id finibus turpis turpis quis neque. Phasellus nec sem nunc. Suspendisse potenti. Integer massa mi, posuere a justo ac, lobortis mollis neque. Sed vitae pharetra enim. Duis faucibus pretium augue quis tempor. Vestibulum quis mi ultrices, maximus orci sed, dignissim augue. Integer a turpis sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In molestie ac purus eu porttitor. Morbi cursus imperdiet urna, a semper turpis viverra scelerisque. Mauris vel urna sit amet nunc vestibulum sagittis. Curabitur quam nisi, imperdiet et venenatis non, aliquet a urna. Sed pretium dolor diam, ac condimentum elit aliquet quis. Praesent arcu urna, rhoncus ac enim quis, tristique gravida diam. </p>
</div>
<div id="Help">
<h2>HOW I CAN HELP</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare sem eget fringilla scelerisque. Nullam commodo, risus nec interdum tempus, velit ipsum rhoncus mi, id finibus turpis turpis quis neque. Phasellus nec sem nunc. Suspendisse potenti. Integer massa mi, posuere a justo ac, lobortis mollis neque. Sed vitae pharetra enim. Duis faucibus pretium augue quis tempor. Vestibulum quis mi ultrices, maximus orci sed, dignissim augue. Integer a turpis sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In molestie ac purus eu porttitor. Morbi cursus imperdiet urna, a semper turpis viverra scelerisque. Mauris vel urna sit amet nunc vestibulum sagittis. Curabitur quam nisi, imperdiet et venenatis non, aliquet a urna. Sed pretium dolor diam, ac condimentum elit aliquet quis. Praesent arcu urna, rhoncus ac enim quis, tristique gravida diam. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare sem eget fringilla scelerisque. Nullam commodo, risus nec interdum tempus, velit ipsum rhoncus mi, id finibus turpis turpis quis neque. Phasellus nec sem nunc. Suspendisse potenti. Integer massa mi, posuere a justo ac, lobortis mollis neque. Sed vitae pharetra enim. Duis faucibus pretium augue quis tempor. Vestibulum quis mi ultrices, maximus orci sed, dignissim augue. Integer a turpis sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In molestie ac purus eu porttitor. Morbi cursus imperdiet urna, a semper turpis viverra scelerisque. Mauris vel urna sit amet nunc vestibulum sagittis. Curabitur quam nisi, imperdiet et venenatis non, aliquet a urna. Sed pretium dolor diam, ac condimentum elit aliquet quis. Praesent arcu urna, rhoncus ac enim quis, tristique gravida diam. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ornare sem eget fringilla scelerisque. Nullam commodo, risus nec interdum tempus, velit ipsum rhoncus mi, id finibus turpis turpis quis neque. Phasellus nec sem nunc. Suspendisse potenti. Integer massa mi, posuere a justo ac, lobortis mollis neque. Sed vitae pharetra enim. Duis faucibus pretium augue quis tempor. Vestibulum quis mi ultrices, maximus orci sed, dignissim augue. Integer a turpis sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In molestie ac purus eu porttitor. Morbi cursus imperdiet urna, a semper turpis viverra scelerisque. Mauris vel urna sit amet nunc vestibulum sagittis. Curabitur quam nisi, imperdiet et venenatis non, aliquet a urna. Sed pretium dolor diam, ac condimentum elit aliquet quis. Praesent arcu urna, rhoncus ac enim quis, tristique gravida diam. </p>
</div>
</div> <!-- Main Content -->
</div> <!-- Page -->
</body>
CSS:
body {
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f3;
color: #666;
margin: 0px;
padding: 0px;
}
#Page {
padding-top: 100px;
}
/*
.wrapper {
max-width: 1080px;
margin: 0 auto;
}
*/
header {
background-color: #E9DCCD;
font-family: 'Oswald';
font-size: 160%;
height: 100px;
width: 100%;
border-bottom: solid;
border-bottom-color: #339933;
border-bottom-width: 5px;
position: fixed;
line-height: 50px;
z-index: 1000;
overflow: hidden;
transition: all 0.8s ease;
}
/*
header h1 {
text-transform: uppercase;
text-align: center;
color: #fff;
line-height: 50px;
padding-top: 10px;
margin-bottom: -25px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
*/
.scroll {
height: 50px;
font-size: 80%;
}
/*header.shrink h1 {
text-align: center;
color: #fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
*/
#center-column {
background-color: white;
width: 1080px;
height: 100%;
box-shadow: 0px 1px 5px #888888;
margin: 0 auto;
padding-bottom: 10px;
}
nav li {
display: inline;
}
nav li a {
color: #339933;
text-decoration: none;
}
nav li a:hover {
color: black;
}
nav li.leftnav {
float: left;
margin-left: -10px;
}
nav li.leftnav a {
padding-right: 40px;
}
nav li.rightnav {
float: right;
padding-right: 30px;
}
#OptInContent {
width: 100%;
height: 700px;
background-color: #fff;
display: flex;
align-items: center;
}
#OptInPlaceholder {
width: 1080px;
height: 600px;
background-color: black;
border-radius: 25px;
color: #fff;
margin: 0 auto;
}
#MainContent {
width: 100%;
}
#AboutMe {
background-color: #fff;
margin-top: -20px;
padding-bottom: 20px;
}
#AboutMe h2 {
font-family: Oswald;
font-weight: 300;
text-align: center;
color: #339933;
border-style: solid;
border-width: 0px 5px 0px 5px;
border-color: #339933;
border-radius: 10px;
margin-right: 45%;
margin-left: 45%;
}
#AboutMe p {
padding-left: 30px;
}
#Help {
background-color: #fff;
margin-top: -20px;
padding-bottom: 20px;
}
#Help h2 {
font-family: Oswald;
font-weight: 300;
text-align: center;
color: #339933;
border-style: solid;
border-width: 0px 5px 0px 5px;
border-color: #339933;
border-radius: 10px;
margin-right: 45%;
margin-left: 45%;
}
#Help p {
padding-left: 30px;
}
JS:
/*jslint browser: true*/
/*global $, jQuery, alert*/
$(document).ready(function(){
$(window).scroll(function() {
if ($(this).scrollTop() > 1) {
$('#header').addClass("scroll");
} else {
$('#header').removeClass("scroll");
}
});
});
As of right now the header remains exactly the same once I scroll and no animation takes place. I'm unsure what's causing it not to trigger. Help is greatly appreciated, thank you.
You are adding class .scroll instead of scroll which means that the selector would then be ..scroll.
Change addClass(".scroll") to addClass("scroll") and removeClass(".scroll") to removeClass("scroll") then it will work.
Try the snippet below.
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("scroll");
}
else {
$('header').removeClass("scroll");
}
});
header {
background-color: #E9DCCD;
font-family: 'Oswald';
font-size: 160%;
height: 100px;
width: 100%;
border-bottom: solid;
border-bottom-color: #339933;
border-bottom-width: 5px;
position: fixed;
line-height: 50px;
z-index: 1000;
overflow: hidden;
transition: all 0.8s ease;
}
.scroll {
height: 50px;
font-size: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
<ul>
<li class="leftnav">ABOUT ME</li>
<li class="leftnav">SHOP</li>
<li class="leftnav">ATTEND</li>
<li class="rightnav">BLOG</li>
<li class="rightnav">FREEBIES</li>
<li class="rightnav">SOCIAL MEDIA</li>
</ul>
</nav>
</header>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac nisl sit amet libero gravida dictum vel id eros. Maecenas egestas nulla tincidunt, iaculis nisl vel, dignissim dolor. Phasellus pretium sed nisl at facilisis. Maecenas sed augue sem. Morbi facilisis, lacus eget efficitur tempus, est dolor lacinia urna, ultricies dignissim sem nisi quis eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce eros nisl, auctor sed tellus at, pulvinar pharetra nibh. Morbi maximus, lorem vitae malesuada semper, nulla velit volutpat orci, non accumsan eros libero id arcu.
Fusce eleifend lobortis tortor, at cursus libero cursus sit amet. Curabitur luctus neque non leo commodo placerat. Donec at condimentum tellus. Nam id lectus at ex ornare bibendum eget eu sapien. In tincidunt vestibulum lacus eget mattis. Suspendisse massa neque, malesuada a cursus quis, semper luctus lectus. Etiam non aliquam dui, ac pharetra purus. Cras quis massa ac orci facilisis porta a ut dolor.
Sed tristique lorem ultrices nulla congue lacinia. Proin sed arcu pretium, vestibulum ligula sed, venenatis diam. Aliquam suscipit vel enim id malesuada. Sed vel efficitur nibh, ut fermentum erat. Nunc commodo auctor sapien, et fringilla leo imperdiet sit amet. In vel lorem dui. Pellentesque congue erat ante, a venenatis dui tincidunt a. Pellentesque eget leo urna. Integer iaculis semper magna. Nam vitae condimentum nisi. Etiam libero elit, scelerisque nec interdum eget, varius eu lectus.
</div>
Please use this code
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass('scroll');
} else {
$('header').removeClass('scroll');
}
});
Try this
$(document).ready(function(){
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass('scroll');
} else {
$('header').removeClass('scroll');
}
});
});
I've been searching for quite a while and tried several different approaches, but can't figure out a solution.
I would like for my footer to always be at the bottom of the page, however not necessarily always shown. So whenever enough posts are added, I want the page to keep growing, but the footer will always be on the bottom. You can see in my example in the snippet below how's it works.
However, I don't want the posts to be on the left side, or start from the top. Whenever I try to move the page-wrap div with absolute positioning, everything gets screwed up.
Originally inspired by this article: https://css-tricks.com/snippets/css/sticky-footer/
$(".btn").click(function() {
var post = $('.status-box').val();
$("<li>").text(post).prependTo(".posts");
});
html,
body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -200px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
/* .push must be the same height as footer */
height: 200px;
}
.site-footer {
background: orange;
}
.container {
width: 520px;
margin-top: 20px;
}
.button-group {
margin-bottom: 20px;
}
.counter {
display: inline;
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
}
.posts {
clear: both;
list-style: none;
padding-left: 0;
width: 100%;
}
.posts li {
background-color: #fff;
border: 1px solid #d8d8d8;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
margin-bottom: 10px;
word-wrap: break-word;
min-height: 42px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-wrap">
<div class="container">
<form>
<div class="form-group">
<textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
</div>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Post
</div>
<ul class="posts">
</ul>
</div>
</div>
<div class="site-footer">
</div>
In order to center your content, you can give .page-wrap a width and auto margin to the left and the rigth:
.page-wrap {
...
width: 50%;
margin: 0 auto -200px auto;
}
$(".btn").click(function() {
var post = $('.status-box').val();
$("<li>").text(post).prependTo(".posts");
});
html,
body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
width: 50%;
background: lightblue;
margin: 0 auto -200px auto;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
/* .push must be the same height as footer */
height: 200px;
}
.site-footer {
background: orange;
}
.container {
width: 520px;
margin-top: 20px;
}
.button-group {
margin-bottom: 20px;
}
.counter {
display: inline;
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
}
.posts {
clear: both;
list-style: none;
padding-left: 0;
width: 100%;
}
.posts li {
background-color: #fff;
border: 1px solid #d8d8d8;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
margin-bottom: 10px;
word-wrap: break-word;
min-height: 42px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-wrap">
<div class="container">
<form>
<div class="form-group">
<textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
</div>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Post
</div>
<ul class="posts">
</ul>
</div>
</div>
<div class="site-footer">
</div>
Have a look into it:
DEMO : https://jsfiddle.net/eLqzhaag/
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
html,
body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
position: absolute;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
/* .push must be the same height as footer */
height: 200px;
}
.site-footer {
background: orange;
width: 100%;
height: 100px;
position: fixed;
bottom: 0px;
}
.container {
margin-top: 20px;
}
.button-group {
margin-bottom: 20px;
}
.counter {
display: inline;
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
}
.posts {
clear: both;
list-style: none;
padding-left: 0;
width: 100%;
}
.posts li {
background-color: #fff;
border: 1px solid #d8d8d8;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
margin-bottom: 10px;
word-wrap: break-word;
min-height: 42px;
}
</style>
<script>
$(".btn").click(function() {
var post = $('.status-box').val();
$("<li>").text(post).prependTo(".posts");
});
</script>
</head>
<!-- language: lang-css -->
<!-- language: lang-html -->
<body>
<div class="page-wrap">
<div class="container">
<form>
<div class="form-group">
<textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
</div>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Post
</div>
<ul class="posts">
</ul>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.
Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus. Phasellus erat velit, sagittis sed varius volutpat, placerat nec urna. Nam eu metus vitae dolor fringilla feugiat. Nulla.
Facilisi. Etiam enim metus, luctus in adipiscing at, consectetur quis sapien. Duis imperdiet egestas ligula, quis hendrerit ipsum ullamcorper et. Phasellus id tristique orci. Proin consequat mi at felis scelerisque ullamcorper. Etiam tempus, felis vel eleifend porta, velit nunc mattis urna, at ullamcorper erat diam dignissim ante. Pellentesque justo risus.
Rutrum ac semper a, faucibus nec lorem. Nullam eget quam tellus, eget sagittis justo.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante enim, tincidunt ut interdum in, adipiscing quis tortor. Nulla turpis lacus, rutrum in adipiscing ut, porttitor ac ante. Sed euismod, mauris a.
Lobortis laoreet, neque nunc suscipit orci, id ultrices nulla enim ac orci. Proin a erat at mi ornare interdum. Donec sagittis, felis at rutrum egestas, orci risus laoreet diam, quis pulvinar sapien neque id mauris. Suspendisse potenti. Pellentesque eget ligula ut lacus porttitor pharetra et a mauris. Cras varius gravida.
width: 520px;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.
Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus. Phasellus erat velit, sagittis sed varius volutpat, placerat nec urna. Nam eu metus vitae dolor fringilla feugiat. Nulla.
Facilisi. Etiam enim metus, luctus in adipiscing at, consectetur quis sapien. Duis imperdiet egestas ligula, quis hendrerit ipsum ullamcorper et. Phasellus id tristique orci. Proin consequat mi at felis scelerisque ullamcorper. Etiam tempus, felis vel eleifend porta, velit nunc mattis urna, at ullamcorper erat diam dignissim ante. Pellentesque justo risus.
Rutrum ac semper a, faucibus nec lorem. Nullam eget quam tellus, eget sagittis justo.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante enim, tincidunt ut interdum in, adipiscing quis tortor. Nulla turpis lacus, rutrum in adipiscing ut, porttitor ac ante. Sed euismod, mauris a.
Lobortis laoreet, neque nunc suscipit orci, id ultrices nulla enim ac orci. Proin a erat at mi ornare interdum. Donec sagittis, felis at rutrum egestas, orci risus laoreet diam, quis pulvinar sapien neque id mauris. Suspendisse potenti. Pellentesque eget ligula ut lacus porttitor pharetra et a mauris. Cras varius gravida.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.
Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus. Phasellus erat velit, sagittis sed varius volutpat, placerat nec urna. Nam eu metus vitae dolor fringilla feugiat. Nulla.
Facilisi. Etiam enim metus, luctus in adipiscing at, consectetur quis sapien. Duis imperdiet egestas ligula, quis hendrerit ipsum ullamcorper et. Phasellus id tristique orci. Proin consequat mi at felis scelerisque ullamcorper. Etiam tempus, felis vel eleifend porta, velit nunc mattis urna, at ullamcorper erat diam dignissim ante. Pellentesque justo risus.
Rutrum ac semper a, faucibus nec lorem. Nullam eget quam tellus, eget sagittis justo.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante enim, tincidunt ut interdum in, adipiscing quis tortor. Nulla turpis lacus, rutrum in adipiscing ut, porttitor ac ante. Sed euismod, mauris a.
Lobortis laoreet, neque nunc suscipit orci, id ultrices nulla enim ac orci. Proin a erat at mi ornare interdum. Donec sagittis, felis at rutrum egestas, orci risus laoreet diam, quis pulvinar sapien neque id mauris. Suspendisse potenti. Pellentesque eget ligula ut lacus porttitor pharetra et a mauris. Cras varius gravida.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.
Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus. Phasellus erat velit, sagittis sed varius volutpat, placerat nec urna. Nam eu metus vitae dolor fringilla feugiat. Nulla.
Facilisi. Etiam enim metus, luctus in adipiscing at, consectetur quis sapien. Duis imperdiet egestas ligula, quis hendrerit ipsum ullamcorper et. Phasellus id tristique orci. Proin consequat mi at felis scelerisque ullamcorper. Etiam tempus, felis vel eleifend porta, velit nunc mattis urna, at ullamcorper erat diam dignissim ante. Pellentesque justo risus.
Rutrum ac semper a, faucibus nec lorem. Nullam eget quam tellus, eget sagittis justo.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ante enim, tincidunt ut interdum in, adipiscing quis tortor. Nulla turpis lacus, rutrum in adipiscing ut, porttitor ac ante. Sed euismod, mauris a.
Lobortis laoreet, neque nunc suscipit orci, id ultrices nulla enim ac orci. Proin a erat at mi ornare interdum. Donec sagittis, felis at rutrum egestas, orci risus laoreet diam, quis pulvinar sapien neque id mauris. Suspendisse potenti. Pellentesque eget ligula ut lacus porttitor pharetra et a mauris. Cras varius gravida.
</div>
</div>
</div>
<div class="site-footer">
</div>
</body>
</html>