I'm using shape-outside to give a "magazine" feel to a website. Each page has a new image of a person and the text wraps around that person. Shape outside works perfectly and easy! Only issue is that I can't figure out how to make it so the text in one column (left) sets the height not the image (right).
Take this example:
https://jsfiddle.net/kvzmw0sy/22/
Or the raw code
HTML:
<div class="container">
<img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
</div>
</div>
<div class="footer">
</div>
CSS:
.image {
float: right;
max-width: 200px;
height: auto;
shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}
.footer {
width:100%;
height:50px;
border: 2px solid green
}
What I get is this:
But, what I want is this (see how the image goes behind the footer):
Essentially I want it to work like a background image.
I tried position absolute but it breaks the text wrapping. I don't think i can do this with a background image. And so the only solution I have so far is to use JS to get the height on the left and apply it to the container with an overflow:hidden which I'd really like to avoid.
the new overflow:clip applied to the container will do the job
.image {
float: right;
max-width: 200px;
height: auto;
shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}
.footer {
width: 100%;
height: 50px;
border: 2px solid green
}
/* .text{
shape-outside: url(https://www.pngjoy.com/pngl/69/1501951_stars-star-images-birthday-png-hd-png-download.png);
} */
.container {
overflow: clip;
}
<div class="container">
<img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis
quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
</div>
</div>
<div class="footer">
</div>
For better support you can rely on clip-path instead:
.image {
float: right;
max-width: 200px;
height: auto;
shape-outside: url(https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png);
}
.footer {
width: 100%;
height: 50px;
border: 2px solid green
}
.container {
clip-path: inset(0);
}
<div class="container">
<img class="image" src="https://res.cloudinary.com/dq6tqnvbh/image/upload/v1552834755/5a366dd97df550.5130252915135165055159.png">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum rhoncus orci nec iaculis. Cras tempor aliquam sem, id accumsan nibh mollis nec. Sed eget dui pulvinar, iaculis nibh vitae, molestie metus. Aliquam tortor leo, laoreet a felis
quis, ultricies dignissim mauris. Etiam quis consectetur nibh. In sodales et ex at malesuada. Phasellus et arcu eleifend, interdum ex eu, bibendum magna.
</div>
</div>
<div class="footer">
</div>
I have a transparent nav bar which on scroll is transparent. This means that if i were to scoll to a place that did not have a solid background color it would clash with other elements such as text. I would like to transtition into a different color to make it stand out more (including making the logo and a tags black) because at the moment it overlaps with text making it barely readable. How can i make it change color on scroll?
full code:
body {
font-family: 'Montserrat';
font-size: 22px;
background-color: #f1f1f1;
}
*, body{
margin: 0;
padding: 0;
}
body, html {
height: 100%;
margin: 0;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
/* ---------------------------------------------------------------------- */
/* -----------------------------Background------------------------------- */
/* ----------------------------------------------------------------------*/
/* ---------------------------------------------------------------------- */
/* -----------------------------Navigation------------------------------- */
/* ---------------------------------------------------------------------- */
/* Make the header */
.header{
height: 80px;
background: transparent;
padding: 0 20px;
color: #000000;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
}
/* Set the logo */
.logo{
line-height: 80px;
float: left;
position: fixed;
top: 0;
z-index: 1030;
color: #fff;
}
/* Set the clickable nav to the right */
.menu{
float: right;
line-height: 80px;
position: fixed;
right: 0;
top: 0;
z-index: 1030;
font-size: 20px;
}
/* Transition and color of attribute tags */
.menu a{
color: #fff;
text-decoration: none;
padding: 0 20px;
transition: 0.4s;
}
/* Set color for hover */
menu a:hover {
text-decoration: underline;
}
.show-menu-btn,.hide-menu-btn{
transition: 0.4s;
font-size: 30px;
cursor: pointer;
display: none;
color: #fff;
}
.show-menu-btn{
float: right;
}
.show-menu-btn i{
line-height: 100px;
}
.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover {
color: #AEC6CF;
}
#chk{
position: absolute;
visibility: hidden;
z-index: -1111;
}
/* ---------------------------------------------------------------------- */
/* --------------------------Responsive-Menu---------------------------- */
/* ---------------------------------------------------------------------- */
#media screen and (max-width:900px) {
.show-menu-btn,.hide-menu-btn{
display: block;
}
.menu{
position: fixed;
width: 100%;
height: 100vh;
background: #f1f1f1;
right: -100%;
top: 0;
text-align: center;
padding: 80px 0;
line-height: normal;
transition: 0.7s;
}
.menu a{
display: block;
padding: 20px;
color: black;
}
.hide-menu-btn{
position: absolute;
top: 40px;
right: 40px;
}
#chk:checked ~ .menu{
right: 0;
}
.header {
height: 90px;
}
.logo {
line-height: 90px;
}
.menu ul a {
line-height: 90px;
}
.show-menu-btn i, .hide-menu-btn i{
line-height: 90px;
}
.hide-menu-btn {
color: #000000;
}
}
/* ---------------------------------------------------------------------- */
/* ------------------------------Sections-------------------------------- */
/* ---------------------------------------------------------------------- */
/* Section for text */
.main {
text-align: center;
padding: 20px;
margin-top: 20px;
}
/* Make text smaller and centered on desktop screen */
.main p {
margin-top: 10px;
font-size: 18px;
padding-left: 100px;
padding-right: 100px;
}
/* Header Underline */
hr {
width: 230px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
color: #AEC6CF
}
/* Make text larger and on the left for mobile */
#media screen and (max-width:800px) {
.main p {
font-size: 20px;
padding-left: 20px;
padding-right: 20px;
text-align: left;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='style.css'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<meta charset="utf-8"/>
</head>
<body>
<div class="bg" id='home'></div>
<div class="header" id='pronav'>
<div class='logo' id='logo'>
<p style='font-size:35px;'>lunAr-creator</p>
</div>
<input type="checkbox" id="chk">
<label for="chk" class="show-menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul class="menu" id='navbar'>
Home
About
Projects
Useful Links
Contact
<label for="chk" class="hide-menu-btn">
<i class="fas fa-times"></i>
</label>
</ul>
</div>
<div class="main" id="about">
<h2 style='margin-top: 90px;'>About Me</h2>
<hr/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.
</p>
</div>
<div class="main" id="projects">
<h2>Projects</h2>
<hr/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.
</p>
</div>
</body>
</html>
You can target the parent element of the header and nav prenav and set the background color to change using a transition when the window.pageYOffset hits a certain threshold in a scroll event listener. Use another conditional to change it back if you scroll up to the fold again...
If you want to change the color of the font instead of the background-color change the el.style.backgroundColor to el.style.color and the transition from logo.style.transition = 'background .5s ease-out' to logo.style.transition = 'color .5s ease-out'.
const logo = document.querySelector('#pronav')
const getOffset = () => {
if(window.pageYOffset > 100){
logo.style.backgroundColor = 'rgba(0,0,0,0.7)'
logo.style.transition = 'background .5s ease-out'
logo.style.boxShadow = '0px 1px 4px black'
}
if(window.pageYOffset < 100){
logo.style.backgroundColor = 'rgba(0,0,0,0)'
logo.style.transition = 'background .5s ease-out'
logo.style.boxShadow = 'none'
}
}
window.addEventListener('scroll', getOffset)
body {
font-family: 'Montserrat';
font-size: 22px;
background-color: #f1f1f1;
}
*, body{
margin: 0;
padding: 0;
}
body, html {
height: 100%;
margin: 0;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
/* ---------------------------------------------------------------------- */
/* -----------------------------Background------------------------------- */
/* ----------------------------------------------------------------------*/
/* ---------------------------------------------------------------------- */
/* -----------------------------Navigation------------------------------- */
/* ---------------------------------------------------------------------- */
/* Make the header */
.header{
height: 80px;
background: transparent;
padding: 0 20px;
color: #000000;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
}
/* Set the logo */
.logo{
line-height: 80px;
float: left;
position: fixed;
top: 0;
z-index: 1030;
color: #fff;
}
.pronav {
background-color: rgba(0,0,0,0.7);
transition: background .5s ease-out;
box-shadow: 1px 0px 4px black;
}
/* Set the clickable nav to the right */
.menu{
float: right;
line-height: 80px;
position: fixed;
right: 0;
top: 0;
z-index: 1030;
font-size: 20px;
}
/* Transition and color of attribute tags */
.menu a{
color: #fff;
text-decoration: none;
padding: 0 20px;
transition: 0.4s;
}
/* Set color for hover */
menu a:hover {
text-decoration: underline;
}
.show-menu-btn,.hide-menu-btn{
transition: 0.4s;
font-size: 30px;
cursor: pointer;
display: none;
color: #fff;
}
.show-menu-btn{
float: right;
}
.show-menu-btn i{
line-height: 100px;
}
.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover {
color: #AEC6CF;
}
#chk{
position: absolute;
visibility: hidden;
z-index: -1111;
}
/* ---------------------------------------------------------------------- */
/* --------------------------Responsive-Menu---------------------------- */
/* ---------------------------------------------------------------------- */
#media screen and (max-width:900px) {
.show-menu-btn,.hide-menu-btn{
display: block;
}
.menu{
position: fixed;
width: 100%;
height: 100vh;
background: #f1f1f1;
right: -100%;
top: 0;
text-align: center;
padding: 80px 0;
line-height: normal;
transition: 0.7s;
}
.menu a{
display: block;
padding: 20px;
color: black;
}
.hide-menu-btn{
position: absolute;
top: 40px;
right: 40px;
}
#chk:checked ~ .menu{
right: 0;
}
.header {
height: 90px;
}
.logo {
line-height: 90px;
}
.menu ul a {
line-height: 90px;
}
.show-menu-btn i, .hide-menu-btn i{
line-height: 90px;
}
.hide-menu-btn {
color: #000000;
}
}
/* ---------------------------------------------------------------------- */
/* ------------------------------Sections-------------------------------- */
/* ---------------------------------------------------------------------- */
/* Section for text */
.main {
text-align: center;
padding: 20px;
margin-top: 20px;
}
/* Make text smaller and centered on desktop screen */
.main p {
margin-top: 10px;
font-size: 18px;
padding-left: 100px;
padding-right: 100px;
}
/* Header Underline */
hr {
width: 230px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
color: #AEC6CF
}
/* Make text larger and on the left for mobile */
#media screen and (max-width:800px) {
.main p {
font-size: 20px;
padding-left: 20px;
padding-right: 20px;
text-align: left;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='style.css'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<meta charset="utf-8"/>
</head>
<body>
<div class="bg" id='home'></div>
<div class="header" id='pronav'>
<div class='logo' id='logo'>
<p style='font-size:35px; '>lunAr-creator</p>
</div>
<input type="checkbox" id="chk">
<label for="chk" class="show-menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul class="menu" id='navbar'>
Home
About
Projects
Useful Links
Contact
<label for="chk" class="hide-menu-btn">
<i class="fas fa-times"></i>
</label>
</ul>
</div>
<div class="main" id="about">
<h2 style='margin-top: 90px;'>About Me</h2>
<hr/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.
</p>
</div>
<div class="main" id="projects">
<h2>Projects</h2>
<hr/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.
</p>
</div>
</body>
</html>
I currently have a paragraph tag in html that has long text inside of it. I also have a button that when clicked should expand and retract the section of text. This is used because the text is too long so I am adding a "Read More" button to expand and show the full text. Right now I am unable to get the paragraph to expand. Instead when the button is clicked it fades into the background and never show.
HTML
<div class="infos">
<p class="name">Mr Big</p>
<br>
<p class="job">Founder & Co-Owner</p>
<p class="read-more"> Lorem IPsum Lorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem long text...</p>
</div>
<div class="button_container">
<button class="btn2">
<span>Read more...</span>
</button>
</div>
CSS
.infos .read-more{
font-size: 15px;
font-weight: 500;
color: rgb(230, 241, 255);
font-style: italic;
line-height: 1.5;
position: relative;
width: 100%;
text-align: center;
margin: 0 auto; padding: 15px 10px;
overflow: hidden;
max-height: 170px;
/* "transparent" only works here because == rgba(0,0,0,0) */
background-image: linear-gradient(to top, transparent, #434343);
}
.btn2 {
border: none;
display: block;
text-align: center;
cursor: pointer;
text-transform: uppercase;
outline: none;
overflow: hidden;
position: absolute;
color: #fff;
font-weight: 700;
font-size: 10px;
background-color: #59646c;
padding: 10px 30px;
margin: 0 auto;
box-shadow: 0 5px 15px rgba(0,0,0,0.20);
border-radius: 25px;
}
.btn2 span {
position: relative;
z-index: 1;
}
.button_container {
position: relative;
left: 0;
right: 0;
top: 30%;
}
.description, .link {
text-align: center;
}
.btn2:after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 490%;
width: 140%;
background: #78c7d2;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
transform: translateX(-98%) translateY(-25%) rotate(45deg);
}
.btn2:hover:after {
-webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
transform: translateX(-9%) translateY(-25%) rotate(45deg);
}
jQuery
let $el, $ps, $up, totalHeight;
$(".btn2").click(function() {
totalHeight = 0;
$el = $(this);
$p = $el.parent();
$up = $p.parent();
$ps = $up.find("p:not('.read-more')");
// measure how tall inside should be by adding together heights of all inside paragraphs (except read-more paragraph)
$ps.each(function() {
totalHeight += $(this).outerHeight();
});
$up
.css({
// Set height to prevent instant jumpdown when max height is removed
"height": $up.height(),
"max-height": 9999
})
.animate({
"height": totalHeight
});
// fade out read-more
$p.fadeOut();
// prevent jump-down
return false;
});
Consider the following code example.
$(function() {
$(".btn2").click(function(e) {
var self = $(this);
var par = self.parent();
var target = par.prev(".infos").find(".read-more");
self.fadeOut("fast", function() {
target.animate({
height: target[0].scrollHeight
}, 600);
});
});
});
.infos .read-more {
font-size: 15px;
font-weight: 500;
color: rgb(230, 241, 255);
font-style: italic;
line-height: 1.5;
position: relative;
width: 100%;
text-align: center;
margin: 0 auto;
padding: 15px 10px;
overflow: hidden;
height: 170px;
/* "transparent" only works here because == rgba(0,0,0,0) */
background-image: linear-gradient(to top, transparent, #434343);
text-overflow: ellipsis;
}
.btn2 {
border: none;
display: block;
text-align: center;
cursor: pointer;
text-transform: uppercase;
outline: none;
overflow: hidden;
position: absolute;
color: #fff;
font-weight: 700;
font-size: 10px;
background-color: #59646c;
padding: 10px 30px;
margin: 0 auto;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.20);
border-radius: 25px;
}
.btn2 span {
position: relative;
z-index: 1;
}
.button_container {
position: relative;
left: 0;
right: 0;
top: 30%;
}
.description,
.link {
text-align: center;
}
.btn2:after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 490%;
width: 140%;
background: #78c7d2;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
transform: translateX(-98%) translateY(-25%) rotate(45deg);
}
.btn2:hover:after {
-webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
transform: translateX(-9%) translateY(-25%) rotate(45deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="infos">
<p class="name">Mr Big</p>
<br>
<p class="job">Founder & Co-Owner</p>
<div class="read-more">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt eget nullam non nisi est sit amet facilisis. Vitae purus faucibus ornare suspendisse sed nisi lacus. Ornare arcu
odio ut sem nulla pharetra diam sit. Amet dictum sit amet justo donec enim diam vulputate. Lectus magna fringilla urna porttitor rhoncus dolor purus non. Eget gravida cum sociis natoque penatibus. Aliquam sem et tortor consequat id porta nibh. Et
netus et malesuada fames ac. Velit aliquet sagittis id consectetur purus ut.</p>
<p>Arcu risus quis varius quam quisque. Faucibus purus in massa tempor nec. Sed vulputate mi sit amet mauris commodo quis. Lorem sed risus ultricies tristique. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Et ligula ullamcorper malesuada
proin libero nunc. Facilisis gravida neque convallis a. Facilisis magna etiam tempor orci eu lobortis elementum nibh. Amet est placerat in egestas. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Porta lorem mollis aliquam ut
porttitor leo a. Semper risus in hendrerit gravida rutrum quisque. Leo integer malesuada nunc vel risus commodo viverra maecenas. Arcu non odio euismod lacinia at quis risus sed vulputate. Donec et odio pellentesque diam volutpat commodo sed. Aliquam
malesuada bibendum arcu vitae elementum curabitur vitae. Ut etiam sit amet nisl purus in. Massa enim nec dui nunc mattis enim ut. Donec ac odio tempor orci.</p>
<p>Massa ultricies mi quis hendrerit dolor magna eget est. Augue interdum velit euismod in pellentesque massa placerat. Vel pharetra vel turpis nunc. Id faucibus nisl tincidunt eget nullam non. Id ornare arcu odio ut sem nulla. Tortor id aliquet lectus
proin nibh nisl condimentum id. Id semper risus in hendrerit gravida rutrum quisque. Dapibus ultrices in iaculis nunc sed augue lacus. Quis ipsum suspendisse ultrices gravida dictum. Ornare aenean euismod elementum nisi quis. Rhoncus mattis rhoncus
urna neque viverra justo nec ultrices dui. Congue quisque egestas diam in arcu. Orci phasellus egestas tellus rutrum tellus. Nisl suscipit adipiscing bibendum est ultricies integer. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices.
Elit at imperdiet dui accumsan sit amet. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Faucibus in ornare quam viverra.</p>
<p>Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Non consectetur a erat nam at lectus urna duis. Facilisi cras fermentum odio eu feugiat pretium nibh. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Vel orci porta
non pulvinar neque laoreet. Et odio pellentesque diam volutpat commodo sed egestas egestas. Adipiscing enim eu turpis egestas pretium. Nulla pellentesque dignissim enim sit amet venenatis urna. Porta non pulvinar neque laoreet suspendisse. Quam
nulla porttitor massa id neque aliquam vestibulum morbi blandit. Duis ut diam quam nulla porttitor massa. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Fringilla urna porttitor rhoncus dolor purus non enim. Blandit turpis cursus
in hac habitasse. Sed blandit libero volutpat sed. Mattis pellentesque id nibh tortor id aliquet lectus proin nibh.</p>
<p>Sed risus pretium quam vulputate dignissim suspendisse in est ante. Urna cursus eget nunc scelerisque viverra mauris. Tincidunt eget nullam non nisi. Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla. Nulla facilisi nullam
vehicula ipsum a arcu cursus. Risus nec feugiat in fermentum posuere. Lobortis feugiat vivamus at augue eget arcu. Eget est lorem ipsum dolor. Fames ac turpis egestas sed tempus urna. Phasellus vestibulum lorem sed risus ultricies tristique. Erat
nam at lectus urna duis convallis convallis tellus id. Non odio euismod lacinia at quis risus sed vulputate odio. Nisl nunc mi ipsum faucibus.</p>
</div>
</div>
<div class="button_container">
<button class="btn2">
<span>Read more...</span>
</button>
</div>
You can use .animate() to animate changes with CSS. For this script, it would be best then set the height to meet that of the entire text. The scrollHeight property of the element gives us this the number of pixels that is equal to the full height of the box even though we have no overflow and the height is already set.
I use the callback option in .fadeOut() to ensure that the fade animation completes before we start a new animation to reveal the text.
I also found this article if you want to fiddle with ellipse like styling: http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/
Update
$(function() {
$(".btn2").click(function(e) {
var self = $(this);
var par = self.parent();
var target = par.prev(".infos").find(".read-more");
if (self.data("action") == undefined) {
self.data({
action: "more",
height: target.css("height").slice(0,-2)
});
}
if (self.data("action") == "more") {
console.log("Expand to " + target[0].scrollHeight);
target.animate({
height: target[0].scrollHeight
}, 600);
self.text("Read Less...");
self.data("action", "less");
} else {
console.log("Shrink to " + self.data("height"));
target.animate({
height: self.data("height")
}, 600);
self.text("Read More...");
self.data("action", "more");
}
});
});
.infos .read-more {
font-size: 15px;
font-weight: 500;
color: rgb(230, 241, 255);
font-style: italic;
line-height: 1.5;
position: relative;
width: 100%;
text-align: center;
margin: 0 auto;
padding: 15px 10px;
overflow: hidden;
height: 170px;
/* "transparent" only works here because == rgba(0,0,0,0) */
background-image: linear-gradient(to top, transparent, #434343);
text-overflow: ellipsis;
}
.btn2 {
border: none;
display: block;
text-align: center;
cursor: pointer;
text-transform: uppercase;
outline: none;
overflow: hidden;
position: absolute;
color: #fff;
font-weight: 700;
font-size: 10px;
background-color: #59646c;
padding: 10px 30px;
margin: 0 auto;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.20);
border-radius: 25px;
}
.btn2 span {
position: relative;
z-index: 1;
}
.button_container {
position: relative;
left: 0;
right: 0;
top: 30%;
}
.description,
.link {
text-align: center;
}
.btn2:after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 490%;
width: 140%;
background: #78c7d2;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
transform: translateX(-98%) translateY(-25%) rotate(45deg);
}
.btn2:hover:after {
-webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
transform: translateX(-9%) translateY(-25%) rotate(45deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="infos">
<p class="name">Mr Big</p>
<br>
<p class="job">Founder & Co-Owner</p>
<div class="read-more">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt eget nullam non nisi est sit amet facilisis. Vitae purus faucibus ornare suspendisse sed nisi lacus. Ornare arcu
odio ut sem nulla pharetra diam sit. Amet dictum sit amet justo donec enim diam vulputate. Lectus magna fringilla urna porttitor rhoncus dolor purus non. Eget gravida cum sociis natoque penatibus. Aliquam sem et tortor consequat id porta nibh. Et
netus et malesuada fames ac. Velit aliquet sagittis id consectetur purus ut.</p>
<p>Arcu risus quis varius quam quisque. Faucibus purus in massa tempor nec. Sed vulputate mi sit amet mauris commodo quis. Lorem sed risus ultricies tristique. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Et ligula ullamcorper malesuada
proin libero nunc. Facilisis gravida neque convallis a. Facilisis magna etiam tempor orci eu lobortis elementum nibh. Amet est placerat in egestas. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Porta lorem mollis aliquam ut
porttitor leo a. Semper risus in hendrerit gravida rutrum quisque. Leo integer malesuada nunc vel risus commodo viverra maecenas. Arcu non odio euismod lacinia at quis risus sed vulputate. Donec et odio pellentesque diam volutpat commodo sed. Aliquam
malesuada bibendum arcu vitae elementum curabitur vitae. Ut etiam sit amet nisl purus in. Massa enim nec dui nunc mattis enim ut. Donec ac odio tempor orci.</p>
<p>Massa ultricies mi quis hendrerit dolor magna eget est. Augue interdum velit euismod in pellentesque massa placerat. Vel pharetra vel turpis nunc. Id faucibus nisl tincidunt eget nullam non. Id ornare arcu odio ut sem nulla. Tortor id aliquet lectus
proin nibh nisl condimentum id. Id semper risus in hendrerit gravida rutrum quisque. Dapibus ultrices in iaculis nunc sed augue lacus. Quis ipsum suspendisse ultrices gravida dictum. Ornare aenean euismod elementum nisi quis. Rhoncus mattis rhoncus
urna neque viverra justo nec ultrices dui. Congue quisque egestas diam in arcu. Orci phasellus egestas tellus rutrum tellus. Nisl suscipit adipiscing bibendum est ultricies integer. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices.
Elit at imperdiet dui accumsan sit amet. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Faucibus in ornare quam viverra.</p>
<p>Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Non consectetur a erat nam at lectus urna duis. Facilisi cras fermentum odio eu feugiat pretium nibh. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Vel orci porta
non pulvinar neque laoreet. Et odio pellentesque diam volutpat commodo sed egestas egestas. Adipiscing enim eu turpis egestas pretium. Nulla pellentesque dignissim enim sit amet venenatis urna. Porta non pulvinar neque laoreet suspendisse. Quam
nulla porttitor massa id neque aliquam vestibulum morbi blandit. Duis ut diam quam nulla porttitor massa. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Fringilla urna porttitor rhoncus dolor purus non enim. Blandit turpis cursus
in hac habitasse. Sed blandit libero volutpat sed. Mattis pellentesque id nibh tortor id aliquet lectus proin nibh.</p>
<p>Sed risus pretium quam vulputate dignissim suspendisse in est ante. Urna cursus eget nunc scelerisque viverra mauris. Tincidunt eget nullam non nisi. Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla. Nulla facilisi nullam
vehicula ipsum a arcu cursus. Risus nec feugiat in fermentum posuere. Lobortis feugiat vivamus at augue eget arcu. Eget est lorem ipsum dolor. Fames ac turpis egestas sed tempus urna. Phasellus vestibulum lorem sed risus ultricies tristique. Erat
nam at lectus urna duis convallis convallis tellus id. Non odio euismod lacinia at quis risus sed vulputate odio. Nisl nunc mi ipsum faucibus.</p>
</div>
</div>
<div class="button_container">
<button class="btn2">
<span>Read more...</span>
</button>
</div>
Methods
.toggleClass('.more .less') Toggles .more and .less classes on each clicked button. When clicked the button text changes accordingly:
button.read.more Read More...
button.read.less Read Less...
.animate({height: "toggle", opacity: "toggle"}) When a button is clicked the paragraph (p.extra) that follows said button will slide up/down and fade in/out.
Demo
Note: Details commented in demo
/*
Delegate click event to all button.read
Toggle the .more and .less classes on the clicked button.read
The p.extra that follows the clicked button.read will slide up/down and fade in/out
*/
$('.read').on('click', function() {
$(this).toggleClass('more less').next('.extra').animate({
height: "toggle",
opacity: "toggle"
});
return false;
});
:root,
body {
font: 500 3vw/1.45 Verdana;
background: #fff;
}
button.read {
font: inherit;
width: 16ch;
cursor: pointer;
}
button.read.more::after {
content: ' More...'
}
button.read.less::after {
content: ' Less...'
}
p.extra {
display: none
}
<article>
<h3>Mr. Big</h3>
<p>Founder & Co-Owner</p>
<button class='read more'>Read</button>
<p class="extra"> Lorem IPsum Lorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem long text...</p>
</article>
<hr>
<article>
<h3>Mr. Small</h3>
<p>Founder & Co-Owner</p>
<button class='read more'>Read</button>
<p class="extra"> Lorem IPsum Lorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem long text...</p>
</article>
<hr>
<article>
<h3>Ms. Big</h3>
<p>Founder & Co-Owner</p>
<button class='read more'>Read</button>
<p class="extra"> Lorem IPsum Lorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem long text...</p>
</article>
<hr>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
My goal is given 2 divs, one with tagged content, generate new content in the other div that is vertically aligned with the first. A minimal example of what I've got so far is below in the snippet.
I've tried doing adjustments like subtracting $('sidebar').offset().top and/or the height of the header from the new element's top-side offset (thinking that maybe the new element was offsetting from the top of the sidebar instead of the document for some reason), but that still doesn't put it in the right place.
I think the hurdle here is figuring out why tag_offset.top and test_tip.offset().top aren't equal at the end, even though that's explicitly being assigned when test_tip is instantiated.
var tag_offset = $('.jt-tooltip-tag').offset();
tag_offset['left'] = 0;
var tag_text = $('.jt-tooltip-text').text();
var test_tip = $('<div class="jt-sidebar-tip">').text(tag_text).offset(tag_offset).appendTo('#jt-tooltip-sidebar');
.middlebar {
width: 49%;
float: left;
}
.sidebar {
height: 500px;
width: 49%;
float: right;
border: 1px solid purple;
}
.jt-tooltip-tag {
font-weight: bold;
background-color: #14c9c9;
}
.jt-tooltip-text {
display: none;
}
.jt-sidebar-tip {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
<h1 class="header">
Omigosh a header!
</h1>
<div class="content">
<div class="middlebar">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec tortor justo. Donec magna neque, interdum eu diam ut, efficitur pharetra ligula. Aenean libero justo, feugiat a est a, hendrerit cursus justo. Donec vehicula ligula ut diam bibendum, vel
convallis purus blandit. Nulla <span class="jt-tooltip"><span class="jt-tooltip-tag">facilisi.</span><span class="jt-tooltip-text">This should be vertically-aligned with facilisi.</span></span> Donec pretium, leo at commodo dignissim, eros
ligula vulputate sem, quis iaculis turpis est ac erat. Ut ultrices mauris efficitur tellus gravida convallis vitae ac magna. Nullam vel enim ut eros tempor dictum et quis risus. Aliquam finibus sed justo eu porttitor.
</div>
<div class="sidebar" id="jt-tooltip-sidebar">
</div>
</div>
</div>
In order to position an element relative to the document, you need to set its CSS to position: absolute;. But then you also need to set its left offset to a position that puts it into its container. I've done this by copying $("#jt-tooltip-sidebar").offset().left.
var tag_offset = $('.jt-tooltip-tag').offset();
tag_offset.left = $("#jt-tooltip-sidebar").offset().left;
var tag_text = $('.jt-tooltip-text').text();
var test_tip = $('<div class="jt-sidebar-tip">').text(tag_text).offset(tag_offset).appendTo('#jt-tooltip-sidebar');
.middlebar {
width: 49%;
float: left;
}
.sidebar {
height: 500px;
width: 49%;
float: right;
border: 1px solid purple;
}
.jt-tooltip-tag {
font-weight: bold;
background-color: #14c9c9;
}
.jt-tooltip-text {
display: none;
}
.jt-sidebar-tip {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
<h1 class="header">
Omigosh a header!
</h1>
<div class="content">
<div class="middlebar">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec tortor justo. Donec magna neque, interdum eu diam ut, efficitur pharetra ligula. Aenean libero justo, feugiat a est a, hendrerit cursus justo. Donec vehicula ligula ut diam bibendum, vel
convallis purus blandit. Nulla <span class="jt-tooltip"><span class="jt-tooltip-tag">facilisi.</span><span class="jt-tooltip-text">This should be vertically-aligned with facilisi.</span></span> Donec pretium, leo at commodo dignissim, eros
ligula vulputate sem, quis iaculis turpis est ac erat. Ut ultrices mauris efficitur tellus gravida convallis vitae ac magna. Nullam vel enim ut eros tempor dictum et quis risus. Aliquam finibus sed justo eu porttitor.
</div>
<div class="sidebar" id="jt-tooltip-sidebar">
</div>
</div>
</div>
I have a page with up and down arrows that are links that float on the left. I want them to navigate between div's on the page as a scrolling anchor links. Here is what I have so far.....I know the jquery is far from complete but I think im going in the right direction. Any help would be great.
JSFIDDLE: http://jsfiddle.net/t8uaQ/
HTML:
<ul id="et-float-menu">
<li class="et-float-menu-item1">
<span><img></span>
</li>
<li class="et-float-menu-item2">
<span><img></span>
</li>
</ul>
<div class="jumptosection" id="section1">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>
<p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>
<div class="jumptosection" id="section2">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>
<p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>
<div class="jumptosection" id="section3">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>
<p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>
<div class="jumptosection" id="section4">
<h2>Section 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>
<p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>
MY CSS:
#section1 {
padding:20px;
margin:10px;
background-color:#f8f8f8;
}
#section2 {
padding:20px;
margin:10px;
background-color:#e8e8e8;
}
#section3 {
padding:20px;
margin:10px;
background-color:#f8f8f8;
}
#section4 {
padding:20px;
margin:10px;
background-color:#e8e8e8;
}
#et-float-menu {
position: fixed;
z-index: 11;
left: 0;
top: 45%;
background-color: #000;
padding: 20px 10px 10px 15px;
margin: 0;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
#et-float-menu a {
padding: 0;
clear: both;
float: left;
margin-bottom: 10px;
color: #fff;
}
#et-float-menu a:hover { color: #b2b2b2; transition: color 300ms ease 0s; }
#et-float-menu li {
display: block;
margin-left: 0;
}
.et-float-menu-item a { display: inline-block; font-size: 24px; position: relative; text-align: center; transition: color 300ms ease 0s; color: #fff; text-decoration: none; }
.et-float-menu-item a:hover { color: #a0a0a0; }
.et-social-icon span { display: none; }
.et-float-menu-item1 a:before { content: '↑';font-size:22px; }
.et-float-menu-item2 a:before { content: '↓';font-size:22px; }
JQUERY:
jQuery(document).ready(function(){
var jumptosectionTopPosition = jQuery('.jumptosection').offset().top;
jQuery('#scroll').click(function(){
jQuery('html, body').animate({scrollTop:jumptosectionTopPosition}, 'slow');
return false;
});
});
Change hrefs of your <a> to scrollUp and scrollDown correspondingly.
Stick to some .selected class, which will be used for identifying current selected section.
Add this class to the first section in html.
Add a function that will perform selection: by adding .selected class and scrolling to newly selected div.
function changeSelection(sectionFrom, sectionTo) {
if(sectionTo.length > 0) {
sectionFrom.removeClass("selected");
sectionTo.addClass("selected");
$("body").animate({scrollTop: sectionTo.offset().top});
}
}
Attach click listeners to your anchors. Inside each of them find current selected div and div you want to be selected and call changeSelection() using these divs.
For scrollDown we want to select the next div:
$(document).on("click", "[href='#scrollDown']", function(){
var currentSection = $(".selected");
var nextSection = currentSection.next(".jumptosection");
changeSelection(currentSection, nextSection);
return false;
});
For scrollUp we want to select the previous div:
$(document).on("click", "[href='#scrollUp']", function(){
var currentSection = $(".selected");
var prevSection = currentSection.prev(".jumptosection");
changeSelection(currentSection, prevSection);
return false;
});
In case you reach the end (the first or the last .jumptosection div), nothing will be changed (it is controlled by the changeSelection function - it checks do we have sectionWeWantScrollTo)
Here is the Demo
Edited (for http://94co.com/client3/about/)
See this answer about WordPress and jQuery. Use jQuery instead of
$ in your script
It is better to use id instead of href on anchor
Make sure you wrap JavaScript of click listeners in
jQuery(document).ready(function(){
/*scrollUp and scrollDown click listeners should be here*/
});
(JSFiddle makes this wrap automatically). changeSelection function doesn't need to be wrapped
Here is the updated Demo
You can set some initial var that let you know the start point like this:
var pre = $('.et-float-menu-item1'),
nex = $('.et-float-menu-item2'),
act = $('#section1');
Where act is the start
And then evaluate prev and next elements:
nex.click(function(){
pre.slideDown();
var gt = act.next('div').offset().top;
$('body').animate({scrollTop : gt},'slow');
act = act.next('div');
})
pre.click(function(){
var gt = act.prev('div').offset().top;
$('body').animate({scrollTop : gt},'slow');
act = act.prev('div');
})
This code can be improved but is the first aproach I can give.
Check the Demo Fiddle