Related
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?
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 want to lock the scrollbar on window when the overlay is triggered which is working fine. But the problem is the body/ document jumps to the top when you scroll the page to the bottom/ middle and trigger the overlay.
I don't want the page to jump to the top. What I want to achieve is similar to Facebook's image overlay/ popup when you click on the image - it locks the background when you click on the image but it stays as it s when you exit the image popup. Is it possible?
CSS:
html,
body {
font-family: 'Raleway', sans-serif;
height: auto;
margin: 0;
padding: 0;
overflow: auto;
color: #000;
}
html.lock-scrollbar {
position: fixed;
overflow-y: scroll;
width: 100%;
height: 100%;
}
#main {
height: 2000px;
border: 1px solid red;
}
.overlay {
width: 90%;
height: 100%;
background: #fff;
z-index: 999;
overflow: auto;
position: absolute;
top: 0;
left: 0;
display: none;
border: 1px solid black;
}
jQuery:
$( document ).ready(function() {
var windowHeight = $(window).height();
console.log(windowHeight);
$("#main").click(function(){
$("html").addClass('lock-scrollbar');
$('.overlay').show();
return false;
});
$(".overlay").click(function(){
$("html").removeClass('lock-scrollbar');
$('.overlay').hide();
return false;
});
});
HTML:
<div id="main">
<h1>New Scrolling Window</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p>
<p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor cursus. Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="overlay"></div>
What have I done incorrectly?
My jsfiddle.
Well, I would lock the scroll in this way instead of using a fixed positioned lock-scrollbar:
$('html,body').css({'overflow-y': 'hidden'});
on the click of main and overflow-y back to auto:
$('html,body').css({'overflow-y': 'auto'});
when the overlay is hidden.
See demo below and updated fiddle here:
$(document).ready(function() {
var windowHeight = $(window).height();
// console.log(windowHeight);
$("#main").click(function() {
$('html,body').css({'overflow-y': 'hidden'});
$('.overlay').show();
return false;
});
$(".overlay").click(function() {
$('html,body').css({'overflow-y': 'auto'});
$('.overlay').hide();
return false;
});
});
html,
body {
font-family: 'Raleway', sans-serif;
height: auto;
margin: 0;
padding: 0;
overflow: auto;
color: #000;
}
html.lock-scrollbar {
position: fixed;
overflow-y: scroll;
width: 100%;
height: 100%;
}
#main {
height: 2000px;
border: 1px solid red;
}
.overlay {
width: 90%;
height: 100%;
background: #fff;
z-index: 999;
overflow: auto;
position: fixed;
top: 0;
left: 0;
display: none;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<h1>New Scrolling Window</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla
commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis
sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p>
<p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend
pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor cursus.
Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="overlay"></div>
EDIT:
If you want to stick with the position: fixed solution - get / Set the value of scrollTop to reset the scroll.
Also added in $('html').css({'top':-scrollTop + 'px'}) while locking scroll - see demo below:
$(document).ready(function() {
var windowHeight = $(window).height();
// console.log(windowHeight);
var scrollTop = 0;
$("#main").click(function() {
scrollTop = $(window).scrollTop();
$("html").addClass('lock-scrollbar');
$('html').css({'top':-scrollTop + 'px'});
$('.overlay').show();
return false;
});
$(".overlay").click(function() {
$("html").removeClass('lock-scrollbar');
$(window).scrollTop(scrollTop);
$('.overlay').hide();
return false;
});
});
html,
body {
font-family: 'Raleway', sans-serif;
height: auto;
margin: 0;
padding: 0;
color: #000;
}
html.lock-scrollbar {
position: fixed;
overflow-y: scroll;
width: 100%;
height: 100%;
}
#main {
height: 2000px;
border: 1px solid red;
}
.overlay {
width: 90%;
height: 100%;
background: #fff;
z-index: 999;
overflow: auto;
position: fixed;
top: 0;
left: 0;
display: none;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<h1>New Scrolling Window</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla
commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis
sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p>
<p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend
pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor cursus.
Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="overlay"></div>
Try CSS:
html, body {
font-family: 'Raleway', sans-serif;
margin: 0;
padding: 0;
color: #000;
}
Try JS:
$( document ).ready(function() {
var windowHeight = $(window).height();
console.log(windowHeight);
$("#main").click(function(){
$('body').css({
overflow: 'hidden',
height: '100%'
});
$('.overlay').show();
return false;
});
$(".overlay").click(function(){
$('body').css({
overflow: 'auto',
height: 'auto'
});
$('.overlay').hide();
return false;
});
});
Your modified jsfiddle: https://jsfiddle.net/y9e1kt3q/
New fiddle (the scroll remains visible): https://jsfiddle.net/y9e1kt3q/1/
I want my header (which is made up of a logo banner and a navbar) to hide when scrolling, but in two stages, first,the banner minimizes and then navbar moves to the top, and then the navbar hides as well. Well I can't even get them to hide at all let alone in 2 stages. I am a very novice coder, and am basically stumbling around until I get something right, but this project is starting to take too long. I've included a JSFiddle so you can see what I'm working with, and maybe it's something simple I'm missing.
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event) {
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if (Math.abs(lastScrollTop - st) <= delta) return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight) {
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if (st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
/*Expandable Sticky Bar (Initial: Nov 1st, 2010)
* This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/
jQuery.noConflict()
function expstickybar(usersetting) {
var setting = jQuery.extend({
position: 'bottom',
peekamount: 30,
revealtype: 'mouseover',
speed: 200
}, usersetting)
var thisbar = this
var cssfixedsupport = !document.all || document.all && document.compatMode == "CSS1Compat" && window.XMLHttpRequest //check for CSS fixed support
if (!cssfixedsupport || window.opera) return
jQuery(function($) { //on document.ready
if (setting.externalcontent) {
thisbar.$ajaxstickydiv = $('<div id="ajaxstickydiv_' + setting.id + '"></div>').appendTo(document.body) //create blank div to house sticky bar DIV
thisbar.loadcontent($, setting)
} else thisbar.init($, setting)
})
}
}
}
})
#charset"utf-8";
/* CSS Document */
body {
background: url(IMAGE/BACKGROUNDS/scratched-metal-background-DARK-1024x768.png) no-repeat center center fixed;
-webkit-background-size: cover;
/*Used by Safari & Chrome*/
-moz-background-size: cover;
/* Used by Firefox */
-o-background-size: cover;
/* Used by Opera */
background-size: cover;
/* All Modern Browsers */
padding-top: 40px;
}
#header {
height: 220px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
}
.nav-up {
top: -220px;
// same as header height. use variables in LESS/SASS
}
#banner {
height: 200px;
position: fixed;
top: 0;
}
#nav {
position: absolute;
width: 90%;
left: 0;
top: 200PX;
margin: 0 0 1em 0;
padding: 0;
}
#nav ul {
width: 100%;
height: 20px margin: 0;
padding: 0;
overflow: hidden;
}
#nav li {
background-color: #666666;
list-style: none;
float: left;
text-align: center;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
width: 15%;
width: calc(90%/6);
}
#nav li a {
display: block;
font-size: 16px;
font-size: 1vw;
padding: 5px 5px;
text-decoration: none;
font-weight: bold;
color: #fff;
}
#nav li:first-child a {
border-left: 1px solid #fff;
}
#nav li a:hover {
color: #666666;
background-color: #fff;
}
#content {
top: 420px;
float: left;
width: 78.5%;
height: 3000px;
}
#footer {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="js/hideheader.js"></script>
<script src="js/expstickybar.js">
</script>
<body>
<header class="nav-down">
<div id="header">
<div id="banner">
<img src="IMAGE/BANNER/WHITE-BANNER-TRULY-MODULAR-WHITE.png" width="1500" height="200" alt="banner" />
</div>
<div id="nav">
<ul>
<li>HOME
</li>
<li>PRODUCTS
</li>
<li>ABOUT US
</li>
<li>BLOG
</li>
<li>FORUM
</li>
<li>SUPPORT
</li>
</ul>
</div>
</div>
</header>
<div id="content">"Lorem ipsum dolor sit amet, augue odio morbi ac consectetuer fusce ut, felis rutrum dignissim rhoncus velit. Aliquam ante ac sociis pede, scelerisque lectus vitae leo dolorem sollicitudin. Dolor dolor id vulputate, mollis purus nec ut accumsan quam
consectetuer. Ut justo, neque enim velit bibendum ultricies, massa a consequat adipiscing turpis suspendisse, voluptas tellus imperdiet sodales quis wisi. Sit sit, ante et aliquet vestibulum ut vel mattis, placerat eros ante eget adipiscing ullamcorper,
ornare maecenas molestie, eget ornare non neque libero tincidunt. Ac consectetuer ipsum suscipit urna mollis, amet et urna consequat etiam quam rhoncus, mauris integer torquent lorem, metus sem. Felis lorem imperdiet. Tempor leo pellentesque bibendum.
Nonummy phasellus felis integer diam fusce, error mi suspendisse sit ipsum sed. Nisl duis morbi sed nullam, libero ridiculus, enim felis nunc neque a elit. In eleifend, auctor ante quam eu, sed urna, in convallis, tellus aptent et neque at. Pede hymenaeos
egestas. Duis ac risus elit libero, sed ullamcorper ac arcu suscipit maecenas, nec mauris turpis. Nonummy luctus sem, vestibulum lorem viverra aenean risus ipsum arcu, etiam amet erat sed et vestibulum et, porttitor nonummy luctus. Quis eget ligula
egestas, sed malesuada laoreet, diam nec nonummy morbi nostra condimentum tortor, orci sit. Senectus tellus, erat neque rhoncus id praesent pharetra, wisi venenatis et varius, rutrum aliquam a bibendum nibh id dignissim. Quis erat litora aenean nibh
ac, nec eu eleifend est, in fermentum neque sed mollis lobortis, wisi scelerisque urna senectus augue viverra, sit elit. Lectus pharetra vestibulum, varius integer, suspendisse dolor rutrum tincidunt pulvinar, et lobortis lacus mus egestas semper,
dui amet elit massa. Aliquam sem nam sed, consectetuer est, quis elementum imperdiet tincidunt. In sed, nunc sem sit duis et lacus libero, sed vel a, auctor porta orci ut et nec sodales, quo libero massa duis blandit. Risus et ut, tellus morbi suspendisse
sed velit, nonummy neque sodales integer ac nulla pede. Egestas molestie fusce luctus eu, justo sit, luctus sed libero augue eros risus sit, metus leo cras, orci sit. Vestibulum suspendisse pellentesque sagittis dolor. Suscipit est wisi, maecenas
ridiculus pellentesque commodo ligula in, hendrerit et neque consequat amet blandit rutrum, ut congue. Congue duis proin fermentum nibh, nam in sem. Id rutrum, integer dui mauris, odio cras vulputate nunc. Sociis eget, mi turpis laoreet ut lorem habitant
aliquam, sed porttitor praesent nec, in dolor, bibendum aenean molestie reiciendis pellentesque volutpat. Duis dui tristique, donec justo mauris fusce quis, "</div>
<?php include_once( "analyticstracking.php") ?>
</body>
</html>
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>