jQuery slideDown animation jitter - javascript

I notice when I change the padding settings on the content class (I think there is too much white space), it completely messes up the smooth dropdown. I'm not sure why this is the case, I can not see anything in the JavaScript.
Fiddle
HTML:
<div class="container">
<div class="title"><h2><img src="http://i.imgur.com/XsDSYw6.png">TIME</h2></div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.</p></div>
<div class="title"><h2><img src="http://i.imgur.com/XsDSYw6.png">CREATIVITY</h2></div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.</p></div>
<div class="title"><h2><img src="http://i.imgur.com/XsDSYw6.png">BUDGET</h2></div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.</p></div>
</div>
CSS:
.title {
padding-left:15px;
height:17px;
background: transparent url('http://www.elevate1.co.uk/dropdownwitharrows/images/arrow-toggle.png') 0px 5px
no-repeat;
cursor:pointer;
margin-bottom:10px;
}
.title img{
width: 24px;
margin-right: 5px;
float: left;
}
.title span{
font-size: 16px;
line-height: 24px;
float: left;
}
.on {
background: transparent url('http://www.elevate1.co.uk/dropdownwitharrows/images/arrow-toggle.png') 0 -10px no-repeat;
}
.content {
display:none;
padding: 10px;
margin-bottom:10px;
}
JavaScript:
$(document).ready(function() {
$('.title').click(function() {
$('.title').removeClass('on');
$('.content').slideUp('normal');
if($(this).next().is(':hidden') == true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
});

What's happening is as the container's height is animated, the children of that container are being affected by margins, line-heights, etc, which are all dependent on the boundaries of the container. Add the following to fix:
.content {
overflow: hidden;
}
Yeah, it's that simple :P
Here's your Fiddle updated.

Related

How to have ellipsis, clamp lines, and have text after ellipsis? [duplicate]

I need to hide a part of the text that is longer than 2 lines and add '...123 T.' as an indicator of the hidden overflow, like below:
What I have so far: https://plnkr.co/edit/NTlv4NpyhRTzJkNQ?preview
Html:
<div class="outside-container">
<span class="container">
<span class="main-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi,
dapibus sit amet posuere eu, porttitor condimentum nulla. Donec
convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam
sollicitudin lacus ipsum, at tincidunt ante condimentum vitae.
</span>
<span class="small-text">123 T.</span>
</span>
<span class="container">
<span class="main-text">
Lorem ipsum
</span>
<span class="small-text">123 T.</span>
</span>
<span class="container">
<span class="main-text">
Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus
</span>
<span class="small-text">123 T.</span>
</span>
</div>
CSS:
.outside-container {
width: 200px;
}
.container{
max-width: 200px;
}
.main-text {
overflow: hidden;
vertical-align: middle;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.small-text {
color: #8e8f8f ;
font-size: 10px;
vertical-align: middle;
}
In the future you will be able to do this with only one line of code using:
line-clamp: 2 "...123 T.";
You can find more detail in the specification:
The line-clamp property is a shorthand for the max-lines, block-ellipsis, and continue properties.
It allows limiting the contents of a block container to the specified number of lines; remaining content is fragmented away and neither rendered nor measured. Optionally, it also allows inserting content into the last line box to indicate the continuity of truncated/interrupted content.
Until then, here is a very hacky idea to achieve the result:
.container {
max-width: 200px;
margin: 5px;
}
.main-text {
line-height: 1.2em; /* the height of a line */
max-height: calc(2 * 1.2em); /* restrict the height to 2 lines*/
overflow: hidden;
display: inline-block;
position: relative;
}
.main-text:after {
content: "123 T.";
display:inline-block;
width:40px;
position:relative;
z-index:999;
/* a big box-shadow to hide the span element used for the ellipsis */
box-shadow:
40px 0 0 #fff,
80px 0 0 #fff,
120px 0 0 #fff,
160px 0 0 #fff;
/**/
color: #8e8f8f;
font-size: 10px;
background: #fff; /* white background to cover the text behind */
margin-left:2px;
}
/* this will replace the ellipsis */
.main-text span {
position: absolute;
/* position at the bottom right */
top: 1.2em; /* height of one line */
right: 0;
padding: 0 3px;
background: #fff; /* white background to cover the text behind */
}
.main-text span:before {
content: "..."; /* the dots*/
}
/* the text after the dots */
.main-text span:after {
content: "123 T.";
color: #8e8f8f;
font-size: 10px;
<div class="container">
<div class="main-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi, dapibus sit amet posuere eu, porttitor condimentum nulla. Donec convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam sollicitudin lacus ipsum, at tincidunt ante condimentum
vitae. <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lorem ipsum <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lo <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lorem ipsum dolor sit ameta, adipiscing elit <span></span>
</div>
</div>
Or like below if you want the text to appear only with the dots:
.container {
max-width: 200px;
margin: 5px;
}
.main-text {
line-height: 1.2em; /* the height of a line */
max-height: calc(2 * 1.2em); /* restrict the height to 2 lines*/
overflow: hidden;
display: inline-block;
position: relative;
}
.main-text:after {
content: "."; /* at least one character to set the height */
display:inline-block;
width:40px;
position:relative;
z-index:999;
/* a big box-shadow to hide the span element used for the ellipsis */
box-shadow:
40px 0 0 #fff,
80px 0 0 #fff,
120px 0 0 #fff,
160px 0 0 #fff;
/**/
color: transparent; /* no colorataion*/
font-size: 10px;
background: #fff; /* white background to cover the text behind */
margin-left:2px;
}
/* this will replace the ellipsis */
.main-text span {
position: absolute;
/* position at the bottom right */
top: 1.2em; /* height of one line */
right: 0;
padding: 0 3px;
background: #fff; /* white background to cover the text behind */
}
.main-text span:before {
content: "..."; /* the dots*/
}
/* the text after the dots */
.main-text span:after {
content: "123 T.";
color: #8e8f8f;
font-size: 10px;
<div class="container">
<div class="main-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi, dapibus sit amet posuere eu, porttitor condimentum nulla. Donec convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam sollicitudin lacus ipsum, at tincidunt ante condimentum
vitae. <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lorem ipsum <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lo <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus <span></span>
</div>
</div>
<div class="container">
<div class="main-text">
Lorem ipsum dolor sit ameta, adipiscing elit <span></span>
</div>
</div>
Does the following code give the desired output?
.outside-container {
width: 220px;
}
.container {
width: 100%;
margin-bottom: 20px;
display: flex;
align-items: flex-end;
}
.main-text {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-right: 5px;
}
.small-text {
color: #8e8f8f;
font-size: 10px;
white-space: nowrap;
transform: translateY(-2px);
}
<div class="outside-container">
<div class="container">
<span class="main-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi,
dapibus sit amet posuere eu, porttitor condimentum nulla. Donec
convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam
sollicitudin lacus ipsum, at tincidunt ante condimentum vitae.
</span>
<span class="small-text">123 T.</span>
</div>
<div class="container">
<span class="main-text">
Lorem ipsum
</span>
<span class="small-text">123 T.</span>
</div>
<div class="container">
<span class="main-text">
Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus Donec
convallis lorem justo, eget malesuada lorem tempor vitae. Aliqua
</span>
<span class="small-text">123 T.</span>
</div>
</div>

How to increment div height/paddint-top on scrolling and detect an image collision to the div?

Text is scrolling and I can stop the text based on a fixed scroll value.
But the Home div height is 100vh, so not all screen resolution will stop the text in the same scroll value. So I need to stop dynamically when it reach certain scroll value which may be different in other resolutions. (or stop when reach some #Element)
Moreover I need to make the description div paddingTop increase the value while scrolling to insert the Text inside that div, and stop increasing height and stop the text moving when it reach some point, according to previous parragraph explanation.
I'm up to use some effect libraries or whatever,but prefering to do with vanilla-js, is nice to learn how it works.
I did this example: https://jsfiddle.net/ja0hzydw/4/
HTML
<section name="Home" id="home">
<div class="home">
<div class="logo" id="logo">
<p>T</p>
<p>E</p>
<p>X</p>
<p>T</p>
</div>
</div>
</section>
<section name="Description" id="description">
<div class="description">
<div class="description-title" id="descTitle">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="description-text">
<p id="descParagraph1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies massa ac sem aliquam, et convallis est feugiat. Nunc ut diam orci. Nunc sed malesuada tortor. Donec orci diam, ultricies eget magna auctor, facilisis elementum metus.
</p>
<p id="descParagraph2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies massa ac sem aliquam, et convallis est feugiat. Nunc ut diam orci. Nunc sed malesuada tortor.
</p>
</div>
</div>
</section>
CSS
body, html {
margin: 0;
padding: 0;
}
.home {
background-image: url("https://www.wallpapertip.com/wmimgs/0-236_440px-animated-wallpaper-windows.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
.logo {
margin-top: 0px;
position: absolute;
top: 0;
left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));
}
.description {
padding-bottom: 100px;
margin: 0 auto;
max-width: 550px;
text-align: center;
}
Javascript
window.onscroll = function() {
scrollLogo();
};
function scrollLogo() {
var element = document.getElementById("logo");
var scrollValue = 80;
if (document.body.scrollTop > scrollValue || document.documentElement.scrollTop > scrollValue) {
element.style.marginTop = "80px";
element.style.position = "absolute";
} else {
element.style.marginTop = "0px";
element.style.position = "fixed";
}
var descriptionHeight = document.getElementById("descTitle");
descriptionHeight.style.padding = "50px 0px 0px 0px";
console.log("document.body.scrollTop", document.body.scrollTop, "document.documentElement.scrollTop", document.documentElement.scrollTop);
}

Responsive Text Issue

I have the following code:
body{
width:100%;
font-family:sans-serif;
background: transparent;
}
.testimonials{
margin:0;
display:grid;
grid-template-columns: repeat(auto-fit,minmax(350px, 1fr));
grid-gap:20px;
}
.testimonials .card{
position:relative;
width:350px;
margin:0 auto;
background:#333;
padding:20px;
box-sizing: border-box;
text-align:center;
box-shadow: 10px 8px 20px rgba(0,0,0,.5);
overflow: hidden;
}
.testimonials .card .layer{
position: absolute;
top: calc(100% - 3px);
width:100%;
height:100%;
left:0;
background:linear-gradient(#034e70, #390375);
z-index:1;
transition:0.5s;
}
.testimonials .card:hover .layer{
top:0;
}
.testimonials .card .content{
position:relative;
z-index:2;
}
.testimonials .card .content p{
font-size:18px;
line-height:24px;
color:#FFF;
}
#media all and (max-width: 500px) {
.testimonials .card .content p{
width: 100%;
}
}
.testimonials .card .content .image{
width:100px;
height:100px;
margin: 0 auto;
border-radius:50%;
overflow:hidden;
margin-bottom: 16px;
box-shadow: 0 10px 20px rgba{0,0,0, .2};
}
.testimonials .card .content .details h2{
font-size:15px;
color:#fff;
}
.testimonials .card .content .details h2 span{
color:#03a9f4;
font-size:12px;
transition:0.5s;
}
.testimonials .card:hover .content .details h2 span{
color:#fff;
}
<section id="References">
<div class="section-title">
<h2>References</h2>
</div>
<div class="testimonials">
<!-- CARD 1 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 1 end-->
<!-- CARD 2 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 2 end-->
<!-- CARD 3 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 3 end-->
</div>
</section>
I have the above code embedded in a website and so when I view the website on a smaller screen, I am getting this output:
The white text, image, and blue text are not responsive. However, the card is. Its just these three things, and I tried adding media queries to make them responsive but it did not work for some reason, and the output was the exact same as above.
Expected Output
When I inspect it and view it on 414 width, I am getting the above expected output which is what I want. However, below 414 width, I am getting the output as shown in the very first picture. How would I fix this? Any suggestions?
Try updating the grid-template-columns on media query for responsive design/mobile screen.
body {
width: 100%;
font-family: sans-serif;
background: transparent;
margin: 0;
}
.testimonials {
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-gap: 20px;
padding: 20px;
}
.testimonials .card {
position: relative;
max-width: 350px;
margin: 0 auto;
background: #333;
padding: 20px;
box-sizing: border-box;
text-align: center;
box-shadow: 10px 8px 20px rgba(0, 0, 0, .5);
overflow: hidden;
}
.testimonials .card .layer {
position: absolute;
top: calc(100% - 3px);
width: 100%;
height: 100%;
left: 0;
background: linear-gradient(#034e70, #390375);
z-index: 1;
transition: 0.5s;
}
.testimonials .card:hover .layer {
top: 0;
}
.testimonials .card .content {
position: relative;
z-index: 2;
}
.testimonials .card .content p {
font-size: 18px;
line-height: 24px;
color: #FFF;
}
.testimonials .card .content .image {
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
margin-bottom: 16px;
box-shadow: 0 10px 20px rgba(0,0,0,.2);
}
.testimonials .card .content .details h2 {
font-size: 15px;
color: #fff;
}
.testimonials .card .content .details h2 span {
color: #03a9f4;
font-size: 12px;
transition: 0.5s;
}
.testimonials .card:hover .content .details h2 span {
color: #fff;
}
#media all and (max-width: 500px) {
.testimonials {
grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
}
.testimonials .card .content p {
width: 100%;
}
}
<section id="References">
<div class="section-title">
<h2>References</h2>
</div>
<div class="testimonials">
<!-- CARD 1 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim
egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 1 end-->
<!-- CARD 2 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim
egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 2 end-->
<!-- CARD 3 START-->
<div class="card">
<div class="layer"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim
egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
<div class="image">
<img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
</div>
<div class="details">
<h2>
Sample Text <br>
<span>Sample Text Goes Here Too</span>
</h2>
</div>
</div>
</div>
<!-- CARD 3 end-->
</div>
</section>
It's because you've set a fixed width of 350px for your element. When you make the window any smaller than ~370px wide, the fixed width prevents the element from getting any smaller. Try using relative sizes like % instead.

make div appear over another div on scroll

Firstly I'm sorry, there's probably quite an easy way to do this but I'm an amateur with javascript, etc. which I expect you need. Here's what i want to do:
I have a basic 'parallax' website (something along the lines of this) but I'd like to add a footer which covers half of the bottom slide when you scroll down to it, with the content in the bottom slide staying put.
As in at the moment, the content in the fifth slide moves when you scroll down to the footer, but I want it to stop at the fifth slide, with the footer sliding over the top.
Any help will be greatly appreciated!
Sorry: here's the Lorem ipsumed code:
//I have no idea what javascript i should be using.
* {
margin: 0;
padding: 0;
min-height: 15px;
}
.page {
height: 100vh;
position: relative;
}
.page-title {
font-family: 'Quattrocento Sans';
font-size: 2.5em;
transform: translateY(100%);
margin-left: 50px;
margin-right: 50px;
}
.page-sub {
font-family: 'Coming Soon';
font-size: 1.5em;
text-align: center;
margin: 50px;
}
.page-para {
font-family: 'Quattrocento Sans';
font-size: 1.2em;
line-height: 1.5;
margin-top: 50px;
margin-bottom: 50px;
margin-right: 50px;
margin-left: 50%;
position: relative;
}
.page-link {
text-decoration: none;
color: #F0C808;
}
.page-link:hover {
color: #F0C808;
font-weight: bold;
}
.link-box {
color: #F0C808;
background-color: #07A0C3;
border: 1px solid #07A0C3;
font-family: 'Coming Soon';
font-size: 1.5em;
text-align: center;
height: 3em;
width: 8em;
line-height: 3em;
bottom: 100px;
right: 150px;
position: absolute;
}
#page-one {
background: url('img/page-one.jpg') no-repeat fixed;
background-size: 100%;
}
.main-title {
font-family: 'Quattrocento Sans';
font-size: 3em;
text-align: center;
padding: auto;
align-items: center;
width: 35%;
margin-left: auto;
margin-right: auto;
position: relative;
top: 50%;
transform: translateY(-100%);
}
#page-two {
background: url(img/page-two.png) no-repeat;
background-size: 100%;
background-color: #E2E2E2;
}
#page-three {
background: url(img/page-three.jpg) no-repeat fixed;
background-size: 100%;
}
#page-four {
background: url(img/page-four.jpg) no-repeat;
background-size: 100%;
background-color: #E2E2E2;
}
#page-five {
background: url(img/page-five.jpg) no-repeat fixed;
background-size: 100%;
}
.page-five-para {
margin: 0;
}
.page-five-bold {
font-family: 'Coming Soon';
font-size: 1.2em;
margin: 0;
}
#footer {
background-color: #E2E2E2;
}
.foot {
margin: 0;
display: inline-block;
vertical-align: top;
width: 33%;
height: 50vh;
}
h5 {
font-family: 'Coming Soon';
font-size: 1.5em;
margin: 15px;
padding-left: 15px;
}
.right-foot-spacer {
height: 2.41em;
margin: 15px;
padding-left: 15px;
}
.foot-content {
font-family: 'Quattrocento Sans';
font-size: 1.2em;
margin: 20px;
}
.foot-list {
list-style: none;
}
.foot-link {
color: black;
text-decoration: none;
}
blockquote {
margin: 0px;
margin-bottom: 15px;
}
.right-footer p {
text-align: right;
}
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Quattrocento+Sans|Coming+Soon' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="page" id="page-one">
<h1 class="main-title">Title</h1>
</div>
<div class="page" id="page-two">
<h2 class="page-title">Page two title</h2>
<h4 class="page-sub">subtitle</h4>
<p class="page-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis
metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.</p>
</div>
<div class="page" id="page-three">
<h2 class="page-title">Page three title</h2>
<h4 class="page-sub">subtitle</h4>
<p class="page-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis
metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.</p>
<a href="http://www.google.com" class="page-link">
<div class="link-box">Link</div>
</a>
</div>
<div class="page" id="page-four">
<h2 class="page-title">Page title</h2>
<h4 class="page-sub">subtitle</h4>
<p class="page-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis
metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.</p>
<a href="http://www.bing.com" class="page-link">
<div class="link-box">Link</div>
</a>
</div>
<div class="page page-five" id="page-five">
<h2 class="page-title">Page title</h2>
<h4 class="page-sub">Lorem ipsum dolor</h4>
<div class="page-para">
<p class="page-five-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida.</p>
<h6 class="page-five-bold">Lorem ipsum dolor</h6>
<p class="page-five-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div id="footer">
<div class="foot left-footer">
<h5>Lorem Ipsum</h5>
<p class="foot-content email">someone#example.com</p>
</div>
<div class="foot center-footer">
<h5>Footer</h5>
<ul class="foot-content">
<li class="foot-list">Google
</li>
<li class="foot-list">Bing
</li>
<li class="foot-list">Yahoo
</li>
</ul>
</div>
<div class="foot right-footer">
<div class="right-foot-spacer"></div>
<div class="foot-content quote">
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
<p>-Lorem Ipsum</p>
</div>
</div>
</div>
</body>
</html>
If I've understood your question correctly, one way to achieve the effect you are looking for is by monitoring the getBoundingClientRect().top property of the final <div> and the getBoundingClientRect().bottom property of the penultimate <div>.
When the getBoundingClientRect().top property of the final <div> hits the top of the viewport, you can change the element's style rules to fix it in that position;
When the getBoundingClientRect().bottom property of the penultimate <div> comes back into view at the top of the viewport, you can unfix the final <div> so that it starts scrolling as normal again.
Example:
function fixPage5() {
var footer = document.getElementsByTagName('footer')[0];
var pages = document.getElementsByClassName('page');
if (pages[(pages.length - 1)].getBoundingClientRect().top < 1) {
pages[(pages.length - 1)].classList.add('fixed');
footer.style.marginTop = '424px';
}
if (pages[(pages.length - 2)].getBoundingClientRect().bottom > -1) {
footer.style.marginTop = '0';
pages[(pages.length - 1)].classList.remove('fixed');
}
}
window.addEventListener('scroll',fixPage5,false);
body {
margin: 0;
padding: 0;
}
.page {
position: relative;
width: 100%;
height: 400px;
padding: 12px;
font-size: 72px;
}
footer {
position: relative;
width: 100%;
z-index: 12;
height: 400px;
font-size: 72px;
color: rgb(255,255,255);
background-color: rgb(31,31,31);
}
.page:nth-of-type(odd) {
color: rgb(255,255,255);
background-color: rgb(127,127,127);
}
.fixed {
position: fixed;
top: 0;
left: 0;
z-index: -12;
}
<div class="page">Page One</div>
<div class="page">Page Two</div>
<div class="page">Page Three</div>
<div class="page">Page Four</div>
<div class="page">Page Five</div>
<footer>Footer</footer>

Overlap 2 paragraphs responsively

For a project I would like some paragraphs to transition from one text content to another. The method I would like to use is to have two paragraphs in my HTML, but only one is visible at a time.
I have the transition working fine, but I can't find a way to overlap the two paragraphs in a responsive way. Anybody know how to make this work?
Here's what I have so far (all I'm missing is the responsive paragraph overlap):
var a = document.getElementById("switch");
a.onclick = function() {
document.getElementById("container").classList.toggle("show1");
document.getElementById("container").classList.toggle("show2");
return false;
}
#container {
border: 1px solid red;
}
.text1,
.text2 {
transition: opacity 1s ease;
opacity: 0;
border: 1px solid blue;
}
.show1 > .text1,
.show2 > .text2 {
opacity: 1;
}
<div id="container" class="show1">
<p class="text1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel ipsum dolor. Nulla vitae laoreet turpis.
</p>
<p class="text2">
Proin feugiat ex est, a sollicitudin felis tincidunt at. Fusce quis quam ut nisl feugiat fermentum blandit non metus.
</p>
</div>
<a id="switch" href="#">Switch paragraph</a>
If this is just a bad way to do it then please let me know.
The reason I want this to be responsive and not rely on absolute positioning or margins of -104px is because I would like to use this method on other things than paragraphs (buttons, navbars, etc.) as well, not just because I want it to look good on a smaller screen (even though I do want it to look good on a smaller screen!) :)
This is the best I can do that would fit your description. We're lacking too many constrains here to display the overlay paragraph correctly in all cases...
var a = document.getElementById("switch");
a.onclick = function() {
document.getElementById("container").classList.toggle("show1");
document.getElementById("container").classList.toggle("show2");
return false;
}
#container {
border: 1px solid red;
position: relative;
}
.text1,
.text2 {
transition: opacity 1s ease;
opacity: 0;
border: 1px solid blue;
}
.show1 > .text1,
.show2 > .text2 {
opacity: 1;
}
.show1 > .text2,
.show2 > .text1{
position: absolute;
top: 0;
left: 0;
right: 0;
}
<div id="container" class="show1">
<p class="text1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel ipsum dolor. Nulla vitae laoreet turpis.
</p>
<p class="text2">
Proin feugiat ex est, a sollicitudin felis tincidunt at. Fusce quis quam ut nisl feugiat fermentum blandit non metus.
</p>
</div>
<a id="switch" href="#">Switch paragraph</a>
Even though paragraphs hide with opacity: 0 their size is still calculated by your browser. You need to make them both overlap each other.
To do so you need to combine display: none/block with the opacity.
Here is an example:
http://jsfiddle.net/xctLmLae/1/
How about switching display instead of opacity:
var a = document.getElementById("switch");
a.onclick = function() {
document.getElementById("container").classList.toggle("show1");
document.getElementById("container").classList.toggle("show2");
return false;
}
#container {
border: 1px solid red;
}
.text1,
.text2 {
transition: display 1s ease;
display: none;
border: 1px solid blue;
}
.show1 > .text1,
.show2 > .text2 {
display: block;
}
<div id="container" class="show1">
<p class="text1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel ipsum dolor. Nulla vitae laoreet turpis.
</p>
<p class="text2">
Proin feugiat ex est, a sollicitudin felis tincidunt at. Fusce quis quam ut nisl feugiat fermentum blandit non metus.
</p>
</div>
<a id="switch" href="#">Switch paragraph</a>

Categories

Resources