CSS clearfix issue floating - javascript
I clearfixed parent element but I don't know how to fix this type of issue it's happening because I deduct the length of lorem lpsum from some container and it's misplacing.
#import url(https://fonts.googleapis.com/css?family=Amaranth|Titillium+Web);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
width:100vw;
height:100vh;
/*background-image: url(../images/background.svg);*/
background-color: #1abc9c;
box-sizing: border-box;
}
::selection {
color:#e74c3c;
background-color: #ecf0f1;
}
.container {
width:85vw;
height:auto;
margin:0 auto;
}
.container header {
background-color: rgb(236, 240, 241);
}
.container header::after {
content: "";
display: block;
clear:both;
}
.container header h1 {
float:left;
font-size: 3rem;
font-size: 4vw;
padding:1% 1%;
font-family: 'Amaranth', sans-serif;
}
.container header .m_link {
float:right;
padding:0.5vw;
}
.container header .m_link h4 {
font-family: 'Amaranth',sans-serif;
font-weight: 200;
color:#2c3e50;
font-size: 1rem;
font-size: 1vw;
}
.container header .m_link h4:nth-child(2) {
text-align: right;
}
.container section {
margin-top:1vw;
padding:0.1vw;
}
.container section::after {
display: table;
content:"";
clear:both;
}
.container section .wcon {
width: 19vw;
height:auto;
border:0.5vw solid #ecf0f1;
border-radius:1vw;
background-color: #ecf0f1;
float:left;
margin:0 0.6vw 0.6vw 0.6vw;
padding:0.5vw 0;
}
.container section .wcon:hover {
background-color: ;
border-color:#2c3e50;
cursor: pointer;
}
.container section .wcon:after {
clear: both;
display: table;
content:"";
}
.container section .wcon .img_icon {
display: block;
margin:0 auto;
width:18vw;
height: auto;
}
.container section .wcon h3 {
font-family: 'Titillium Web',sans-serif;
text-align: center;
font-size: 1.5rem;
font-size: 2vw;
font-weight: 500;
color:#2c3e50;
text-transform: uppercase;
padding:0.1vw 0;
}
.container section .wcon p {
text-align: justify;
font-size: 0.8rem;
font-size: 1vw;
font-family: 'Titillium Web',sans-serif;
font-weight: 100;
padding:0 0.2vw;
line-height: 1.3;
color:#34495e;
}
.container section .wcon p:after {
content:" Read More";
}
<DOCTYPE html>
<html>
<head>
<title> Projects </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<header>
<h1> Projects </h1>
</header>
</div>
<div class="container">
<section>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.
</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.
</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate . </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, . </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
</section>
</div>
</body>
</html>
clear is a CSS property related to floats. Mainly about preceding floats.
clearfix is a concept, to contain (descending) floats. See SO answers about What is clearfix?
No need of JS in 2015 to do that! An HTML solution with .clear is fine except if you've a lot of breakpoints and situations to manage. Then you'd need different classes like .small-clear there, .large-clear.clear here, etc where prefixes are used as a reminder of which breakpoint they should apply.
Here are 3 solutions in pure CSS:
Using CSS3 :nth-child(an+b) (compatibility: IE9+) to add clear: left every 4 items:
#import url(https://fonts.googleapis.com/css?family=Amaranth|Titillium+Web);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
width:100vw;
height:100vh;
/*background-image: url(../images/background.svg);*/
background-color: #1abc9c;
box-sizing: border-box;
}
::selection {
color:#e74c3c;
background-color: #ecf0f1;
}
.container {
width:85vw;
height:auto;
margin:0 auto;
}
.container header {
background-color: rgb(236, 240, 241);
}
.container header::after {
content: "";
display: block;
clear:both;
}
.container header h1 {
float:left;
font-size: 3rem;
font-size: 4vw;
padding:1% 1%;
font-family: 'Amaranth', sans-serif;
}
.container header .m_link {
float:right;
padding:0.5vw;
}
.container header .m_link h4 {
font-family: 'Amaranth',sans-serif;
font-weight: 200;
color:#2c3e50;
font-size: 1rem;
font-size: 1vw;
}
.container header .m_link h4:nth-child(2) {
text-align: right;
}
.container section {
margin-top:1vw;
padding:0.1vw;
}
.container section::after {
display: table;
content:"";
clear:both;
}
.container section .wcon {
width: 19vw;
height:auto;
border:0.5vw solid #ecf0f1;
border-radius:1vw;
background-color: #ecf0f1;
float:left;
margin:0 0.6vw 0.6vw 0.6vw;
padding:0.5vw 0;
}
.container section .wcon:nth-child(4n+1) {
clear: left;
}
.container section .wcon:hover {
background-color: ;
border-color:#2c3e50;
cursor: pointer;
}
.container section .wcon:after {
clear: both;
display: table;
content:"";
}
.container section .wcon .img_icon {
display: block;
margin:0 auto;
width:18vw;
height: auto;
}
.container section .wcon h3 {
font-family: 'Titillium Web',sans-serif;
text-align: center;
font-size: 1.5rem;
font-size: 2vw;
font-weight: 500;
color:#2c3e50;
text-transform: uppercase;
padding:0.1vw 0;
}
.container section .wcon p {
text-align: justify;
font-size: 0.8rem;
font-size: 1vw;
font-family: 'Titillium Web',sans-serif;
font-weight: 100;
padding:0 0.2vw;
line-height: 1.3;
color:#34495e;
}
.container section .wcon p:after {
content:" Read More";
}
<DOCTYPE html>
<html>
<head>
<title> Projects </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<header>
<h1> Projects </h1>
</header>
</div>
<div class="container">
<section>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.
</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.
</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate . </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, . </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
</section>
</div>
</body>
</html>
Now a display: inline-block solution, with vertical-align: top instead of default baseline (great for text and content, not for layout ;) ).
Compatibility is at least IE8+ (and less with some hacks but who cares anymore?):
#import url(https://fonts.googleapis.com/css?family=Amaranth|Titillium+Web);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
width:100vw;
height:100vh;
/*background-image: url(../images/background.svg);*/
background-color: #1abc9c;
box-sizing: border-box;
}
::selection {
color:#e74c3c;
background-color: #ecf0f1;
}
.container {
width:85vw;
height:auto;
margin:0 auto;
}
.container header {
background-color: rgb(236, 240, 241);
}
.container header::after {
content: "";
display: block;
clear:both;
}
.container header h1 {
float:left;
font-size: 3rem;
font-size: 4vw;
padding:1% 1%;
font-family: 'Amaranth', sans-serif;
}
.container header .m_link {
float:right;
padding:0.5vw;
}
.container header .m_link h4 {
font-family: 'Amaranth',sans-serif;
font-weight: 200;
color:#2c3e50;
font-size: 1rem;
font-size: 1vw;
}
.container header .m_link h4:nth-child(2) {
text-align: right;
}
.container section {
display: table;
margin-top:1vw;
padding:0.1vw;
}
.container section::after {
display: table;
content:"";
clear:both;
}
.container section .wcon {
display: inline-block;
vertical-align: top;
width: 19vw;
height:auto;
border:0.5vw solid #ecf0f1;
border-radius:1vw;
background-color: #ecf0f1;
margin-bottom: 0.6vw
/* Margins ruined. You must take into account 4px gap due to whitespace or better remove whitespace from HTML code
margin:0 0.6vw 0.6vw 0.6vw;*/
padding:0.5vw 0;
}
.container section .wcon:hover {
background-color: ;
border-color:#2c3e50;
cursor: pointer;
}
.container section .wcon:after {
clear: both;
display: table;
content:"";
}
.container section .wcon .img_icon {
display: block;
margin:0 auto;
width:18vw;
height: auto;
}
.container section .wcon h3 {
font-family: 'Titillium Web',sans-serif;
text-align: center;
font-size: 1.5rem;
font-size: 2vw;
font-weight: 500;
color:#2c3e50;
text-transform: uppercase;
padding:0.1vw 0;
}
.container section .wcon p {
text-align: justify;
font-size: 0.8rem;
font-size: 1vw;
font-family: 'Titillium Web',sans-serif;
font-weight: 100;
padding:0 0.2vw;
line-height: 1.3;
color:#34495e;
}
.container section .wcon p:after {
content:" Read More";
}
<DOCTYPE html>
<html>
<head>
<title> Projects </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<header>
<h1> Projects </h1>
</header>
</div>
<div class="container">
<section>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.
</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.
</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate . </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, . </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
</section>
</div>
</body>
</html>
And finally an IE10+ solution with flexbox. Equal height items for free ;) :
small print: you'll need Autoprefixer or an online tool like http://pleeease.io/play/ in order to write all the needed syntaxes of Flexbox (there've been 3 specs since 2009-2010 ;) )
#import url(https://fonts.googleapis.com/css?family=Amaranth|Titillium+Web);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
width:100vw;
height:100vh;
/*background-image: url(../images/background.svg);*/
background-color: #1abc9c;
box-sizing: border-box;
}
::selection {
color:#e74c3c;
background-color: #ecf0f1;
}
.container {
width:85vw;
height:auto;
margin:0 auto;
}
.container header {
background-color: rgb(236, 240, 241);
}
.container header::after {
content: "";
display: block;
clear:both;
}
.container header h1 {
float:left;
font-size: 3rem;
font-size: 4vw;
padding:1% 1%;
font-family: 'Amaranth', sans-serif;
}
.container header .m_link {
float:right;
padding:0.5vw;
}
.container header .m_link h4 {
font-family: 'Amaranth',sans-serif;
font-weight: 200;
color:#2c3e50;
font-size: 1rem;
font-size: 1vw;
}
.container header .m_link h4:nth-child(2) {
text-align: right;
}
.container section {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top:1vw;
padding:0.1vw;
}
.container section::after {
display: table;
content:"";
clear:both;
}
.container section .wcon {
width: 19vw;
height:auto;
border:0.5vw solid #ecf0f1;
border-radius:1vw;
background-color: #ecf0f1;
margin:0 0.6vw 0.6vw 0.6vw;
padding:0.5vw 0;
}
.container section .wcon:nth-child(4n+1) {
clear: left;
}
.container section .wcon:hover {
background-color: ;
border-color:#2c3e50;
cursor: pointer;
}
.container section .wcon:after {
clear: both;
display: table;
content:"";
}
.container section .wcon .img_icon {
display: block;
margin:0 auto;
width:18vw;
height: auto;
}
.container section .wcon h3 {
font-family: 'Titillium Web',sans-serif;
text-align: center;
font-size: 1.5rem;
font-size: 2vw;
font-weight: 500;
color:#2c3e50;
text-transform: uppercase;
padding:0.1vw 0;
}
.container section .wcon p {
text-align: justify;
font-size: 0.8rem;
font-size: 1vw;
font-family: 'Titillium Web',sans-serif;
font-weight: 100;
padding:0 0.2vw;
line-height: 1.3;
color:#34495e;
}
.container section .wcon p:after {
content:" Read More";
}
<DOCTYPE html>
<html>
<head>
<title> Projects </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<header>
<h1> Projects </h1>
</header>
</div>
<div class="container">
<section>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.
</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.
</p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate . </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor. </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, . </p>
</div>
<div class="wcon">
<img src="http://placehold.it/250X150/#e74c3c/#ecf0f1" alt="" class="img_icon">
<h3> project name </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, erat non vulputate bibendum, est est placerat felis, id consectetur mi nibh ac nisl. Donec congue mauris id felis bibendum, sit amet accumsan erat semper. Donec vitae nunc luctus, gravida sapien at, commodo dolor.</p>
</div>
</section>
</div>
</body>
</html>
When I have those issues I use to add to the html "clear" div`s. In your case every 4 elements I would include:
<div class="clear"></div>
Where clearclass just have:
.clear {clear:both;}
Probably you may want to do your web responsive as you are not using fixed width, so you could even include more div'sbetween your elements with display:none and clearto make them "visibles" when reaching your viewport width.
as an example I have added a second div like:
<div class="clear2"></div>
every 2 elements with these css:
.clear2 {clear:both; display:none;}
#media only screen and (max-width: 650px) {
.container section .wcon {width:47%;} /*
.clear2 {display:block;}
}
(47% is just a fast aproach for 2 elements per row)
JSFIDDLE
Edit: another aproach would be calculate (if the text is going to be, as it looks, dinamic) the max-height of your tallest element and apply that height to all your elements. with this jquery:
$(document).ready(function() {
var maxHeight = -1;
$('.wcon').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$('.wcon').each(function() {
$(this).height(maxHeight);
});
});
Credit to #ghayes in this link
JSFIDDLE
Related
Can't get images and captions to float properly in HTML/CSS/Javascript
I am very much a newbie when it comes to building a website, and I am struggling with trying to make images with captions float properly to the left or right on my page. I simply can't make progress, because even if the image technically floats on the right of the text, it squeezes the paragraph of text to the left side of the page. Sometimes the captions also just don't want to go underneath the images like I want them to. Here's the code:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<style>
body {
background-image:url("example");
background-repeat:no-repeat;
background-size:100%;
background-position-y:bottom;
}
figcaption {
font-style: italic;
font-size:small;
padding: 2px;
}
h1 {
text-align:center;
}
.left {
float:inline-start;
}
.middle {
text-align:center;
}
.right {
float:right;
}
.center {
display:block;
margin-left:auto;
margin-right:auto;
border-style:solid;
}
img {
border-style:solid;
width:35%;
height:35%;
}
</style>
</head>
<body>
<h1>Header</h1>
<figure class="middle">
<img class="center" src="example1">
<figcaption>Example</figcaption>
</figure>
<p>...</p>
<p>...</p>
<p>
<figure class="right">
<img src="example2">
<figcaption>Example 2</figcaption>
</figure>
...</p>
<p>
<figure class="left">
<img src="example3">
<figcaption>Example 3</figcaption>
</figure>
...</p>
<p>
<figure class="right">
<img src="example4">
<figcaption>Example 4</figcaption>
</figure>
...</p>
<p>
<figure class="left">
<img src="example5"">
<figcaption>Eample 5</figcaption>
</figure>
...</p>
<p>...</p>
<figure class="middle">
<img src="example6">
<figcaption>Example 6</figcaption>
</figure>
</body>
</html>
Edited to show what I'm going for and what I have instead.
Example 1
Example 2
is this what yo are trying to do?
I think float is not what you need. Float is designed to make text wrap around it so the tag will naturally squeeze away from it.
Here I used Flex and achived this:
body {
background-image: url("example");
background-repeat: no-repeat;
background-size: 100%;
background-position-y: bottom;
}
figcaption {
font-style: italic;
font-size: small;
padding: 2px;
}
h1 {
text-align: center;
}
.left {
display: flex;
justify-content: flex-start;
}
.middle {
display: flex;
justify-content: center;
}
.right {
display: flex;
justify-content: flex-end;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
border-style: solid;
}
img {
border-style: solid;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<body>
<h1>Header</h1>
<div class="middle">
<figure>
<img class="center" src="example1">
<figcaption>Example</figcaption>
</figure>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras adipiscing enim eu turpis egestas pretium aenean pharetra. Aliquam sem fringilla ut morbi tincidunt augue. Velit dignissim
sodales ut eu sem integer vitae. </p>
<p>Laoreet sit amet cursus sit amet dictum sit. Morbi tristique senectus et netus et malesuada fames. Gravida quis blandit turpis cursus. Lectus urna duis convallis convallis. Massa vitae tortor condimentum lacinia quis vel eros. Maecenas accumsan lacus
vel facilisis volutpat est velit egestas dui....</p>
<div class="right">
<figure>
<img src="example2">
<figcaption>Example 2</figcaption>
</figure>
</div>
<p>
Laoreet sit amet cursus sit amet dictum sit. Morbi tristique senectus et netus et malesuada fames. Gravida quis blandit turpis cursus. Lectus urna duis convallis convallis. Massa vitae tortor condimentum lacinia quis vel eros. Maecenas accumsan lacus
vel facilisis volutpat est velit egestas dui.
</p>
<div class="left">
<figure>
<img src="example3">
<figcaption>Example 3</figcaption>
</figure>
</div>
<p>
Laoreet sit amet cursus sit amet dictum sit. Morbi tristique senectus et netus et malesuada fames. Gravida quis blandit turpis cursus. Lectus urna duis convallis convallis. Massa vitae tortor condimentum lacinia quis vel eros. Maecenas accumsan lacus
vel facilisis volutpat est velit egestas dui.
</p>
<div class="right">
<figure>
<img src="example4">
<figcaption>Example 4</figcaption>
</figure>
</div>
<p>
Laoreet sit amet cursus sit amet dictum sit. Morbi tristique senectus et netus et malesuada fames. Gravida quis blandit turpis cursus. Lectus urna duis convallis convallis. Massa vitae tortor condimentum lacinia quis vel eros. Maecenas accumsan lacus
vel facilisis volutpat est velit egestas dui.</p>
<div class="left">
<figure>
<img src="example5">
<figcaption>Eample 5</figcaption>
</figure>
</div>
<p>
Laoreet sit amet cursus sit amet dictum sit. Morbi tristique senectus et netus et malesuada fames. Gravida quis blandit turpis cursus. Lectus urna duis convallis convallis. Massa vitae tortor condimentum lacinia quis vel eros. Maecenas accumsan lacus
vel facilisis volutpat est velit egestas dui.</p>
<p>Laoreet sit amet cursus sit amet dictum sit. Morbi tristique senectus et netus et malesuada fames. Gravida quis blandit turpis cursus. Lectus urna duis convallis convallis. Massa vitae tortor condimentum lacinia quis vel eros. Maecenas accumsan lacus
vel facilisis volutpat est velit egestas dui.</p>
<div class="middle">
<figure>
<img src="example6">
<figcaption>Example 6</figcaption>
</figure>
</div>
</body>
</html>
Not sure of exactly what you want but is this close to it?
<style>
body {
background-image:url("example");
background-repeat:no-repeat;
background-size:100%;
background-position-y:bottom;
}
figcaption {
font-style: italic;
font-size:small;
padding: 2px;
}
h1 {
text-align:center;
}
.left {
display: flex;
flex-direction: row-reverse;
align-items: center;
}
.middle {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.right {
display: flex;
flex-direction: row;
align-items: center;
}
.center {
display:block;
margin-left:auto;
margin-right:auto;
border-style:solid;
}
img {
border-style:solid;
width:35%;
height:35%;
}
</style>
<body>
<h1>Header</h1>
<figure class="middle">
<img class="center" src="example1">
<figcaption>Example</figcaption>
</figure>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum
<figure class="right">
<img src="example2">
<figcaption>Example 2</figcaption>
</figure>
Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum
<figure class="left">
<img src="example3">
<figcaption>Example 3</figcaption>
</figure>
Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum
<figure class="right">
<img src="example4">
<figcaption>Example 4</figcaption>
</figure>
Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>
<figure class="left">
<img src="example5">
<figcaption>Eample 5</figcaption>
</figure>
Lorem Ipsum Lorem Ipsum Lorem Ipsum</p></p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p></p>
<figure class="middle">
<img src="example6">
<figcaption>Example 6</figcaption>
</figure>
</body>
How to hide a div while scrolling using pure JS?
so I have a div that covers my whole web page. Beneath it I also have a set of divs. I want to be able to hide my div while scrolling down so my other divs beneath it can start appearing.
the div for now is colored in black with an absolute position. I want this div to be the first page the user sees and then it starts hiding when the user scrolls down and the other divs beneath it to appear.
Here is my html:
body {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">Start Learning!</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
how can I do that with pure JS or CSS?
I'd suggest applying a scroll listener putting a CSS class on your overlay div that causes a fade transition:
document.addEventListener('scroll', () => { toHide.classList.add('hiddenByScroll')});
body {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity .3s ease-in-out;
opacity: 1;
}
#toHide.hiddenByScroll {
opacity: 0;
pointer-events: none;
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">Start Learning!</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
Make sure to also apply pointer-events: none;, otherwise the element will be invisible, but cannot be "clicked through" as it is still there.
You can achieve what you want by modifying the opacity property of the div once the user begins to scroll. Also, here's a working example and a reference for onscroll :)
// listen for a scroll event in the window containing the DOM
window.onscroll = ()=>{
// grab the div we want to hide
let toHide = document.getElementById('toHide');
// fade the div above out by setting its opacity to 0
toHide.style.opacity = 0;
}
html {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity 500ms ease-in-out;
}
<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
</body>
</html>
On the other hand, since you mentioned you want the div to be the first thing your users see when your page loads, you can do something like this so it'll reappear when the user scrolls back up to the top again:
// listen for a scroll event in the window containing the DOM
window.onscroll = ()=>{
// grab the div we want to hide
let toHide = document.getElementById('toHide');
// fade the div above out by setting its opacity to 0
// if the user scrolled down, scrollY will be greater than 0
if(window.scrollY > 0){
toHide.classList.add('hide');
}
else{
toHide.classList.remove('hide');
}
}
html {
margin: 0;
border: 0;
background-color: #201e2f;
}
p {
text-align: justify;
margin: 0;
font-family: Ubuntu;
text-transform: uppercase;
text-indent: 30px;
line-height: 1.5;
font-size: 15px;
}
#parentContainer {
background-color: #ffc107;
height: 250px;
width: 500px;
float: left;
}
#courseImage {
height: 100%;
width: 30%;
float: left;
box-sizing: border-box;
padding: 10px;
}
#courseDescription {
height: 100%;
width: 70%;
float: right;
box-sizing: border-box;
padding-right: 10px;
padding-left: 10px;
padding-top: 10px;
}
button {
height: 50px;
width: 120px;
background-color: #201e2f;
margin: 15px;
border: 0;
color: #ffc107;
border-radius: 5px;
float: right;
font-family: Ubuntu;
font-size: 15px;
}
img {
float: left;
height: 100%;
width: 100%;
}
#wrapper {
display: grid;
grid-gap: 20px 20px;
grid-template-columns: 500px 500px;
justify-content: center;
}
.class1 {
border-top-left-radius: 10px;
}
.class2 {
border-top-right-radius: 10px;
}
.class6 {
border-bottom-right-radius: 10px;
}
.class5 {
border-bottom-left-radius: 10px;
}
#toHide {
background-color: black;
height: 100%;
width: 100%;
position: absolute;
transition: opacity 500ms ease-in-out;
}
.hide {
opacity: 0;
}
<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<div id="toHide">
</div>
<div id="wrapper">
<div id="parentContainer" class="class1">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class2">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class5">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
<div id="parentContainer" class="class6">
<div id="courseImage">
<img src="wd.png" alt="Sorry, couldn't load image">
</div>
<div id="courseDescription">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum, lacus vel commodo semper, nisi elit ultricies lacus, in interdum massa mi at nisl. Praesent sit amet commodo nunc, sit amet mattis dui. Cras sodales sit amet velit sed tristique.
</p>
<button id="startButton">
Start Learning!
</button>
</div>
</div>
</div>
</body>
</html>
Here's a working example for the snippet above and a reference to scrollY.
The second example also makes use of a css class (.hide) instead of modifying the involved property using solely pure JS. The class is dynamically added and removed using the addClass and removeClass methods of the toHide div'sclassList property respectively.
Adding a dragging animation using hammer.js
I've just finished building my slider with touch events using hammer.js. Right now I'm trying to figure out how can I add a dragging effect on my slider. Basically the concept is once I swipe left or right before releasing my finger from the element or screen, it will drag the slider 30px to the left or right before sliding to the next slide
$(document).ready(function() {
$('.prev').on('click', function(e) {
event.stopPropagation();
// store variable relevent to clicked slider
var sliderWrapper = $(this).closest('.slider-wrapper'),
slideItems = sliderWrapper.find('.slide-items'),
slider = sliderWrapper.find('.slider'),
currentSlide = sliderWrapper.attr('data-slide');
// Check if data-slide attribute is greater than 0
if( currentSlide > 0 ) {
// Decremement current slide
currentSlide--;
// Assign CSS position to clicked slider
slider.css({'right' : currentSlide*slideItems.outerWidth() });
// Update data-slide attribute
sliderWrapper.attr('data-slide', currentSlide);
}
});
$('.next').on('click', function(e) {
event.stopPropagation();
// store variable relevent to clicked slider
var sliderWrapper = $(this).closest('.slider-wrapper'),
slideItems = sliderWrapper.find('.slide-items'),
slider = sliderWrapper.find('.slider'),
totalSlides = slideItems.length,
currentSlide = sliderWrapper.attr('data-slide');
// Check if dataslide is less than the total slides
if( currentSlide < totalSlides - 1 ) {
// Increment current slide
currentSlide++;
// Assign CSS position to clicked slider
slider.css({'right' : currentSlide*slideItems.outerWidth() });
// Update data-slide attribute
sliderWrapper.attr('data-slide', currentSlide);
}
})
$('.slider-wrapper').each(function(){
// create a simple instance
// by default, it only adds horizontal recognizers
var direction;
var mc = new Hammer(this),
itemLength = $(this).find('.slide-items').length,
count = 0,
slide = $(this);
var sliderWrapper = slide,
slideItems = sliderWrapper.find('.slide-items'),
slider = sliderWrapper.find('.slider'),
totalSlides = slideItems.length,
currentSlide = sliderWrapper.attr('data-slide');
mc.on("panleft panright", function(ev) {
direction = ev.type;
});
mc.on("panend", function(ev) {
if(direction === "panleft") {
console.log('panleft');
// Check if dataslide is less than the total slides
if( currentSlide < totalSlides - 1 ) {
// Increment current slide
currentSlide++;
// Assign CSS position to clicked slider
slider.css({'right' : currentSlide*slideItems.outerWidth() });
// Update data-slide attribute
sliderWrapper.attr('data-slide', currentSlide);
}
}
if(direction === "panright") {
console.log('right');
// Check if data-slide attribute is greater than 0
if( currentSlide > 0 ) {
// Decremement current slide
currentSlide--;
// Assign CSS position to clicked slider
slider.css({'right' : currentSlide*slideItems.outerWidth() });
// Update data-slide attribute
sliderWrapper.attr('data-slide', currentSlide);
}
}
});
});
});
$(window).on('load', function() {
$('.slider-wrapper').each(function() {
var slideItems = $(this).find('.slide-items'),
items = slideItems.length,
sliderBox = $(this).find('.slider'),
sliderWrapperWidth = $(this).width();
slideItems.outerWidth( sliderWrapperWidth / 2 );
sliderBox.width( slideItems.outerWidth() * items );
});
});
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
* {
box-sizing: border-box; }
.container {
max-width: 1280px;
margin: 0 auto; }
.container .slider-wrapper {
margin-bottom: 40px;
background-color: grey;
overflow: hidden; }
.container .slider-wrapper .slider {
position: relative;
right: 0;
display: flex;
flex-wrap: wrap;
overflow: hidden; }
.container .slider-wrapper .slider > div {
padding: 10px;
background-color: #e5d0d0; }
.container .slider-wrapper .slider > div p {
color: purple; }
.container .slider-wrapper .buttons {
display: flex;
justify-content: space-between;
background: beige;
padding: 10px 0; }
.container .slider-wrapper .buttons div {
background-color: cyan; }
/*# sourceMappingURL=style.css.map */
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="slider-wrapper" data-slide="0">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget ex mi. Etiam a vestibulum ligula, id porta dui. Duis in iaculis quam. Integer aliquam justo nec nibh consequat vulputate.</p>
</div>
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
</div>
<div class="buttons">
<div class="prev">prev</div>
<div class="next">next</div>
</div>
</div>
<div class="slider-wrapper" data-slide="0">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
</div>
<div class="buttons">
<div class="prev">prev</div>
<div class="next">next</div>
</div>
</div>
<div class="slider-wrapper" data-slide="0">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget ex mi. Etiam a vestibulum ligula, id porta dui. Duis in iaculis quam. Integer aliquam justo nec nibh consequat vulputate.</p>
</div>
</div>
<div class="buttons">
<div class="prev">prev</div>
<div class="next">next</div>
</div>
</div>
<div class="slider-wrapper" data-slide="0">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
</div>
<div class="buttons">
<div class="prev">prev</div>
<div class="next">next</div>
</div>
</div>
<div class="slider-wrapper" data-slide="0">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
</div>
<div class="buttons">
<div class="prev">prev</div>
<div class="next">next</div>
</div>
</div>
</div>
I modified something from your code. Is this similar what you are trying to do??
$(document).ready(function() {
$('.prev').on('click', function(e) {
e.stopPropagation();
// store variable relevent to clicked slider
var sliderWrapper = $(this).closest('.slider-wrapper'),
slideItems = sliderWrapper.find('.slide-items'),
slider = sliderWrapper.find('.slider'),
currentSlide = sliderWrapper.attr('data-slide');
// Check if data-slide attribute is greater than 0
if( currentSlide > 0 ) {
// Decremement current slide
currentSlide--;
// Assign CSS position to clicked slider
slider.css({'right' : currentSlide*slideItems.outerWidth() });
// Update data-slide attribute
sliderWrapper.attr('data-slide', currentSlide);
}
});
$('.next').on('click', function(e) {
e.stopPropagation();
// store variable relevent to clicked slider
var sliderWrapper = $(this).closest('.slider-wrapper'),
slideItems = sliderWrapper.find('.slide-items'),
slider = sliderWrapper.find('.slider'),
totalSlides = slideItems.length,
currentSlide = sliderWrapper.attr('data-slide');
// Check if dataslide is less than the total slides
if( currentSlide < totalSlides - 1 ) {
// Increment current slide
currentSlide++;
// Assign CSS position to clicked slider
slider.css({'right' : currentSlide*slideItems.outerWidth() });
// Update data-slide attribute
sliderWrapper.attr('data-slide', currentSlide);
}
})
$('.slider-wrapper').each(function(){
// create a simple instance
// by default, it only adds horizontal recognizers
var direction;
var mc = new Hammer(this),
itemLength = $(this).find('.slide-items').length,
count = 0,
slide = $(this);
var sliderWrapper = slide,
slideItems = sliderWrapper.find('.slide-items'),
slider = sliderWrapper.find('.slider'),
totalSlides = slideItems.length,
currentSlide = sliderWrapper.attr('data-slide');
var dragDist = 40;
var dist = 0;
var curPosition = 0;
var toPosition = 0;
mc.on("panleft panright", function(ev) {
direction = ev.type;
// modified
dist = ev.deltaX;
var maxDist = Math.min(dragDist, dist);
curPosition = currentSlide*slideItems.outerWidth();
toPosition = curPosition + maxDist*-1;
slider.css({'right': toPosition + 'px'});
});
mc.on("panend", function(ev) {
slider.css({'right': curPosition + 'px'});
if( Math.abs(dist) <= dragDist ){
return;
}
if(direction === "panleft") {
console.log('pan left');
// Check if dataslide is less than the total slides
if( currentSlide < totalSlides - 1 ) {
// Increment current slide
currentSlide++;
// Assign CSS position to clicked slider
slider.css({'right' : currentSlide*slideItems.outerWidth() });
// Update data-slide attribute
sliderWrapper.attr('data-slide', currentSlide);
}
}
if(direction === "panright") {
console.log('pan right');
// Check if data-slide attribute is greater than 0
if( currentSlide > 0 ) {
// Decremement current slide
currentSlide--;
// Assign CSS position to clicked slider
slider.css({'right' : currentSlide*slideItems.outerWidth() });
// Update data-slide attribute
sliderWrapper.attr('data-slide', currentSlide);
}
}
});
});
});
$(window).on('load', function() {
$('.slider-wrapper').each(function() {
var slideItems = $(this).find('.slide-items'),
items = slideItems.length,
sliderBox = $(this).find('.slider'),
sliderWrapperWidth = $(this).width();
slideItems.outerWidth( sliderWrapperWidth / 2 );
sliderBox.width( slideItems.outerWidth() * items );
});
});
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
* {
box-sizing: border-box; }
.container {
max-width: 1280px;
margin: 0 auto; }
.container .slider-wrapper {
margin-bottom: 40px;
background-color: grey;
overflow: hidden; }
.container .slider-wrapper .slider {
position: relative;
right: 0;
display: flex;
flex-wrap: wrap;
overflow: hidden; }
.container .slider-wrapper .slider > div {
padding: 10px;
background-color: #e5d0d0; }
.container .slider-wrapper .slider > div p {
color: purple; }
.container .slider-wrapper .buttons {
display: flex;
justify-content: space-between;
background: beige;
padding: 10px 0; }
.container .slider-wrapper .buttons div {
background-color: cyan; }
/*# sourceMappingURL=style.css.map */
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="slider-wrapper" data-slide="0">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget ex mi. Etiam a vestibulum ligula, id porta dui. Duis in iaculis quam. Integer aliquam justo nec nibh consequat vulputate.</p>
</div>
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
</div>
<div class="buttons">
<div class="prev">prev</div>
<div class="next">next</div>
</div>
</div>
<div class="slider-wrapper" data-slide="0">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
</div>
<div class="buttons">
<div class="prev">prev</div>
<div class="next">next</div>
</div>
</div>
<div class="slider-wrapper" data-slide="0">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget ex mi. Etiam a vestibulum ligula, id porta dui. Duis in iaculis quam. Integer aliquam justo nec nibh consequat vulputate.</p>
</div>
</div>
<div class="buttons">
<div class="prev">prev</div>
<div class="next">next</div>
</div>
</div>
<div class="slider-wrapper" data-slide="0">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
</div>
<div class="buttons">
<div class="prev">prev</div>
<div class="next">next</div>
</div>
</div>
<div class="slider-wrapper" data-slide="0">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
</div>
<div class="buttons">
<div class="prev">prev</div>
<div class="next">next</div>
</div>
</div>
</div>
How to create a random changing paragraph with fade effects?
For a horror themed website I'm supposed to create a div that houses reviews.
I want the reviews to stay on screen for a couple of seconds before fading out and being replaced with another review. I kind of have an idea about how to get the desired effect using Jquery and absolute css placement, but I'm having trouble getting the code to do exactly what I want.
Some examples on google and this website have pushed me to the right direction I think, but none work very well for multiple paragraphs + random placement. (In case a visitor returns to the site, he's faced with different reviews the the last time)
I'm guessing I'll need an array..
$('#leftReview').fadeIn('fast').delay(1000).fadeOut('fast');
#ReviewContainer{
width: 400px;
height: 400px;
margin: 0 auto;
border: 2px solid white;
color: white;
background-color: #000;
position: relative;
}
.leftReview{
position:absolute;
top:0;
left:0;
width:400px;
height:400px;
}
<div id="ReviewContainer">
<div class="leftReview">
<h3>Review #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sem libero. Duis sit amet pretium sapien.</p>
</div>
<div class="leftReview">
<h3>Review #2</h3>
<p>Nam ut nunc id turpis consequat vestibulum eget sit amet arcu. Nullam nec pellentesque leo, eu pulvinar velit.</p>
</div>
<div class="leftReview">
<h3>Review #3</h3>
<p>Pellentesque sagittis justo sit amet odio commodo, in malesuada nulla elementum. Integer pretium, sem nec vehicula dapibus.</p>
</div>
<div class="leftReview">
<h3>Review #4</h3>
<p>Arcu elit scelerisque enim, vel tincidunt velit ex non dolor. Proin nec fringilla mi. Nunc commodo nulla vitae ipsum eleifend fermentum.</p>
</div>
</div>
To randomize the divs you need to use Math.random function to get a random number.
$(document).ready(function() {
setInterval(rotate,1200);
})
var panels = $('.leftReview');
var arr = [];
var rand = getRandom(panels.length);
panels.eq(rand).fadeIn();
function rotate() {
var visible = panels.filter(':visible').fadeOut(function() {
panels.eq(getRandom(panels.length)).fadeIn();
});
}
function getRandom(length) {
if (arr.length == length) {
arr = [];
}
var rand = Math.floor(Math.random() * length);
if (arr.indexOf(rand) > -1) {
return getRandom(length)
}
arr.push(rand)
return rand;
}
#ReviewContainer{
width: 400px;
height: 400px;
margin: 0 auto;
border: 2px solid white;
color: white;
background-color: #000;
position: relative;
}
.leftReview {
position:absolute;
top:0;
left:0;
width:400px;
height:400px;
display:none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ReviewContainer">
<div class="leftReview">
<h3>Review #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sem libero. Duis sit amet pretium sapien.</p>
</div>
<div class="leftReview">
<h3>Review #2</h3>
<p>Nam ut nunc id turpis consequat vestibulum eget sit amet arcu. Nullam nec pellentesque leo, eu pulvinar velit.</p>
</div>
<div class="leftReview">
<h3>Review #3</h3>
<p>Pellentesque sagittis justo sit amet odio commodo, in malesuada nulla elementum. Integer pretium, sem nec vehicula dapibus.</p>
</div>
<div class="leftReview">
<h3>Review #4</h3>
<p>Arcu elit scelerisque enim, vel tincidunt velit ex non dolor. Proin nec fringilla mi. Nunc commodo nulla vitae ipsum eleifend fermentum.</p>
</div>
</div>
http://jsbin.com/pojoke/edit?html,css,js
For make this, use setInterval event and make your div on display:none first
Please try
$(document).ready(function() {
var id = 0;
var carrousel = setInterval(rotate,1200);
function rotate(){
if(id != $('.leftReview').length){
$('.leftReview').eq(id).fadeIn(100).delay(1000).fadeOut(100)
id++;
}
}
})
#ReviewContainer{
width: 400px;
height: 400px;
margin: 0 auto;
border: 2px solid white;
color: white;
background-color: #000;
position: relative;
}
.leftReview{
position:absolute;
top:0;
left:0;
width:400px;
height:400px;
display:none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ReviewContainer">
<div class="leftReview">
<h3>Review #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sem libero. Duis sit amet pretium sapien.</p>
</div>
<div class="leftReview">
<h3>Review #2</h3>
<p>Nam ut nunc id turpis consequat vestibulum eget sit amet arcu. Nullam nec pellentesque leo, eu pulvinar velit.</p>
</div>
<div class="leftReview">
<h3>Review #3</h3>
<p>Pellentesque sagittis justo sit amet odio commodo, in malesuada nulla elementum. Integer pretium, sem nec vehicula dapibus.</p>
</div>
<div class="leftReview">
<h3>Review #4</h3>
<p>Arcu elit scelerisque enim, vel tincidunt velit ex non dolor. Proin nec fringilla mi. Nunc commodo nulla vitae ipsum eleifend fermentum.</p>
</div>
</div>
Update with random view
$(document).ready(function() {
var carrousel = setInterval(rotate,1200);
function rotate(){
id = Math.floor((Math.random() * $(".leftReview").length));
$('.leftReview').eq(id).fadeIn(100).delay(1000).fadeOut(100)
}
})
#ReviewContainer{
width: 400px;
height: 400px;
margin: 0 auto;
border: 2px solid white;
color: white;
background-color: #000;
position: relative;
}
.leftReview{
position:absolute;
top:0;
left:0;
width:400px;
height:400px;
display:none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ReviewContainer">
<div class="leftReview">
<h3>Review #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sem libero. Duis sit amet pretium sapien.</p>
</div>
<div class="leftReview">
<h3>Review #2</h3>
<p>Nam ut nunc id turpis consequat vestibulum eget sit amet arcu. Nullam nec pellentesque leo, eu pulvinar velit.</p>
</div>
<div class="leftReview">
<h3>Review #3</h3>
<p>Pellentesque sagittis justo sit amet odio commodo, in malesuada nulla elementum. Integer pretium, sem nec vehicula dapibus.</p>
</div>
<div class="leftReview">
<h3>Review #4</h3>
<p>Arcu elit scelerisque enim, vel tincidunt velit ex non dolor. Proin nec fringilla mi. Nunc commodo nulla vitae ipsum eleifend fermentum.</p>
</div>
</div>
Showing a div only when a certain div's height is > than set height?
I have a tabbing module I created that has scrollable content areas. I made a quick blinking arrow style to let the users know that this box is scrollable. I would like to make it so this div is only visible if my content (scrollable text box area) is above a certain height.
For example, my scrollable area is always set to height:450px. So I need a way to figure out how to get the height of the content area, then if is less than 450px height, to not show my div more-info.
Here is a jsfiddle with a working demo.
HTML Structure
<div class="tabs-left app-about-page">
<div class="more-info"></div>
<ul class="nav nav-tabs">
<li class="active"><span class="glyphicon glyphicon-heart">Donor Acquisition</span></li>
<li><span class="glyphicon glyphicon-star">Donor Cultivation</span></li>
<li><span class="glyphicon glyphicon-headphones">Donor Retention</span></li>
<li><span class="glyphicon glyphicon-time">Donor Blogging</span></li>
<li><span class="glyphicon glyphicon-calendar">Donor Engagement</span></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a">
</div>
<div class="tab-pane" id="b">
</div>
<div class="tab-pane" id="c">
</div>
<div class="tab-pane" id="d">
</div>
<div class="tab-pane" id="e">
</div>
</div><!-- /tab-content -->
</div><!-- /tabbable -->
From some searching and piecing together, I found something like this, so assume this is the starting point.
$(document).ready(function () {
if ($(".tab-pane").height() > 450 {
jQuery(".more-info").fadeIn(200);
} else {
jQuery(".more-info").hide(100);
});
Just make use of the shown.bs.tab event, to show and hide your arrow div.
Togglable tabs Events
shown.bs.tab
This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
$('.more-info').css('display', 'none');
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var activeContentElem = $($(e.target).attr('href'));
if (activeContentElem[0].scrollHeight > activeContentElem.height()) {
$('.more-info').css('display', 'block');
} else {
$('.more-info').css('display', 'none');
}
})
.nav-tabs {
float: left;
border-bottom: 0;
}
.nav-tabs li {
float: none;
margin: 0;
width: 106px;
height: 106.5px;
left: -30px;
top: -20px;
position: relative;
display: block;
background-color: #F2F2F0;
margin-top: 0;
border-bottom: #FFF 2px solid;
text-align: center;
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-ms-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
.nav-tabs li:last-child{
border:none;
}
.nav-tabs li a{
display: block;
height: 75px;
position: relative;
padding-top: 31px;
font-size: 14px;
color:rgb(51, 51, 51);
text-decoration: none;
}
.nav-tabs li:hover {
background-color: #DBDBDA;
cursor:pointer;
}
.nav-tabs > li.active, .nav-tabs > li.active a, .nav-tabs > li a:active, .nav-tabs > li.active > li:focus, .nav-tabs >li a:focus {
background:rgba(51, 181, 229, 0.45);
color:#FFF;
text-decoration: none;
}
.tab-content {
margin-left: 45px;
}
.tab-content .tab-pane {
display: none;
background-color: #fff;
padding: 0;
overflow-y: auto;
}
.tab-pane p{
margin: 0 0 16px 0;
}
.tab-pane p:first-child{
margin:5px 0 16px;
}
.tab-pane h1{
padding-bottom: 5px;
border-bottom: 1px solid #DBDBDA;
margin-bottom: 16px;
}
.tab-pane img{
max-width: 70%;
}
.tab-content .active {
display: block;
overflow: scroll;
height: 450px !important;
padding: 0px 15px 0 0px;
}
.list-group {
width: 100%;
}
.list-group .list-group-item {
height: 50px;
}
.list-group .list-group-item h4, .list-group .list-group-item span {
line-height: 11px;
}
#-webkit-keyframes circleBounce {
0% {-webkit-transform: scale(0.9); opacity: 0;}
20% {opacity: 0.5;}
50% {opacity: 1;}
80% {opacity: 0.5;}
100% {-webkit-transform: scale(1.1); opacity:0;}
}
.more-info {
position: absolute;
bottom: 30px;
left: calc(50% - 3px);
width: 6px;
height: 6px;
border: 2px solid rgb(51, 181, 229);
border-top: none;
border-left: none;
-webkit-transform: rotate(45deg);
-webkit-transform-origin: 50% 50%;
}
.more-info:after {
content: "";
display: block;
position: absolute;
top: calc(50% - 17px);
left: calc(50% - 17px);
width: 35px;
height: 35px;
border: 1px solid rgba(255,255,255,.8);
border: 1px solid rgb(51, 181, 229);
border-radius: 50%;
-webkit-animation: circleBounce 2.5s linear infinite;
}
.more-info:hover:after {
background-color: rgba(51, 181, 229, .15);
cursor:inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="tabs-left app-about-page">
<div class="more-info"></div>
<ul class="nav nav-tabs">
<li class="active"><span class="glyphicon glyphicon-heart">Donor Acquisition</span></li>
<li><span class="glyphicon glyphicon-star">Donor Cultivation</span></li>
<li><span class="glyphicon glyphicon-headphones">Donor Retention</span></li>
<li><span class="glyphicon glyphicon-time">Donor Blogging</span></li>
<li><span class="glyphicon glyphicon-calendar">Donor Engagement</span></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a">
<h1>Donor Acquisition</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
</div>
<div class="tab-pane" id="b">
<h1>Donor Cultivation</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
</div>
<div class="tab-pane" id="c">
<h1>Donor Retention</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
</div>
<div class="tab-pane" id="d">
<h1>Nonprofit Blogging</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
</div>
<div class="tab-pane" id="e">
<h1>Nonprofit Engagement</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
</div>
</div><!-- /tab-content -->
</div><!-- /tabbable -->
First, start your .more-info class as hidden in css.
Then, you could check the height of the content of your tab every time the visible tab changes, and if it is greater than 450px, swap visibility of your more info button.
This is the jQuery snippet:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var div = $($(e.target).attr('href'));
$('.more-info').hide();
if (div.get(0).scrollHeight > 450)
$('.more-info').show();
});
I'm not sure here, but I looked around some more and came up with this.
var clientHeight = document.getElementById('myDiv').clientHeight;
and some combination of this..
[DIV].style.visibility='visible'
[DIV].style.visibility='hidden'
then use an if statement?
Kind of new to coding, but maybe this is on the right track.
You could bind an event to your menu anchors that checks the height of your active div against the scroll height of that div and show or hides the blinking arrow.
Using JQuery, something like this so that it triggers after your bootstrap finishes:
$(document).ready(function(){
$('a[data-toggle="tab"]').on('shown.bs.tab', function (){
ToggleMoreInfoArrow();
//Call the toggle every time the content changes.
});
ToggleMoreInfoArrow(); //Call it the first time the page loads.
});
function ToggleMoreInfoArrow()
{
if( $('div.active').prop('scrollHeight') < $('div.active').height())
{
$('.more-info').hide();
}
else
{
$('.more-info').show();
}
}
Edit: I'm not sure how your "active" class gets set, but you'd want to run the height check code after that happens. This could be on page load or wherever, the if statement is the important bit.
Edit: See this working fiddle: http://jsfiddle.net/9hkpzagz/7/
Hello multinumbered user, I didn't like the script there was in example, and I changed the CSS a bit, moving "more" button to the right bottom corner, but I did the following:
1. you should always have .tab-pane to be of the set height on start and not scrolled, so I changed the CSS to be "overflow: hidden"
I wrote a function that checks the height of tab content and either activate or desactivate "more"
If "more" button is clicked, the tab content CSS 'overflow-y' option is changed to 'auto' - this adds vertical scrollbar.
http://jsfiddle.net/9hkpzagz/8/
here is my js code:
function checkHeightAndSetMore(clickedMore){
var activeTabH=$('.tab-content .active').height();
if(activeTabH >450){
$('div.more-info').fadeIn();
}
else{
$('div.more-info').fadeOut();
}
if(clickedMore == 1){
$('.tab-content .active').css('overflow-y', 'auto');
$('div.more-info').fadeOut();
}
}
$(document).ready(function(){
checkHeightAndSetMore(0);
$('.more-info').click(function(){
checkHeightAndSetMore(1);
});
});