Smoothly scroll on click / ul li / jQuery - javascript

I'm having trouble with a "Q&A" section. Like there's 4 questions, that are links.
If you click on one, a "p" is going to slide down. an so on. But i want the page to scroll down or up to be well placed (like top) when you click on the question.
$(function() {
var $_openedFaq = null;
function openFaq($__p) {
$__p.slideDown();
}
function closeFaq($__p) {
$__p.slideUp();
}
$('.faq ul li').each(function() {
var $faq = $(this);
var $p = $(this).find('p');
$(this).find('a').click(function(e) {
e.preventDefault();
if ($_openedFaq != null) {
closeFaq($_openedFaq.find('p'));
$_openedFaq.find('a').removeClass("open");
}
if (($_openedFaq == null) || (($_openedFaq != null) && !$faq.is($_openedFaq))) {
openFaq($p);
$_openedFaq = $faq;
$p.prev('a').addClass("open");
} else {
$_openedFaq = null;
}
});
});
});
.faq {
background-color: #f5f5f5;
padding-top: 65px;
padding-bottom: 65px;
}
.faq div.container div.row div.col-sm-6 h1 {
font-family: 'Source Serif Pro', serif;
text-align: center;
font-size: 60px;
margin: 0;
padding-bottom: 40px;
}
.faq div.container div.row div.col-sm-6 ul {
list-style-type: none;
padding: 0;
}
.faq div.container div.row div.col-sm-6 ul li {
font-weight: bold;
font-size: 14px;
padding: 10px 10px;
padding-top: 20px;
border-bottom: 1px solid #bfbfbf;
position: relative;
}
.faq div.container div.row div.col-sm-6 ul li:last-child {
border-bottom: none;
}
.faq div.container div.row div.col-sm-6 ul li a {
text-decoration: none;
color: #4a4a4a;
padding-right: auto;
-webkit-transition: color 0.25s linear;
-o-transition: color 0.25s linear;
transition: color 0.25s linear;
}
.faq div.container div.row div.col-sm-6 ul li a:hover {
color: black;
}
.faq div.container div.row div.col-sm-6 ul li a:hover::after {
color: black;
}
.faq div.container div.row div.col-sm-6 ul li a::after {
content: "\e008";
font-family: "road-trip-project-icons";
color: #f9b40a;
position: absolute;
top: 20px;
right: 0;
-webkit-transition: color 0.25s linear;
-o-transition: color 0.25s linear;
transition: color 0.25s linear;
}
.faq div.container div.row div.col-sm-6 ul li a.open {
color: black;
}
.faq div.container div.row div.col-sm-6 ul li a.open::after {
content: "\e007";
font-family: "road-trip-project-icons";
color: black;
position: absolute;
top: 20px;
right: 0;
}
.faq div.container div.row div.col-sm-6 ul li p {
font-weight: normal;
display: none;
}
.faq div.container div.row div.col-sm-6 img {
width: 100%;
}
.faq {
padding-top: 200px;
height: 750px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<section class="faq">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1>Q&As</h1>
<ul>
<li>
Question 1
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</li>
<li>
Question 2
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</li>
<li>
Question 3
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</li>
<li>
Question 4
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</li>
</ul>
</div>
<div class="col-sm-6">
<img src="../includes/img/faqs.jpg" alt="Are you ready ?">
</div>
</div>
</div>
</section>
So when you click on "Question 1" i want the page to scroll until she's well placed in comparaison with the question 1. Sorry for my awful english ^^
Thank you.


$(document).on('click', 'a[href^="#"]', function ( (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
href is the id of target


You can collect offset top of each element li by:
var offset = $(this).offset().top;
Then for smooth scroll use this:
$('html, body').animate({
scrollTop: offset
}, 1000);
Demo:
$(function() {
var $_openedFaq = null;
function openFaq($__p) {
$__p.slideDown();
}
function closeFaq($__p) {
$__p.slideUp();
}
$('.faq ul li').each(function() {
var $faq = $(this);
var $p = $(this).find('p');
var offset = $(this).offset().top;
$(this).find('a').click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: offset
}, 1000);
if ($_openedFaq != null) {
closeFaq($_openedFaq.find('p'));
$_openedFaq.find('a').removeClass("open");
}
if (($_openedFaq == null) || (($_openedFaq != null) && !$faq.is($_openedFaq))) {
openFaq($p);
$_openedFaq = $faq;
$p.prev('a').addClass("open");
} else {
$_openedFaq = null;
}
});
});
});
#charset "UTF-8";
#font-face {
font-family: 'Conv_Besom';
src: url("../font/Besom.eot");
src: local("☺"), url("../font/Besom.woff") format("woff"), url("../font/Besom.ttf") format("truetype"), url("../font/Besom.svg") format("svg");
font-weight: normal;
font-style: normal;
}
body {
font-family: 'Roboto', sans-serif;
letter-spacing: 1px;
font-size: 14px;
font-weight: 500;
}
section {
background-color: #f9b40a;
}
/* ################### */
/* ##### NAV BAR ##### */
/* ################### */
header {
position: fixed;
top: 0;
right: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
text-transform: uppercase;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-top: 20px;
padding-bottom: 20px;
z-index: 1000;
}
#media only screen and (max-width: 740px) {
header.navbar {
background-color: black;
}
}
header nav {
position: absolute;
top: 50%;
right: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: 40px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
header nav ul {
list-style-type: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0;
padding-left: 20px;
padding-right: 20px;
}
header nav ul+ul {
border-left: 1px solid white;
}
#media only screen and (max-width: 740px) {
header nav ul+ul {
border: none;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
header nav ul li+li {
margin-left: 25px;
}
header nav ul.menuIco li+li {
margin-left: 12px;
}
header nav ul li a {
text-decoration: none;
color: white;
-webkit-transition: color 0.25s linear;
-o-transition: color 0.25s linear;
transition: color 0.25s linear;
}
header nav ul li a:hover {
color: #f9b40a;
}
header nav ul.menuIco {
-webkit-transition: color 0.25s linear;
-o-transition: color 0.25s linear;
transition: color 0.25s linear;
}
#media only screen and (max-width: 740px) {
header nav ul.menuIco {
background-color: #f9b40a;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
}
}
header nav ul.menuIco li a:hover {
color: black;
}
#media only screen and (max-width: 740px) {
header nav {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: 0;
padding: 0;
margin-top: 128px;
width: 100%;
border-top: 0.5px solid white;
z-index: 5;
background-color: black;
}
}
#media only screen and (max-width: 740px) {
header nav ul:first-child {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0;
padding-left: 35px;
}
}
#media only screen and (max-width: 740px) {
header nav ul:first-child li {
margin: 0;
margin-top: 10px;
margin-bottom: 10px;
}
}
#media only screen and (max-width: 740px) {
header nav ul:first-child li:first-child {
margin-top: 20px;
}
}
header h1 {
margin: 0;
margin-left: 50px;
}
header h1 a {
display: block;
text-decoration: none;
color: white;
text-indent: -6000px;
background: url("../img/rtp-inline-w.svg") no-repeat;
width: 149px;
height: 22px;
}
#media only screen and (max-width: 740px) {
header h1 {
margin-left: 30px;
}
}
/* ################## */
/* ##### SLIDER ##### */
/* ################## */
section div.slider {
background: url("../img/banner.jpg") no-repeat center;
background-size: cover;
padding-top: 127px;
padding-bottom: 65px;
color: white;
text-align: center;
font-size: 35px;
font-family: 'Source Serif Pro', serif;
margin: auto;
position: relative;
}
section div.slider::after {
content: "";
background: url("../img/eu-pin.svg");
position: absolute;
width: 29px;
height: 39px;
bottom: 40px;
right: 40px;
}
section div.slider::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
section div.slider div.container {
position: relative;
}
section div.slider div.container img {
width: 200px;
}
.article {
display: block;
}
/* ####################################### */
/* ##### APPLICATIONS ARE NOW CLOSED ##### */
/* ####################################### */
section div.closed {
padding-bottom: 65px;
}
section div.closed div.row div.closed--container {
margin-top: 65px;
}
section div.closed div.row div.closed--container h1 {
font-family: 'Conv_Besom';
padding: 0;
margin: 0;
margin-bottom: 50px;
font-size: 40px;
font-weight: normal;
color: white;
}
section div.closed div.row div.closed--container img {
width: 300px;
display: block;
margin: auto;
padding-bottom: 40px;
}
/* ################## */
/* ##### FOOTER ##### */
/* ################## */
footer {
background-color: #f9b40a;
padding-top: 50px;
padding-bottom: 55px;
text-transform: uppercase;
}
footer div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
footer div p {
font-size: 14px;
}
footer div p a {
text-decoration: none;
color: black;
font-weight: bold;
}
footer div p:last-child {
margin-left: 80px;
}
footer div p+p {
margin-left: 35px;
}
footer div p.copyright {
position: relative;
padding-left: 42px;
}
footer div p.copyright::before {
content: "";
background: url("../img/eu-flag.svg");
width: 33px;
height: 22px;
position: absolute;
top: -3px;
left: 0;
}
footer div p.mail {
position: relative;
}
footer div p.mail::before {
content: "\e004";
font-family: "road-trip-project-icons";
font-size: 45px;
position: absolute;
top: -18px;
left: -50px;
}
footer div h1 {
display: block;
text-decoration: none;
color: white;
text-indent: -6000px;
background: url("../img/rtp-inline-w.svg") no-repeat;
width: 183px;
height: 27px;
}
footer div.hashtag {
font-size: 13px;
}
#media only screen and (max-width: 650px) {
footer div {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
footer ul {
list-style-type: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0;
margin-bottom: 20px;
}
footer ul li a {
display: block;
text-decoration: none;
color: white;
font-size: 30px;
background-color: black;
border-radius: 50%;
width: 54px;
height: 54px;
position: relative;
}
footer ul li a i {
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
footer ul li+li {
margin-left: 30px;
}
/* ##################### */
/* ##### HAMBURGER ##### */
/* ##################### */
button.hamburger {
position: absolute;
right: 15px;
top: 6px;
z-index: 5;
visibility: hidden;
}
#media only screen and (max-width: 740px) {
button.hamburger {
visibility: visible;
}
}
/* ##################### */
/* ##### TRIP LIST ##### */
/* ##################### */
section.triplist {
padding-top: 65px;
padding-bottom: 65px;
background-color: white;
}
#media only screen and (max-width: 740px) {
.route-item {
margin-top: 50px;
}
}
.route-item div.divIco {
position: relative;
padding-left: 35px;
padding-right: 35px;
}
.route-item div.divIco img {
display: block;
border-radius: 50%;
width: 100%;
height: auto;
}
.route-item div.divIco::before {
font-family: "road-trip-project-icons";
content: "\e006";
position: absolute;
font-size: 40px;
top: 0;
left: 30px;
color: white;
z-index: 2;
background-color: black;
text-align: center;
width: 75px;
height: 75px;
border-radius: 50%;
line-height: 75px;
}
.route-item div {
width: 100%;
}
.route-item div span.routesDate {
display: block;
text-align: center;
margin-top: 25px;
font-weight: bold;
}
.route-item div div {
text-align: center;
}
.route-item div div a {
text-decoration: none;
font-family: 'Conv_Besom';
color: black;
font-size: 25px;
line-height: 1.5em;
}
.route-item div span.startEnd {
padding-left: 25px;
position: relative;
margin-top: 5px;
display: block;
}
.route-item div span.startEnd::before {
font-family: "road-trip-project-icons";
content: "\e006";
font-size: 17px;
position: absolute;
top: -2px;
left: 0;
}
.route-item div span.startEnd span {
font-weight: lighter;
}
.route-item p {
margin-top: 50px;
margin-bottom: 50px;
font-weight: lighter;
}
.route-item a.button {
display: block;
width: 100%;
height: 46px;
text-decoration: none;
color: white;
text-align: center;
background-color: black;
line-height: 46px;
border-radius: 23px;
text-transform: uppercase;
}
.route-item.route-item--c01 a {
color: #f9b40a;
-webkit-transition: color 0.25s linear;
-o-transition: color 0.25s linear;
transition: color 0.25s linear;
}
.route-item.route-item--c01 a:hover {
color: #b28004;
}
.route-item.route-item--c01 div.divIco::before {
background-color: #f9b40a;
}
.route-item.route-item--c01 a.button {
color: white;
background-color: #f9b40a;
-webkit-transition: background-color 0.25s linear;
-o-transition: background-color 0.25s linear;
transition: background-color 0.25s linear;
}
.route-item.route-item--c01 a.button:hover {
background-color: #b28004;
}
.route-item.route-item--c01 span.startEnd::before {
color: #f9b40a;
}
.route-item.route-item--c02 a {
color: #1f7089;
-webkit-transition: color 0.25s linear;
-o-transition: color 0.25s linear;
transition: color 0.25s linear;
}
.route-item.route-item--c02 a:hover {
color: #113d4b;
}
.route-item.route-item--c02 div.divIco::before {
background-color: #1f7089;
}
.route-item.route-item--c02 a.button {
color: white;
background-color: #1f7089;
-webkit-transition: background-color 0.25s linear;
-o-transition: background-color 0.25s linear;
transition: background-color 0.25s linear;
}
.route-item.route-item--c02 a.button:hover {
background-color: #113d4b;
}
.route-item.route-item--c02 span.startEnd::before {
color: #1f7089;
}
.route-item.route-item--c03 a {
color: #01c191;
-webkit-transition: color 0.25s linear;
-o-transition: color 0.25s linear;
transition: color 0.25s linear;
}
.route-item.route-item--c03 a:hover {
color: #017558;
}
.route-item.route-item--c03 div.divIco::before {
background-color: #01c191;
}
.route-item.route-item--c03 a.button {
color: white;
background-color: #01c191;
-webkit-transition: background-color 0.25s linear;
-o-transition: background-color 0.25s linear;
transition: background-color 0.25s linear;
}
.route-item.route-item--c03 a.button:hover {
background-color: #017558;
}
.route-item.route-item--c03 span.startEnd::before {
color: #01c191;
}
.route-item.route-item--c04 a {
color: #97754f;
-webkit-transition: color 0.25s linear;
-o-transition: color 0.25s linear;
transition: color 0.25s linear;
}
.route-item.route-item--c04 a:hover {
color: #654e35;
}
.route-item.route-item--c04 div.divIco::before {
background-color: #97754f;
}
.route-item.route-item--c04 a.button {
color: white;
background-color: #97754f;
-webkit-transition: background-color 0.25s linear;
-o-transition: background-color 0.25s linear;
transition: background-color 0.25s linear;
}
.route-item.route-item--c04 a.button:hover {
background-color: #654e35;
}
.route-item.route-item--c04 span.startEnd::before {
color: #97754f;
}
/* ############### */
/* ##### FAQ ##### */
/* ############### */
.faq {
background-color: #f5f5f5;
padding-top: 65px;
padding-bottom: 65px;
}
.faq div.container div.row div.col-sm-6 h1 {
font-family: 'Source Serif Pro', serif;
text-align: center;
font-size: 60px;
margin: 0;
padding-bottom: 40px;
}
.faq div.container div.row div.col-sm-6 ul {
list-style-type: none;
padding: 0;
}
.faq div.container div.row div.col-sm-6 ul li {
font-weight: bold;
font-size: 14px;
padding: 10px 10px;
padding-top: 20px;
border-bottom: 1px solid #bfbfbf;
position: relative;
}
.faq div.container div.row div.col-sm-6 ul li:last-child {
border-bottom: none;
}
.faq div.container div.row div.col-sm-6 ul li a {
text-decoration: none;
color: #4a4a4a;
padding-right: auto;
-webkit-transition: color 0.25s linear;
-o-transition: color 0.25s linear;
transition: color 0.25s linear;
}
.faq div.container div.row div.col-sm-6 ul li a:hover {
color: black;
}
.faq div.container div.row div.col-sm-6 ul li a:hover::after {
color: black;
}
.faq div.container div.row div.col-sm-6 ul li a::after {
content: "\e008";
font-family: "road-trip-project-icons";
color: #f9b40a;
position: absolute;
top: 20px;
right: 0;
-webkit-transition: color 0.25s linear;
-o-transition: color 0.25s linear;
transition: color 0.25s linear;
}
.faq div.container div.row div.col-sm-6 ul li a.open {
color: black;
}
.faq div.container div.row div.col-sm-6 ul li a.open::after {
content: "\e007";
font-family: "road-trip-project-icons";
color: black;
position: absolute;
top: 20px;
right: 0;
}
.faq div.container div.row div.col-sm-6 ul li p {
font-weight: normal;
display: none;
}
.faq div.container div.row div.col-sm-6 img {
width: 100%;
}
.faq {
padding-top: 200px;
height: 750px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<section class="faq">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1>Q&As</h1>
<ul>
<li>
Question 1
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</li>
<li>
Question 2
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</li>
<li>
Question 3
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</li>
<li>
Question 4
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</li>
</ul>
</div>
<div class="col-sm-6">
<img src="../includes/img/faqs.jpg" alt="Are you ready ?">
</div>
</div>
</div>
</section>

Related

How to mouseover on container to show read-more button with Javascript?

I have made a HTML page, in that when I hover on the container class, I wanted the read-more class to be displayed or else it should be hidden.
I've tried a lot but I'm unable to figure out it!
If you know, please make it for me!!
I'm even OK with JQuery
HTML Code
HTML
<div class="author">
<div class="box">
<div class="container" id="auHov">
<div class="logo">
<img src="authorLogo.png" alt="Author Logo">
</div>
<div class="info">
<h2>Quic Flicks</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<a class="read-more" href="#" id="auBtn">Read More</a>
</div>
</div>
</div>
</div>
CSS Code
CSS
.author {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
.author .box {
margin-left: 80px;
margin-right: 80px;
}
.author .box .container {
padding: 1em;
width: 100%;
height: auto;
border-radius: 5px;;
background: linear-gradient(45deg, #F45C43, #EB3349);
background-size: contain;
}
.author .box .container .logo {
padding: 8px;
margin: 12px;
float: left;
display: flex;
align-items: center;
justify-content: center;
}
.author .box .container .logo img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 6px solid var(--light);
}
.author .box .container .info {
float: right;
padding: 10px;
margin: 4px;
}
.author .box .container .info h2 {
font-size: 26px;
font-family: 'Lobster', cursive;
transition: linear 0.3s;
}
.author .box .container .info h2 a {
text-decoration: none;
color: var(--light-primary);
cursor: pointer;
text-shadow: 0.1px 0.1px 2px var(--dark);
transition: ease 0.3s;
}
.author .box .container .info h2 a:hover {
transition: linear 0.3s;
text-shadow: 0.8px 0.8px 3.9px var(--dark);
color: var(--primary);
}
.author .box .container .info p {
font-size: 20px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
line-height: 32px;
word-spacing: 1px;
color: var(--light-primary);
text-shadow: 0.1px 0.1px var(--dark);
cursor: default;
}
.author .box .container .info .read-more {
text-decoration: none;
float: right;
padding: 12px;
margin: 5px;
text-transform: uppercase;
font-size: 1em;
font-family: 'Lato', sans-serif;
font-weight: 900;
color: var(--dark);
background: var(--primary);
transition: ease 0.4s;
/* display: none; */
}
.author .box .container .info a:hover {
background: var(--dark-primary);
transition: linear 0.2s;
}
JavaScript Code
JAVASCRIPT
????????

If you NEED javascript, just add an event listener to the <div>.
Here is an example:
document.getElementById("info").addEventListener("mouseover", function() {
document.getElementById("auBtn").style = "display: block;";
});
document.getElementById("info").addEventListener("mouseout", function() {
document.getElementById("auBtn").style = "display: none;";
});
.author {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
.author .box {
margin-left: 80px;
margin-right: 80px;
}
.author .box .container {
padding: 1em;
width: 100%;
height: auto;
border-radius: 5px;;
background: linear-gradient(45deg, #F45C43, #EB3349);
background-size: contain;
}
.author .box .container .logo {
padding: 8px;
margin: 12px;
float: left;
display: flex;
align-items: center;
justify-content: center;
}
.author .box .container .logo img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 6px solid var(--light);
}
.author .box .container .info {
float: right;
padding: 10px;
margin: 4px;
}
.author .box .container .info h2 {
font-size: 26px;
font-family: 'Lobster', cursive;
transition: linear 0.3s;
}
.author .box .container .info h2 a {
text-decoration: none;
color: var(--light-primary);
cursor: pointer;
text-shadow: 0.1px 0.1px 2px var(--dark);
transition: ease 0.3s;
}
.author .box .container .info h2 a:hover {
transition: linear 0.3s;
text-shadow: 0.8px 0.8px 3.9px var(--dark);
color: var(--primary);
}
.author .box .container .info p {
font-size: 20px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
line-height: 32px;
word-spacing: 1px;
color: var(--light-primary);
text-shadow: 0.1px 0.1px var(--dark);
cursor: default;
}
.author .box .container .info .read-more {
text-decoration: none;
float: right;
padding: 12px;
margin: 5px;
text-transform: uppercase;
font-size: 1em;
font-family: 'Lato', sans-serif;
font-weight: 900;
color: var(--dark);
background: var(--primary);
transition: ease 0.4s;
/* display: none; */
}
.author .box .container .info a:hover {
background: var(--dark-primary);
transition: linear 0.2s;
}
<div class="author">
<div class="box">
<div class="container" id="auHov">
<div class="logo">
<img src="authorLogo.png" alt="Author Logo">
</div>
<div class="info" id="info">
<h2>Quic Flicks</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<a class="read-more" href="#" id="auBtn" style="display: none;" id="_id">Read More</a>
</div>
</div>
</div>
</div>
A living demo: https://codepen.io/marchmello/pen/mdJNNQV?editors=1010
Or you can add some transitions by using both of functions hide() and fadeToggle() in jQuery:
$("#auBtn").hide();
$("#info").hover(function() {
$("#auBtn").fadeToggle(400);
});
.author {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
.author .box {
margin-left: 80px;
margin-right: 80px;
}
.author .box .container {
padding: 1em;
width: 100%;
height: auto;
border-radius: 5px;;
background: linear-gradient(45deg, #F45C43, #EB3349);
background-size: contain;
}
.author .box .container .logo {
padding: 8px;
margin: 12px;
float: left;
display: flex;
align-items: center;
justify-content: center;
}
.author .box .container .logo img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 6px solid var(--light);
}
.author .box .container .info {
float: right;
padding: 10px;
margin: 4px;
}
.author .box .container .info h2 {
font-size: 26px;
font-family: 'Lobster', cursive;
transition: linear 0.3s;
}
.author .box .container .info h2 a {
text-decoration: none;
color: var(--light-primary);
cursor: pointer;
text-shadow: 0.1px 0.1px 2px var(--dark);
transition: ease 0.3s;
}
.author .box .container .info h2 a:hover {
transition: linear 0.3s;
text-shadow: 0.8px 0.8px 3.9px var(--dark);
color: var(--primary);
}
.author .box .container .info p {
font-size: 20px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
line-height: 32px;
word-spacing: 1px;
color: var(--light-primary);
text-shadow: 0.1px 0.1px var(--dark);
cursor: default;
}
.author .box .container .info .read-more {
text-decoration: none;
float: right;
padding: 12px;
margin: 5px;
text-transform: uppercase;
font-size: 1em;
font-family: 'Lato', sans-serif;
font-weight: 900;
color: var(--dark);
background: var(--primary);
/* display: none; */
}
.author .box .container .info a:hover {
background: var(--dark-primary);
transition: linear 0.2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="author">
<div class="box">
<div class="container" id="auHov">
<div class="logo">
<img src="authorLogo.png" alt="Author Logo">
</div>
<div class="info" id="info">
<h2>Quic Flicks</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<a class="read-more" href="#" id="auBtn" id="_id">Read More</a>
</div>
</div>
</div>
</div>
Living demo: https://codepen.io/marchmello/pen/ExVYYjz

You can also do it with CSS as
<!DOCTYPE html>
<html>
<style>
.author {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
.author .box {
margin-left: 80px;
margin-right: 80px;
}
.author .box .container {
padding: 1em;
width: 100%;
height: auto;
border-radius: 5px;;
background: linear-gradient(45deg, #F45C43, #EB3349);
background-size: contain;
}
.author .box .container .logo {
padding: 8px;
margin: 12px;
float: left;
display: flex;
align-items: center;
justify-content: center;
}
.author .box .container .logo img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 6px solid var(--light);
}
.author .box .container .info {
float: right;
padding: 10px;
margin: 4px;
}
.author .box .container .info h2 {
font-size: 26px;
font-family: 'Lobster', cursive;
transition: linear 0.3s;
}
.author .box .container .info h2 a {
text-decoration: none;
color: var(--light-primary);
cursor: pointer;
text-shadow: 0.1px 0.1px 2px var(--dark);
transition: ease 0.3s;
}
.author .box .container .info h2 a:hover {
transition: linear 0.3s;
text-shadow: 0.8px 0.8px 3.9px var(--dark);
color: var(--primary);
}
.author .box .container .info p {
font-size: 20px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
line-height: 32px;
word-spacing: 1px;
color: var(--light-primary);
text-shadow: 0.1px 0.1px var(--dark);
cursor: default;
}
.author .box .container .info .read-more {
text-decoration: none;
float: right;
padding: 12px;
margin: 5px;
text-transform: uppercase;
font-size: 1em;
font-family: 'Lato', sans-serif;
font-weight: 900;
color: var(--dark);
background: var(--primary);
transition: ease 0.4s;
/* display: none; */
}
.details{
position : relative;
}
.tooltip {
visibility : hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 43px;
left: 84%;
margin-left: -60px;
}
.tooltip::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.details:hover .tooltip {
visibility: visible;
}
</style>
<body style="text-align:center;">
<div class="author">
<div class="box">
<div class="container" id="auHov">
<div class="logo">
<img src="authorLogo.png" alt="Author Logo">
</div>
<div class="info">
<h2>Quic Flicks</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<div class = "details">
<a class="read-more" href="#" id="auBtn">Read More</a>
<span class ="tooltip">Read</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Note : For more details https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_arrow_top

Unidentified jquery problem with accordion list

I'm trying to include accordion list from here to a simple website but I'm having problem with jquery - javascript requires jquery 2.2.4, but the site already has jquery-1.11.2.min. Adding proper jquery version with no conflict mode doesn't make javascript work:
<script type="text/javascript">
var jQuery_2_2_4 = $.noConflict(true);
</script>
Also, adding no conflict mode to jquery 1_11_2 crashes website.
The code doesn't work on the website (pol - built co uk) but it works here perfectly even on jquery 1.11.2... Including another jquery-1.12.1.min.js in body doesn't help.
What should I do to make it work fine without crashing the site? (I'm not its owner or webmaster) Is there an easy way to simplify javascript below to work without jquery? I tried closure compiler but it was useless.
$('.accordion-item .heading').on('click', function(e) {
e.preventDefault();
// Add the correct active class
if($(this).closest('.accordion-item').hasClass('active')) {
// Remove active classes
$('.accordion-item').removeClass('active');
} else {
// Remove active classes
$('.accordion-item').removeClass('active');
// Add the active class
$(this).closest('.accordion-item').addClass('active');
}
// Show the content
var $content = $(this).next();
$content.slideToggle(100);
$('.accordion-item .content').not($content).slideUp('fast');
});
*,
*:before,
*:after {
box-sizing: border-box;
}
html {
padding-top: 50px;
font: 14px Tahoma, Arial, Helvetica, sans-serif;
background-color: black;
width: 690px;
border-color: #a10900;
border-width: 50px;
border-style: solid;
}
.header {
text-align: center;
}
.header a {
text-decoration: none;
color: #f9f9f9;
}
.accordion {
width: 100%;
max-width: 75rem;
margin: 0 auto;
padding: 2rem;
}
.accordion-item {
position: relative;
}
.accordion-item.active .heading {
color: white;
}
.accordion-item.active .icon {
background: #a10900;
}
.accordion-item.active .icon:before {
background: white;
}
.accordion-item.active .icon:after {
width: 0;
}
.accordion-item .heading {
display: block;
text-transform: uppercase;
text-decoration: none;
color: lightgrey;
font-weight: 700;
font-size: 1rem;
position: relative;
padding: 1.5rem 1.5rem 1.5rem 4rem;
transition: 0.3s ease-in-out;
}
#media (min-width: 40rem) {
.accordion-item .heading {
font-size: 1.2rem;
}
}
.accordion-item .heading:hover {
color: white;
}
.accordion-item .heading:hover .icon:before, .accordion-item .heading:hover .icon:after {
background: white;
}
.accordion-item .icon {
display: block;
position: absolute;
top: 50%;
left: 0;
width: 3rem;
height: 3rem;
border: 2px solid #a10900;
border-radius: 3px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.accordion-item .icon:before, .accordion-item .icon:after {
content: '';
width: 1.25rem;
height: 0.25rem;
background: lightgrey;
position: absolute;
border-radius: 3px;
left: 50%;
top: 50%;
transition: 0.3s ease-in-out;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.accordion-item .icon:after {
-webkit-transform: translate(-50%, -50%) rotate(90deg);
transform: translate(-50%, -50%) rotate(90deg);
z-index: -1;
}
.accordion-item .content {
display: none;
color: #f9f9f9;
}
.accordion-item .content p {
margin-top: 0;
}
#media (min-width: 40rem) {
.accordion-item .content {
line-height: 1.75;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-item">
<a href="#" class="heading">
<div class="icon"></div>
<div class="title"> <span style="color:#a10900">Accordion item 1</div>
</a>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>

JS messes with the positioning of slideshow

I want to build a slideshow using this code that dsonesuk provided at the W3Forum.I modified it in order to come close to what I want. Now the JS does two strange things to the position of the slideshow:
In smaller (ex. mobile) browser windows, #myslideFrame expands in
height (and it shouldn't).
In larger browser windows (wider than 1260px), the whole slideshow sticks to the left side of the wrapper instead of extending all the way to the right side (of the wrapper).
Since I don't exactely know why the JS is behaving like it is, this is the code of the whole page. (Especially the CSS is pretty long, sorry for that. But you can "cmd/Strg + F" for "slideshow" and it will highlight the beginning of the relevant part)
Thank you!
var slideIndex = 0;
var t;
var dots;
var maxheight = 0;
var timedelay = 3700;
window.onload = function() {
var x = document.getElementsByClassName("mySlides");
var parent_elem = document.getElementById('myslideFrame')
var widthRatio = parseInt(parent_elem.offsetWidth) / parseInt(x[0].width)
for (i = 0; i < x.length; i++) {
if (x[i].height > maxheight) {
maxheight = x[i].height;
}
}
document.getElementById('myslideFrame').style.height = maxheight * widthRatio + "px";
showDivs(slideIndex);
carousel();
};
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
dots = document.getElementsByClassName("demo");
if (n > x.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = x.length;
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-border-red", "");
}
x[slideIndex - 1].style.display = "inline-block";
dots[slideIndex - 1].className += " w3-border-red";
}
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
dots[i].className = dots[i].className.replace(" w3-border-red", "");
}
slideIndex++;
if (slideIndex > x.length) {
slideIndex = 1
}
x[slideIndex - 1].style.display = "inline-block";
dots[slideIndex - 1].className += " w3-border-red";
t = setTimeout(carousel, timedelay);
}
function pauseCarousel() {
clearTimeout(t)
}
function startCarousel() {
t = setTimeout(carousel, timedelay);
}
* {
margin: 0;
padding: 0;
}
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: #rich_clark
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
nav ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/* change colours to suit your needs */
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
/* change colours to suit your needs */
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input,
select {
vertical-align: middle;
}
/* Mein Code */
:root {
--lightGrey: #eeeeee;
--midGrey: #4d4d4d;
--darkGrey: #1e1e1e;
--Color1: #91d3f5;
--Color2: #e24e42;
}
body {
background-color: var(--lightGrey);
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
.wrapper {
margin: 0 auto;
width: 90vw;
}
a {
outline: 0;
text-decoration: none;
color: var(--Color2);
}
.mainnav {
float: left;
width: 100%;
overflow: hidden;
position: relative;
z-index: 2;
}
.mainnav ul {
clear: left;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
.mainnav ul li {
display: block;
float: right;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
.mainnav ul li a {
display: inline-block;
margin: 0 0 0 1px;
padding: 0 10px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
letter-spacing: 0.3em;
color: #333333;
text-decoration: none;
line-height: 40px;
}
#light {
color: var(--lightGrey);
font-weight: 300;
}
#logo p {
width: 100%;
text-align: center;
padding-top: 20px;
float: left;
text-decoration: none;
font-size: 20px;
font-family: 'Roboto', sans-serif;
color: #333333;
letter-spacing: 0.3em;
z-index: 2;
}
.intro {
font-family: 'Oswald', sans-serif;
font-weight: 600;
font-size: 50px;
color: var(--darkGrey);
float: left;
text-align: center;
width: 60vw;
position: absolute;
bottom: 2vh;
}
#introTextHello {
padding-bottom: 20px;
letter-spacing: 0;
font-size: 145px;
animation: fadein 2s;
-moz-animation: fadein 2s;
/* Firefox */
-webkit-animation: fadein 2s;
/* Safari and Chrome */
-o-animation: fadein 2s;
/* Opera */
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-moz-keyframes fadein {
/* Firefox */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadein {
/* Safari and Chrome */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-o-keyframes fadein {
/* Opera */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#introText {
display: none;
}
header {
height: 100vh;
background-image: url(img/PortraitMobile2.jpg);
background-size: cover;
background-position: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* Ab hier beginnt der Introtext (ohne introTextHello) der Mobile-Version */
.mobileIntroSection {
scroll-snap-align: start;
height: 100vh;
background-size: cover;
background-position: center;
background-color: var(--Color2);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.29), 0 6px 20px 0 rgba(0, 0, 0, 0.29);
}
#introTextMobile h1 {
text-align: left;
padding-top: 20px;
line-height: 1.3;
letter-spacing: 0;
}
/* Ab hier beginnt der Projektteil */
.premiumFeaturedProjectSection {
display: none;
}
.featuredProjectsSection {
scroll-snap-align: start;
background-size: cover;
background-position: center;
}
/*Das ist die Flexbox für die Projekte*/
.projects {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/*Nächste Zeile sorgt für Umbruch von horizonaler Anordnung zu vertikaler bei Verkleinerung des Wrappers*/
flex-wrap: wrap;
margin-bottom: 40px;
}
.featuredProjectPicture {
position: relative;
width: 75vw;
height: 25vh;
background-color: black;
overflow: hidden;
margin: 1.5vh;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.29), 0 6px 20px 0 rgba(0, 0, 0, 0.29);
}
.bgimage {
display: block;
width: 100%;
height: auto;
/*
mix-blend-mode: screen;
-webkit-filter: grayscale(10%) contrast(200%);
filter: grayscale(30%) contrast(90%);
*/
}
.projectTitleSubtitle {
width: 80%;
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.projectTitleSubtitle hr {
border-style: none;
margin: 15px auto 30px auto;
width: 50%;
height: 3px;
background-color: var(--Color1);
}
.projectTitleSubtitle span {
font-family: 'Roboto', sans-serif;
font-size: 25px;
font-weight: 200;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0.7;
background-color: var(--darkGrey);
}
.callToActionSection {
scroll-snap-align: end;
background-color: var(--Color1);
text-align: center;
scroll-snap-align: end;
padding: 50px 0 50px 0;
}
.callToActionSection h2 {
line-height: 1.3;
}
/* Ab hier beginnt der footer */
footer {
padding-top: 30px;
height: 250px;
background-color: var(--darkGrey);
scroll-snap-align: end;
}
#footerImpressum p {
float: left;
text-align: left;
margin-top: 23px;
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 17px;
color: var(--midGrey);
letter-spacing: 0.03em;
line-height: 1.34;
}
/* footernav */
#footernav {
margin-top: 13px;
float: right;
}
#footernav ul {}
#footernav ul li {
text-align: right;
list-style: none;
}
#footernav ul li a {
display: inline-block;
margin: 0 0 0 1px;
font-family: 'Roboto', sans-serif;
letter-spacing: 0.3em;
color: var(--midGrey);
text-decoration: none;
line-height: 40px;
}
/* Einzelne Projektseiten */
#fluchtHeader {
background-image: url(img/flucht/fluchtHeader.jpg);
}
#smartLogisticsHeader {
background-image: url(img/smartLogistics/BGSmartLogisticsBig.png);
}
#blankHeader {
background-image: none;
}
#einblickAusblickHeader {
background-image: url(img/einblickAusblick/einblickAusblickHeader.jpg);
}
.projectPicture {
display: block;
float: left;
width: 95%;
}
.wrapperSingleProject {
padding: 50px 0 50px 5px;
width: 90vw;
/* wie .imgTextSized */
margin: auto;
}
.imgTextSized {
width: 90vw;
padding: 0;
margin: 25px 0;
}
.imgTotalWidthSized {
width: 100vw;
padding: 0;
margin: 0;
}
.projectIntro {
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 800;
margin-bottom: 25px;
}
#visibleDesktop {
display: none;
}
#visibleMobile {
display: block;
}
/* 404-Seite */
.errorPage {
text-align: center;
}
.button {
background-color: var(--Color2);
border: none;
color: var(--lightGrey);
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
}
.button:hover {
background-color: var(--darkGrey);
color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
h1 {
text-decoration: none;
text-align: center;
font-size: 50px;
font-family: 'Oswald', sans-serif;
font-weight: 700;
letter-spacing: 0.2em;
line-height: 1;
color: var(--lightGrey);
padding: 50px 0 10px 0;
}
h2 {
text-decoration: none;
text-align: center;
font-size: 25px;
font-family: 'Roboto', sans-serif;
font-weight: 200;
letter-spacing: 0.1em;
line-height: 1;
color: var(--lightGrey);
}
h3 {
text-decoration: none;
text-align: center;
font-size: 17px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
letter-spacing: 0.08em;
line-height: 1.3;
color: #ccc;
margin-top: 20px;
}
p {
text-decoration: none;
text-align: left;
font-size: 17px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
letter-spacing: 0.08em;
line-height: 1.45;
color: var(--darkGrey);
}
.darkGreyText {
color: var(--darkGrey);
}
.Color2Text {
color: var(--Color2);
}
/* Slideshow */
.slideshow {
margin: 0 auto 0 auto;
display: inline-block;
}
.mySlides {
width: 100%;
vertical-align: middle;
}
#myslideFrame {
text-align: center;
position: relative;
}
/* Is this still necessary? */
#myslideFrame:before,
.flexbox>div:before {
content: "";
height: 100%;
vertical-align: middle;
width: 0;
}
.slideshowIndicators {
width: 100%;
text-align: center;
}
.slideshowIndexIndicator:hover {
background-color: var(--Color1);
}
.slideshowIndexIndicator {
cursor: pointer;
height: 4px;
line-height: 1000px;
width: 60px;
background-color: var(--midGrey);
display: inline-block;
text-align: center;
margin: 0 15px;
transition: background-color 0.4s ease;
}
.w3-border-red,
.w3-hover-border-red:hover {
background-color: var(--Color2)!important
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.8s;
animation-name: fade;
animation-duration: 1.8s;
animation-timing-function: cubic-bezier(.5, .3, .5, 1);
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* Slideshow End */
/* Responsive-Einstellungen für Desktop*/
#media only screen and (min-width: 768px) {
body {
scroll-snap-type: y proximity;
}
.wrapper {
width: 95vw;
}
/* nav underline-on-hover-animation */
.link {
position: relative;
}
.link:after {
content: '';
width: 0;
height: 3px;
display: block;
margin-top: -7px;
right: 0;
background-color: #fff;
transition: width .3s ease;
-webkit-transition: width .3s ease;
}
.link:hover:after {
width: 100%;
left: 0;
background-color: #fff;
}
/* nav underline-on-hover-animation ende */
#logo p {
text-align: left;
}
.intro {
line-height: 1.2;
float: right;
text-align: left;
padding-top: 40vh;
padding-left: 25vw;
position: relative;
}
#introText {
display: block;
letter-spacing: 0;
animation: fadein 2s;
-moz-animation: fadein 2s;
/* Firefox */
-webkit-animation: fadein 2s;
/* Safari and Chrome */
-o-animation: fadein 2s;
/* Opera */
}
#introTextHello {
font-size: 50px;
}
.mobileIntroSection {
display: none;
}
header {
background-image: url(img/Portrait2.jpg);
}
/* Ab hier beginnt der Projektteil */
.featuredProjectsSection {
scroll-snap-align: end;
padding: 100px 0 100px 0;
}
/*Das ist die Flexbox für die Projekte*/
.projects {
flex-direction: row;
/*Nächste Zeile sorgt für Umbruch von horizonaler Anordnung zu vertikaler bei Verkleinerung des Wrappers*/
border: 4px solid var(--Color2);
width: 85vw;
/* Wenn dieser Wert verändert, auch .premiumFeaturedProjectSection ändern */
margin: 0 auto;
text-align: center;
padding: 25px 0;
}
/* */
.featuredProjectPicture {
float: left;
width: 20vw;
height: 20vw;
margin: 25px;
}
.projectTitleSubtitle {
top: 45%;
font-family: 'Roboto', sans-serif;
}
.projectTitleSubtitle hr {
margin: 20px auto 45px auto;
width: 30%;
}
.projectTitleSubtitle span {
font-size: 30px;
}
.overlay {
transition: .5s ease;
}
.featuredProjectPicture:hover .overlay {
opacity: 0.1;
}
.premiumFeaturedProjectSection {
width: calc(~"60vw + 150px");
display: inline-block;
}
.premiumProjectIntro {
width: 25vw;
float: left;
text-align: center;
margin: 25px 25px 25px 0;
padding: 25px 0 0 25px;
}
.premiumProjectIntro input {
display: inline-block;
margin-top: 25px;
}
#premiumFeaturedProjectPicture {
float: right;
width: 35vw;
height: 40vw;
margin: 25px 0 25px 50px;
}
/**/
.callToActionSection {
padding: 50px 0 90px 0;
}
.callToActionSection h2 {
margin: 25px 0;
}
/* Ab hier beginnt der footer */
footer {
height: 270px;
}
#footerImpressum p {
line-height: 1.25;
}
#logo {
margin-top: 7px;
width: 50%;
float: left;
text-align: left;
text-decoration: none;
font-size: 23px;
font-family: 'Roboto', sans-serif;
letter-spacing: 0.3em;
}
.mainnav {
float: right;
width: 350px;
}
.mainnav ul {
clear: right;
float: right;
left: 40%;
}
.mainnav ul li {
line-height: 85px;
}
.wrapperSingleProject {
padding: 80px 0 80px 0;
width: 750px;
/* wie .imgTextSized */
}
.imgTextSized {
width: 750px;
}
#visibleDesktop {
display: block;
}
#visibleMobile {
display: none;
}
h1 {
text-decoration: none;
text-align: center;
font-size: 50px;
font-family: 'Oswald', sans-serif;
font-weight: 700;
letter-spacing: 0.2em;
line-height: 1;
}
h2 {
text-decoration: none;
text-align: center;
font-size: 30px;
font-family: 'Roboto', sans-serif;
font-weight: 200;
letter-spacing: 0.1em;
line-height: 1;
}
h3 {
text-decoration: none;
text-align: center;
font-size: 17px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
letter-spacing: 0.08em;
line-height: 1.3;
}
p {
text-decoration: none;
text-align: left;
font-size: 17px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
letter-spacing: 0.08em;
line-height: 1.45;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="script.js"></script>
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>John Smith Design</title>
</head>
<body>
<nav>
<div class="wrapper">
<div id="logo">
<p>JOHN SMITH</p>
</div>
<div class="mainnav">
<ul>
<li>
<a class="link" id="light" href="#">ABOU<span style="letter-spacing:0px;">T</span></a>
</li>
<li>
<a class="link" id="light" href="#">PROJECT<span style="letter-spacing:0px;">S</span></a>
</li>
<li>
<a class="link" id="light" href="#">HOM<span style="letter-spacing:0px;">E</span></a>
</li>
</ul>
</div>
</div>
</nav>
<header id="fluchtHeader">
<div class="overlay"></div>
<div class="projectTitleSubtitle">
<h1>FACT</h1>
<br>
<hr>
<h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</h2>
<h3>with Johnny Jones.</h3>
</div>
</header>
<div class="wrapper">
<div class="wrapperSingleProject">
<p class="projectIntro">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
<div class="slideshow">
<div id="myslideFrame">
<img class="mySlides fade" src="https://i.stack.imgur.com/W0mZQ.jpg">
<img class="mySlides fade" src="https://i.stack.imgur.com/9djAf.jpg">
<img class="mySlides fade" src="https://i.stack.imgur.com/LhWX8.jpg">
<div class="slideshowIndicators">
<span onclick="currentDiv(1)" class="slideshowIndexIndicator demo" onmouseover="pauseCarousel();" onmouseout="startCarousel()"></span>
<span onclick="currentDiv(2)" class="slideshowIndexIndicator demo" onmouseover="pauseCarousel();" onmouseout="startCarousel()"></span>
<span onclick="currentDiv(3)" class="slideshowIndexIndicator demo" onmouseover="pauseCarousel();" onmouseout=" startCarousel()"></span>
</div>
</div>
</div>
</div>
<div class="callToActionSection">
<div class="wrapper">
<h2>Want to see more? <br> Check out my other projects!</h2>
<br>
<input type="submit" class='button' value="Let's go" onclick="location.href='#'">
</div>
</div>
<footer>
<div class="wrapper">
<div id="footerImpressum">
<p>
Contact:<br>
<br> John Smith <br> Johnstreet 30<br> 11111 Johntown<br>
<br> john#smith.com
<br> +11 (1)111 111 11 11
</p>
</div>
<div id="footernav">
<ul>
<li><a class="link" href="#">HOM<span style="letter-spacing:0px;">E</span></a></li>
<li><a class="link" href="#">PROJECT<span style="letter-spacing:0px;">S</span></a></li>
<li><a class="link" href="#">ABOU<span style="letter-spacing:0px;">T</span></a></li>
<li><a class="link" href="#">IMPRIN<span style="letter-spacing:0px;">T</span></a></li>
<li><a class="link" href="#">PRIVAC<span style="letter-spacing:0px;">Y</span></a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>

Ok, so the fix is pretty simple. You don't want anything messing around with the height of this element. So just remove everything from the window.load that does this.
Which should leave you with something like this:
window.onload = function() {
showDivs(slideIndex);
carousel();
};
Next up is to fix the horizontal alignment of the carousel on desktop, this is by far the easiest thing to do. Your slideshow is an inline-block which means it can be centered by giving the parent the text-align: center style.
.wrapper {
margin: 0 auto;
width: 90vw;
text-align: center;
}

Simple toggle of fade in/out not working with transitions, opacity and visibility

I'm trying, without using more javascript and CSS only, to figure out why clicking on one of the list items doesn't show the expanded text by fading it in and out rather than it just appearing immediately. The code uses a transition duration and then makes the expanded element visible.
I know you can't have a transition duration from hidden to visible, but you can on opacity - but it still doesn't transition.
Can someone explain what's going on here, and come up with preferably a non-javascript solution?
Thanks for any help here - find the code and codepen below:
let moduleDescriptions = document.querySelectorAll('.course-lesson');
for (let description of moduleDescriptions) {
description.addEventListener("click", function(){
description.classList.toggle("open");
description.querySelector('.expanded-description').classList.toggle("open");
});
}
.course-lesson {
flex-basis: 100%;
text-align: left;
padding: .5em;
margin: 2px 5px 0 5px;
background: #fff;
position: relative;
font-weight: 300;
transition-duration: 0.3s;
transition: 0.3s ease all;
}
course-lesson * {
transition-duration: 0.3s;
transition: 0.3s ease all;
}
.expanded-description.open {
display: block;
visibility: visible;
transition-duration: 0.3s;
opacity: 1;
transition: visibility 0.3s linear,opacity 0.3s linear;
}
/* Relevant code above */
.course-section {
list-style-type: none;
padding: 0;
background: #15a669;
display: flex;
flex-flow: row wrap;
}
.course-section:not(:first-of-type) {
margin-top: 25px;
}
.course-section h3 {
padding: .5em;
text-align: left;
font-size: 18px;
font-weight: 400;
flex-basis: 100%;
background: #15a669;
margin: 5px 5px 0 5px;
color: #fff;
}
.course-lesson:hover {
background: #f2f2f2;
cursor: pointer;
}
.course-lesson:first-of-type {
margin-top: 0;
}
.course-lesson:last-of-type {
margin-bottom: 5px;
}
.course-lesson.type-video:before {
content: '\f144';
font-family: FontAwesome;
margin-right: .5em;
}
.course-lesson.type-file:before {
content: '\f15c';
font-family: FontAwesome;
margin-right: .5em;
}
.course-lesson:after {
content: '\f0d7';
position: absolute;
right: .5em;
top: 50%;
transform: translate(-50%, -50%);
font-family: FontAwesome;
}
.course-lesson.open:after {
content: '\f0d8';
}
.expanded-description {
padding: .5em 1em 0 0;
display: none;
}
<ul class="course-section">
<h3>title</h3>
<li class="course-lesson type-video">Intro
<div class="expanded-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</li>
<li class="course-lesson type-video">more info here
<div class="expanded-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</li>
</ul>
Codepen: https://codepen.io/anon/pen/dxVzyX
Update: any ideas, anyone?

you are changing the display from none to block and transition will not work on it.
true code is :
`
.course-lesson {
flex-basis: 100%;
text-align: left;
padding: .5em;
margin: 2px 5px 0 5px;
background: #fff;
position: relative;
font-weight: 300;
transition-duration: 0.3s;
transition: 0.3s ease all;
height: 20px;
}
.expanded-description {
padding: .5em 1em 0 0;
opacity: 0;
visibility: hidden;
}
.course-lesson.open {
height: 70px;
}
`

How do I create a sliding side navbar that dims the rest of the website when open?

So basically I have a website and I have the layout in a way I want it to and I need to make a side navbar that slides open while dimming the rest of the page. but when I put my code together it only dims certain parts of my website instead of the whole thing. what am I doing wrong?
So basically I have a website and I have the layout in a way I want it to and I need to make a side navbar that slides open while dimming the rest of the page. but when I put my code together it only dims certain page of my website instead of the whole thing. what am I doing wrong?
here is the website https://thimbleprojects.org/wjtw9802/678158
HTML
<html>
<div id="myDiv">
<div id="main">
<body id="myDiv">
<script src="script.js"></script>
<div class="header" id="myDiv2">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<h1>My Website</h1>
<p style="text-align: right;">Resize the browser window to see the effect.</p>
</div>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<div class="row">
<div class="leftcolumn">
<div class="card" id="myDiv">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</div>
</div>
</html>
CSS
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 0px;
background: #ffffff;
}
.header {
padding: 20px;
text-align: left;
color: #565656;
}
.header h1 {
font-size: 50px;
text-align: right;
color: #565656
}
.header p {
color: #565656
}
.leftcolumn {
float: right;
width: 100%;
}
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
.card {
background-color: #d7cec7;
padding: 20px;
margin-top: 0px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
}
.body {
transition: background-color .5s;
}
#media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
#media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
JAVASCRIPT
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("myDiv").style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.getElementById("myDiv").style.backgroundColor = "white";
}

The main issue is that you are solely affecting the background color of the main body tag on which are overlaid all you're other components.
The best way to proceed would be to add another div outside of your main div. Let's call it overlay that container will sit on top of all the other ones giving you the dim effect.
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("overlay").style.display = "block";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.getElementById("overlay").style.display = "none";
}
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 0px;
background: #ffffff;
}
#overlay {
margin-left:250px;
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
}
.header {
padding: 20px;
text-align: left;
color: #565656;
}
.header h1 {
font-size: 50px;
text-align: right;
color: #565656
}
.header p {
color: #565656
}
.leftcolumn {
float: right;
width: 100%;
}
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
.card {
background-color: #d7cec7;
padding: 20px;
margin-top: 0px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
}
.body {
transition: background-color .5s;
}
#media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
#media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
JAVASCRIPT
<html>
<div id="myDiv">
<div id="overlay"></div>
<div id="main">
<body id="myDiv">
<script src="script.js"></script>
<div class="header" id="myDiv2">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<h1>My Website</h1>
<p style="text-align: right;">Resize the browser window to see the effect.</p>
</div>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<div class="row">
<div class="leftcolumn">
<div class="card" id="myDiv">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</div>
</div>
</html>

Categories