Related
So I want to change the active class in navbar whenever a user scrolls. Like,
initially the Home element has active class and hence the background of Home is violet.
But as soon as I scroll down to the About Me section, I want the background of Home in navbar to be white and that of About to be violet.
But I'm not much experienced with JavaScript. I found a codepen in a YouTube video which showed the navbar links changing the active class on scrolling.
Here's the codepen that I got from YouTube:
https://codepen.io/Web_Cifar/pen/LYRBbVE
That code snippet from YouTube:
const sections = document.querySelectorAll("section");
const navLi = document.querySelectorAll("nav .container ul li");
window.addEventListener("scroll", () => {
let current = "";
sections.forEach((section) => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (pageYOffset >= sectionTop - sectionHeight / 3) {
current = section.getAttribute("id");
}
});
navLi.forEach((li) => {
li.classList.remove("active");
if (li.classList.contains(current)) {
li.classList.add("active");
}
});
});
#import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: "Roboto Mono";
font-size: 24px;
scroll-behavior: smooth;
}
section {
height: 100vh;
width: 100%;
background-color: gray;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
}
#home {
background-color: royalblue;
}
#about {
background-color: aquamarine;
}
#footer {
background-color: crimson;
}
nav {
position: sticky;
top: 0;
background-color: white;
}
nav .container {
width: 90%;
max-width: 1000px;
margin: 0 auto;
text-align: center;
padding: 10px;
}
nav .container ul li {
display: inline-block;
}
nav .container ul li a {
display: inline-block;
text-decoration: none;
padding: 10px 20px;
color: black;
}
nav .container ul li.active {
background-color: crimson;
transition: 0.3s ease background-color;
}
nav .container ul li.active a {
color: rgb(255, 255, 255);
}
/* ********************* */
/* This Code is for only the floating card in right bottom corner */
/* ********************** */
#import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
a {
padding: 0;
margin: 0;
color: var(--color-4);
text-decoration: none;
}
#webCifar-sidebox {
position: fixed;
right: 0px;
bottom: 0px;
overflow-x: clip;
width: 300px;
font-size: 16px;
}
#webCifar-sidebox p {
padding: 0;
margin: 0;
}
#webCifar {
--color-1: #17bcb4;
--color-2: #24252a;
--color-3: #244044;
--color-4: #f3f8f7;
background: var(--color-2);
display: inline-block;
color: var(--color-4);
padding: 10px 17px;
border-radius: 6px;
font-family: "Roboto Mono", monospace;
text-align: center;
position: absolute;
right: 5px;
bottom: 5px;
-webkit-transform: translateX(calc(100% + 5px));
transform: translateX(calc(100% + 5px));
-webkit-transition: 0.5s ease-out transform;
transition: 0.5s ease-out transform;
z-index: 4;
}
#webCifar.active {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#webCifar .logo {
font-size: 25px;
}
#webCifar .author {
margin-top: 10px;
margin-bottom: 20px;
}
#webCifar .author span {
background-color: var(--color-3);
padding: 3px;
border-radius: 4px;
}
#webCifar .items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
#webCifar .item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 10px;
padding: 5px;
border-radius: 4px;
text-align: left;
}
#webCifar .item:hover {
background-color: var(--color-3);
}
#webCifar svg {
max-width: 20px;
}
#webCifar .close {
position: absolute;
display: inline-block;
height: 30px;
width: 30px;
right: 5px;
top: 5px;
padding: 5px;
background-color: var(--color-3);
border-radius: 50%;
font-size: 20px;
cursor: pointer;
}
#webCifar-icon {
--color-2: #24252a;
--color-3: #244044;
font-family: "Roboto Mono", monospace;
text-align: left;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-color: var(--color-2);
color: white;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
padding: 5px;
border-radius: 4px;
gap: 5px;
margin: 5px;
cursor: pointer;
z-index: 1;
position: relative;
right: -27%;
border: 1px solid #ffffff7d;
}
#webCifar-icon svg {
max-width: 20px;
}
<nav>
<div class="container">
<ul>
<li class="home active">Home</li>
<li class="about">About</li>
<li class="contact">Contact</li>
<li class="footer">Footer</li>
</ul>
</div>
</nav>
<section id="home">
<h1>Home</h1>
</section>
<section id="about">
<h1>About</h1>
</section>
<section id="contact">
<h1>Contact</h1>
</section>
<section id="footer">
<h1>Footer</h1>
</section>
<!-- ******************* -->
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!! -->
<!-- This Code is for only the floating card in right bottom corner -->
<!-- ******************** -->
<div id="webCifar-sidebox">
<div id="webCifar">
<h2 class="logo">Web Cifar</h2>
<p class="author">Coded By <span>Shaif Arfan</span> </p>
<div class="items">
<a href="https://www.youtube.com/channel/UCdxaLo9ALJgXgOUDURRPGiQ" target="_blank" class="item youtubeLink">
<svg title="watch how we made this" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
</svg>
<p>Watch how we made this.
</p>
</a>
<a href="https://webcifar.com" target="_blank" class="item">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
</svg>
<p>https://webcifar.com</p>
</a>
</div>
<div class="close">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</div>
</div>
<div id="webCifar-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p>Info About the pen</p>
</div>
</div>
This is my snippet:
const sections = document.querySelectorAll("section");
const navLi = document.querySelectorAll(".navbar .nav-container a");
window.addEventListener("scroll", () => {
let current = "";
sections.forEach((section) => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (pageYOffset >= sectionTop - sectionHeight / 3) {
current = section.getAttribute("id");
}
});
navLi.forEach((li) => {
li.classList.remove("active");
if (li.classList.contains(current)) {
li.classList.add("active");
}
});
});
#import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght#0,300;0,400;0,700;1,300;1,400;1,700&family=Nunito+Sans:ital,wght#0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');
#font-face {
font-family: "neoneon";
src: url(../personal-portfolio/Assets/Fonts/Neoneon/Neoneon.ttf) format('truetype'), /* ../../<repo-name>Fonts/<font-name>.<format> is for using custom fonts on github*/
url(../personal-portfolio/Assets/Fonts/Neoneon/Neoneon.eot) format('embedded-opentype'), url(./Assets/Fonts/Neoneon/Neoneon.woff) format('woff'), /* ../Fonts/<font-name>.<format> is for using locally and on live server */
url(../personal-portfolio/Assets/Fonts/Neoneon/Neoneon.svg) format('svg'), url(../personal-portfolio/Assets/Fonts/Neoneon/Neoneon.woff2) format('woff2');
font-weight: normal;
font-style: normal;
}
html,
body {
height: 100%;
margin: 0;
max-width: 100vw;
overflow-x: hidden;
}
body {
scroll-behavior: smooth;
font-family: 'Nunito Sans', sans-serif;
}
::-webkit-scrollbar {
width: 3px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: rgba(225, 0, 225, 0.469);
}
::-webkit-scrollbar-thumb:hover {
background: rgb(225, 0, 225);
}
.navbar {
overflow: hidden;
background-color: white;
box-shadow: 0 2px #88888853;
width: 100vw;
position: fixed;
z-index: 2;
}
.nav-container {
float: right;
width: 35%;
display: flex;
justify-content: space-around;
}
.nav-container a {
padding: 16px;
color: black;
text-decoration: none;
}
.nav-container .active {
background-color: rgba(225, 0, 225, 0.469);
}
.nav-container a:hover:not(.active) {
background-color: rgba(0, 0, 0, 0.265);
}
#brief {
width: 100vw;
display: flex;
justify-content: center;
padding: 140px 0 140px;
background-image: url('./Assets/images/bg.jpg');
background-repeat: no-repeat;
background-size: cover;
}
#brief-container {
width: 40%;
display: flex;
flex-direction: column;
}
#brief-container .brief-pic {
display: flex;
justify-content: center;
z-index: 1;
}
#brief-container img {
border: 3px solid white;
border-radius: 50%;
width: 150px;
}
#brief-container .brief-text {
background-color: white;
gap: 20px;
text-align: center;
display: flex;
flex-direction: column;
margin: -70px;
padding: 90px 30px 40px;
}
#brief-container .brief-name {
font-family: neoneon;
font-size: 30px;
font-style: italic;
font-weight: bold;
}
#brief-container .brief-name span,
#about .about-title span {
color: rgb(225, 0, 225);
}
#brief-container .brief-description {
font-family: 'Comic Neue', cursive;
font-size: 20px;
}
#about {
width: 70vw;
display: flex;
flex-direction: column;
margin: 30px auto;
padding: 50px 0;
gap: 20px;
top: 0;
}
#about .about-title {
font-family: neoneon;
font-size: 40px;
font-weight: bold;
}
#about .about-content {
text-align: justify;
font-size: 20px;
}
#about,
#projects,
#contact {
scroll-margin-top: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<script src="./script.js"></script>
<title>Web</title>
</head>
<body>
<nav class="navbar">
<div class="nav-container">
<a class="brief active" href="index.html">Home</a>
<a class="about" href="#about">About</a>
<a class="project" href="#">Projects</a>
<a class="contact" href="#">Contact</a>
</div>
</nav>
<section id="brief">
<div id="brief-container">
<div class="brief-pic">
<img src="./Assets/images/pfp.jpg" alt="profile picture">
</div>
<div class="brief-text">
<div class="brief-name">
Web <span>Web</span>
</div>
<div class="brief-description">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus molestiae sit earum consectetur quae id eius esse magnam hic, cumque, consequuntur numquam possimus doloremque rem vitae. Illo exercitationem accusantium laboriosam.
</div>
</div>
</div>
</section>
<section id="about">
<div class="about-title">
About <span>Me</span>
</div>
<div class="about-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae ab consequatur, beatae architecto quidem sequi doloremque quam animi quasi est. Placeat impedit facere reiciendis ab deleniti, dolorum accusamus illo libero. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Recusandae, numquam quidem. Ratione qui neque esse aliquid quod impedit hic facilis aut, perspiciatis suscipit exercitationem sunt. Repudiandae ex accusamus blanditiis. Sed.</div>
</section>
</body>
</html>
So basically my HTML is like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<nav class="navbar">
<div class="nav-container">
<a class="brief active" href="#brief">Home</a>
<a class="about" href="#about">About</a>
<a class="contact" href="#">Contact</a>
</div>
</nav>
<section id="brief">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam facere unde itaque ea, minus commodi voluptate in a quibusdam minima dolores veniam, consectetur, quam eveniet architecto esse aut culpa iure!
</section>
<section id="about">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet ipsa tenetur sapiente magnam, reprehenderit odit ex. Delectus laborum omnis laudantium ea recusandae nihil, sequi, atque voluptatem tenetur inventore vero voluptatibus.
</section>
</body>
</html>
And JavaScript is:
const sections = document.querySelectorAll("section");
const navLi = document.querySelectorAll(".navbar .nav-container a");
window.addEventListener("scroll", () => {
let current = "";
sections.forEach((section) => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (pageYOffset >= sectionTop - sectionHeight / 3) {
current = section.getAttribute("id");
}
});
navLi.forEach((li) => {
li.classList.remove("active");
if (li.classList.contains(current)) {
li.classList.add("active");
}
});
});
I've looked a lot but I'm unable to find a solution.
Please help me find and correct the error in my code.
Remove overflow-x: hidden; from html and body.
const sections = document.querySelectorAll("section");
const navLi = document.querySelectorAll(".navbar .nav-container a");
window.addEventListener("scroll", () => {
let current = "";
sections.forEach((section) => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (pageYOffset >= sectionTop - sectionHeight / 3) {
current = section.getAttribute("id");
}
});
navLi.forEach((li) => {
li.classList.remove("active");
if (li.classList.contains(current)) {
li.classList.add("active");
}
});
});
#import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght#0,300;0,400;0,700;1,300;1,400;1,700&family=Nunito+Sans:ital,wght#0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');
#font-face {
font-family: "neoneon";
src: url(../personal-portfolio/Assets/Fonts/Neoneon/Neoneon.ttf) format('truetype'), /* ../../<repo-name>Fonts/<font-name>.<format> is for using custom fonts on github*/
url(../personal-portfolio/Assets/Fonts/Neoneon/Neoneon.eot) format('embedded-opentype'), url(./Assets/Fonts/Neoneon/Neoneon.woff) format('woff'), /* ../Fonts/<font-name>.<format> is for using locally and on live server */
url(../personal-portfolio/Assets/Fonts/Neoneon/Neoneon.svg) format('svg'), url(../personal-portfolio/Assets/Fonts/Neoneon/Neoneon.woff2) format('woff2');
font-weight: normal;
font-style: normal;
}
html,
body {
height: 100%;
margin: 0;
max-width: 100vw;
/* overflow-x: hidden; */
}
body {
scroll-behavior: smooth;
font-family: 'Nunito Sans', sans-serif;
}
::-webkit-scrollbar {
width: 3px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: rgba(225, 0, 225, 0.469);
}
::-webkit-scrollbar-thumb:hover {
background: rgb(225, 0, 225);
}
.navbar {
overflow: hidden;
background-color: white;
box-shadow: 0 2px #88888853;
width: 100vw;
position: fixed;
z-index: 2;
}
.nav-container {
float: right;
width: 35%;
display: flex;
justify-content: space-around;
}
.nav-container a {
padding: 16px;
color: black;
text-decoration: none;
}
.nav-container .active {
background-color: rgba(225, 0, 225, 0.469);
}
.nav-container a:hover:not(.active) {
background-color: rgba(0, 0, 0, 0.265);
}
#brief {
width: 100vw;
display: flex;
justify-content: center;
padding: 140px 0 140px;
background-image: url('./Assets/images/bg.jpg');
background-repeat: no-repeat;
background-size: cover;
}
#brief-container {
width: 40%;
display: flex;
flex-direction: column;
}
#brief-container .brief-pic {
display: flex;
justify-content: center;
z-index: 1;
}
#brief-container img {
border: 3px solid white;
border-radius: 50%;
width: 150px;
}
#brief-container .brief-text {
background-color: white;
gap: 20px;
text-align: center;
display: flex;
flex-direction: column;
margin: -70px;
padding: 90px 30px 40px;
}
#brief-container .brief-name {
font-family: neoneon;
font-size: 30px;
font-style: italic;
font-weight: bold;
}
#brief-container .brief-name span,
#about .about-title span {
color: rgb(225, 0, 225);
}
#brief-container .brief-description {
font-family: 'Comic Neue', cursive;
font-size: 20px;
}
#about {
width: 70vw;
display: flex;
flex-direction: column;
margin: 30px auto;
padding: 50px 0;
gap: 20px;
top: 0;
}
#about .about-title {
font-family: neoneon;
font-size: 40px;
font-weight: bold;
}
#about .about-content {
text-align: justify;
font-size: 20px;
}
#about,
#projects,
#contact {
scroll-margin-top: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<script src="./script.js"></script>
<title>Web</title>
</head>
<body>
<nav class="navbar">
<div class="nav-container">
<a class="brief active" href="index.html">Home</a>
<a class="about" href="#about">About</a>
<a class="project" href="#">Projects</a>
<a class="contact" href="#">Contact</a>
</div>
</nav>
<section id="brief">
<div id="brief-container">
<div class="brief-pic">
<img src="./Assets/images/pfp.jpg" alt="profile picture">
</div>
<div class="brief-text">
<div class="brief-name">
Web <span>Web</span>
</div>
<div class="brief-description">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus molestiae sit earum consectetur quae id eius esse magnam hic, cumque, consequuntur numquam possimus doloremque rem vitae. Illo exercitationem accusantium laboriosam.
</div>
</div>
</div>
</section>
<section id="about">
<div class="about-title">
About <span>Me</span>
</div>
<div class="about-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae ab consequatur, beatae architecto quidem sequi doloremque quam animi quasi est. Placeat impedit facere reiciendis ab deleniti, dolorum accusamus illo libero. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Recusandae, numquam quidem. Ratione qui neque esse aliquid quod impedit hic facilis aut, perspiciatis suscipit exercitationem sunt. Repudiandae ex accusamus blanditiis. Sed.</div>
</section>
</body>
</html>
So I'm trying to create a sliding function for a section in my html. But I noticed that the JavaScript isn't acknowledged by the html/browser. I'm using Eclipse editor. I have done everything I can... Please take a look. I won't say that the code is the problem, cuz everything looks good. Or is it where I stored the JavaScript file? Could the problem be from the directory?
Bad code or not, if I update a work, it should show on the launch, but like I said, it doesn't even acknowledge the presence of a JavaScript file. (Some elements has been removed from the html codes. The customer testimonial are four cards)
const leftArrow = document.getElementsByClassName("leftArrow");
const rightArrow = document.getElementsByClassName("rightArrow");
const slider = document.getElementsByClassName("slider");
let a = 0;
rightArrow.style.visibility = "hidden";
leftArrow.onclick = function() {
a = a - 550;
slider.style.left = a + "px";
//right arrow
if (a = 0) {
rightArrow.style.visibility = "hidden";
} else {
rightArrow.style.visibility = "visible";
}
// left arrow
if (a = -1650) {
leftArrowt.style.visibility = "hidden";
} else {
leftArrow.style.visibility = "visible";
}
};
rightArrow.onclick = function() {
a = a + 550;
slider.style.left = a + "px";
//right arrow
if (a = 0) {
rightArrow.style.visibility = "hidden";
} else {
rightArrow.style.visibility = "visible";
}
// left arrow
if (a = -1650) {
leftArrowt.style.visibility = "hidden";
} else {
leftArrow.style.visibility = "visible";
}
};
customer-testimonials {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/customer-testimonialbg.jpg);
background-size: cover;
background-position: center;
height: 100vh;
background-attachment: fixed;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/*.row h2{
font-size: 21px;
margin-bottom: 70px;
position: relative;
}
*/
/*
.row h2::after{
content: " ";
position: absolute;
width: 50%;
height: 5px;
background-color: #0066ac;
left: 50%;
bottom: -10px;
transform: translateX(-50%);
border-radius: 10px;
}
*/
.container {
width: 550px;
height: 330px;
border-radius: 12px;
box-shadow: 0 5px 55px rgba(51, 51, 51, 0.336);
position: relative;
overflow: hidden;
}
.slider {
width: auto;
height: 100%;
display: flex;
position: absolute;
top: 0;
left: 0;
transition: all .5s;
}
.slideBar {
width: 100%;
height: 60px;
position: absolute;
background-color: #f09f07;
bottom: 0;
left: 0;
padding: 0 60px;
display: flex;
align-items: center;
justify-content: space-between;
}
.slideBar span {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #fff;
display: grid;
place-items: center;
color: green;
cursor: pointer;
}
.card {
width: 550px;
height: 290px;
padding: 40px 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
}
.card::after {
content: " ";
position: absolute;
width: 110px;
height: 110px;
background-color: green;
top: 0;
right: 0;
border-bottom-left-radius: 100%;
}
.profile {
display: flex;
align-items: center;
}
.profile img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-right: 25px;
}
.name_job h2 {
color: #0066ac;
margin-bottom: 4px;
}
.card p {
font-size: 15px;
line-height: 22px;
opacity: .9;
}
<html>
<body>
<section class="customer-testimonials">
<div class="row">
<h2>Customer Testimonials</h2>
</div>
<div class="container">
<div class="slider">
<div class="card">
<div class="profile">
<img src="resources/img/danny-blinks.jpg" alt="dannyblinks">
<div class="name_job">
<h3>Danny Blinks</h3>
<p>Lorem ipsum dolor sit</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, quibusdam! Exercitationem eveniet molestiae itaque velit cum! Temporibus quod qui provident, doloribus laboriosam, esse nihil incidunt, atque doloremque sunt ab libero.</p>
</div>
<div class="card">
<div class="profile">
<img src="resources/img/jenny%20lawrence.jpg" alt="jennylawrence">
<div class="name_job">
<h3>Jenny Lawrence</h3>
<p>Lorem ipsum dolor sit</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, quibusdam! Exercitationem eveniet molestiae itaque velit cum! Temporibus quod qui provident, doloribus laboriosam, esse nihil incidunt, atque doloremque sunt ab libero.</p>
</div>
</div>
<div class="slideBar">
<span class="leftArrow"><i class="ion-ios-arrow-thin-left"></i></span>
<span class="rightArrow"><i class="ion-ios-arrow-thin-right"></i></span>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="resources/js/main.js"></script>
</body>
</html>
There is a couple of error and typos in your logic, let's fix them:
document.getElementsByClassName() returns a collection of elements with specified class, you're trying to access style property without indicating what item in the resulted collection you need to modify.
For this to work, access the element in the resulted array by indicating the index document.getElementsByClassName("leftArrow")[0];, or simply get the element by its id.
There is a typo trying to use leftArrow, you typed leftArrowt, fix that.
You are assigning values instead of comparing in your conditionals. if(a = 0) is assignment and your in block is expecting a condition. Use == or === depending your needs for this specific case. See this documentation
const leftArrow = document.getElementsByClassName("leftArrow")[0];
const rightArrow = document.getElementsByClassName("rightArrow")[0];
const slider = document.getElementsByClassName("slider")[0];
let a = 0;
rightArrow.style.visibility = "hidden";
leftArrow.onclick = function() {
a = a - 550;
slider.style.left = a + "px";
//right arrow
if (a == 0) {
rightArrow.style.visibility = "hidden";
} else {
rightArrow.style.visibility = "visible";
}
// left arrow
if (a == -1650) {
leftArrow.style.visibility = "hidden";
} else {
leftArrow.style.visibility = "visible";
}
};
rightArrow.onclick = function() {
a = a + 550;
slider.style.left = a + "px";
//right arrow
if (a == 0) {
rightArrow.style.visibility = "hidden";
} else {
rightArrow.style.visibility = "visible";
}
// left arrow
if (a == -1650) {
leftArrow.style.visibility = "hidden";
} else {
leftArrow.style.visibility = "visible";
}
};
.slider{
width: auto;
height: 100%;
display: flex;
position: absolute;
top: 0;
left: 0;
transition: all .5s;
}
.slideBar {
width: 100%;
height: 60px;
position: absolute;
background-color: #f09f07;
bottom: 0;
left: 0;
padding: 0 60px;
display: flex;
align-items: center;
justify-content: space-between;
}
.slideBar span{
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #fff;
display: grid;
place-items: center;
color: green;
cursor: pointer;
}
.card {
width: 550px;
height: 290px;
padding: 40px 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
}
.card::after{
content: " ";
position: absolute;
width: 110px;
height: 110px;
background-color: green;
top: 0;
right: 0;
border-bottom-left-radius: 100%;
}
.profile {
display: flex;
align-items: center;
}
.profile img{
width: 100px;
height: 100px;
border-radius: 50%;
margin-right: 25px;
}
.name_job h2{
color: #0066ac;
margin-bottom: 4px;
}
.card p{
font-size: 15px;
line-height: 22px;
opacity: .9;
}
customer-testimonials {
background-image:linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/customer-testimonialbg.jpg);
background-size: cover;
background-position: center;
height: 100vh;
background-attachment: fixed;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.container{
width: 550px;
height: 330px;
border-radius: 12px;
box-shadow: 0 5px 55px rgba(51, 51, 51, 0.336);
position: relative;
overflow: hidden;
}
<section class="customer-testimonials">
<div class="row">
<h2>Customer Testimonials</h2>
</div>
<div class="container">
<div class="slider">
<div class="card">
<div class="profile">
<img src="resources/img/danny-blinks.jpg" alt="dannyblinks">
<div class="name_job">
<h3>Danny Blinks</h3>
<p>Lorem ipsum dolor sit</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, quibusdam! Exercitationem eveniet molestiae itaque velit cum! Temporibus quod qui provident, doloribus laboriosam, esse nihil incidunt, atque doloremque sunt ab libero.</p>
</div>
<div class="card">
<div class="profile">
<img src="resources/img/jenny%20lawrence.jpg" alt="jennylawrence">
<div class="name_job">
<h3>Jenny Lawrence</h3>
<p>Lorem ipsum dolor sit</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, quibusdam! Exercitationem eveniet molestiae itaque velit cum! Temporibus quod qui provident, doloribus laboriosam, esse nihil incidunt, atque doloremque sunt ab libero.</p>
</div>
</div>
<div class="slideBar">
<span class="leftArrow"><i class="ion-ios-arrow-thin-left"></i></span>
<span class="rightArrow"><i class="ion-ios-arrow-thin-right"></i></span>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="resources/js/main.js"></script>
Keep working, is almost done!
const navbar = document.querySelector('.navbar');
let scrolled = false;
window.onscroll = function() {
if(window.scrollY > 100) {
navbar.classList.remove('top');
if(!scrolled) {
navbar.style.transform = 'translateY(-70px)';
}
setTimeout(() => {
navbar.style.transform = 'translateY(0px)';
scrolled = true;
}, 200);
} else {
navbar.classList.add('top');
scrolled = false;
}
}
const hamMenu = document.querySelector('#ham-menu');
const listItems = document.querySelectorAll('.item-list li');
loadEventListeners();
function loadEventListeners() {
hamMenu.addEventListener('click', extendMenu);
}
function extendMenu(e) {
hamMenu.style.transform = 'scale(1.5)';
setTimeout(() => hamMenu.style.transform = 'scale(1)', 300);
if(hamMenu.classList.contains('closed')) {
listItems.forEach(item => {
item.style.transform = 'translateX(0vw)'
});
hamMenu.classList.remove('closed');
} else {
listItems.forEach(item => {
item.style.transform = 'translateX(100vw)'
});
hamMenu.classList.add('closed');
}
}
const message = document.querySelector('#message');
const heightLimit = 200;
message.oninput = function() {
message.style.height = ""; /* Reset the height*/
message.style.height = message.scrollHeight + 'px';
}
/* UTILITIES */
/* Buttons */
.btn {
display: inline-block;
padding: 1rem 2.5rem;
border: none;
border-radius: 5px;
text-align: center;
cursor: pointer;
}
.btn:hover {
transition: all 0.15s ease-in-out;
transform: scale(1.05);
opacity: 0.85;
}
.btn:active {
transform: scale(1.1);
}
/* Text */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-light { color: var(--light); }
.text-dark { color: var(--dark); }
/* Background */
.bg-primary {
background: var(--primary);
color: #fff;
}
.bg-secondary {
background: var(--secondary);
color: #fff;
}
.bg-light {
background: var(--light);
color: #333;
}
.bg-dark {
background: var(--dark);
color: #fff;
}
.bg-white {
background: #fff;
color: #333;
}
.bg-outline {
background: transparent;
color: #fff;
border: 1px #fff solid;
}
/* Flex Icons */
.flex-icons {
display: flex;
justify-content: space-around;
padding: 3rem;
width: 100%;
}
.flex-icons .box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
flex: 1;
padding: 1rem 2rem;
}
.flex-icons img {
width: 20rem;
border-radius: 50%;
margin-bottom: 3rem;
}
/* Flex Row */
.flex-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.flex-row.flex-reverse {
flex-direction: row-reverse;
}
.flex-row .column {
flex-basis: 100%;
flex: 1;
}
.flex-row img{
object-fit: cover;
width: 100%;
height: 100%;
}
.flex-row .column .column-1,
.flex-row .column .column-2 {
height: 100%;
}
.flex-row .column .column-2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 2.5rem;
}
.flex-row .column .column-2 h4 {
font-weight: bold;
}
.flex-row .column .column-2 h2 {
font-size: 4rem;
margin: 1rem 0 2rem;
font-weight: 300;
}
.flex-row .column .column-2 p {
margin-bottom: 3rem;
}
/* Flex Grid */
.flex-grid {
padding: 2rem 2rem 4rem;
}
.flex-grid .row {
display: flex;
flex-direction: row;
width: 100%;
}
.flex-grid .row .column {
flex-basis: 100%;
padding: 0 0.3rem;
}
.flex-grid .row .column img {
width: 100%;
cursor: pointer;
transition: all 0.2s ease;
}
.flex-grid .row .column img:hover {
opacity: 0.9;
transform: scale(1.02);
}
.flex-grid .grid-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 4rem 1rem;
}
.flex-grid .grid-content h2 {
font-size: 4rem;
font-weight: 300;
margin: 2rem 0 3rem;
}
/* MAIN STYLE */
#import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
:root {
/* Colors */
--primary: #28a745;
--secondary: #0284d0;
--light: #f4f4f4;
--dark: #333;
}
html {
font-size: 62.5%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
line-height: 1.4;
font-size: 1.6rem;
color: #333;
background: #fff;
}
h1, h2, h3 {
font-weight: 400;
}
a {
text-decoration: none;
color: #333;
}
ul {
list-style: none;
}
/* Hero */
.hero {
background: url(../img/showcase.jpg) no-repeat center center/cover;
height: 100vh;
position: relative;
color: #fff;
}
.hero.blog-page {
height: 30vh;
background: url(../img/blog/blog-home.jpg) no-repeat center center/cover;
}
.hero.blog-page .content h1 {
font-size: 4rem;
}
.hero.blog-page .content h1 span {
font-weight: bold;
font-style: italic;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
.hero * {
z-index: 1;
}
.hero .content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
height: 100%;
}
.hero .content h1 {
font-size: 6.5rem;
font-weight: 300;
text-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.5);
}
.hero .content p {
font-size: 2.2rem;
font-weight: 300;
margin: 1.5rem 0 3rem;
text-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.5);
}
/* navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: #333;
opacity: 0.8;
color: #f4f4f4;
position: fixed;
top: 0;
width: 100%;
height: 7rem;
padding: 0 3rem;
transition: all 0.4s ease-in;
}
.navbar.top {
background: transparent;
}
.navbar a {
color: #fff;
}
.navbar ul {
display: flex;
align-items: center;
}
.navbar ul li a {
padding: 1rem 2rem;
margin: 0 0.5rem;
}
.navbar ul li a:hover {
border-bottom: 2px var(--primary) solid;
}
.navbar .logo {
transition: all 0.2s ease-in-out;
}
.navbar .logo:hover {
transform: scale(1.05);
}
.navbar .logo span {
font-weight: bold;
font-style: italic;
}
.navbar #ham-menu {
cursor: pointer;
}
/* Flex Icons */
.flex-icons .box i {
background: var(--primary);
color: #fff;
padding: 1.5rem;
border-radius: 50%;
margin-bottom: 2rem;
}
.flex-icons .box h3 {
margin-bottom: 2rem;
font-weight: bold;
font-size: 2rem;
}
/* Team */
#team .flex-icons .box h4 {
margin-bottom: 1rem;
}
#team .team-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 5rem 3rem;
}
#team .team-content h4 {
font-size: 1.8rem;
}
#team .team-content h2 {
font-size: 4.5rem;
font-weight: 300;
margin: 2rem 0;
}
/* Contact Form */
#contact .contact-form {
padding: 2rem;
width: 100%;
}
#contact .contact-form .form-control label {
display: block;
}
#contact .contact-form .form-control input,
#contact .contact-form textarea {
width: 100%;
height: 3.5rem;
padding: 0.5rem 1rem;
margin-bottom: 1rem;
border: 1px #ddd solid;
border-radius: 0.5rem;
font-family: 'Roboto', sans-serif;
}
#contact .contact-form textarea {
height: 15rem;
resize: vertical;
overflow: hidden;
}
#contact .contact-form .form-control input:focus,
#contact .contact-form textarea:focus {
outline: none;
border: 1px var(--primary) solid;
}
#contact .contact-form .form-control input::placeholder,
#contact .contact-form textarea::placeholder {
font-family: 'Roboto', sans-serif;
opacity: 1;
}
#contact .contact-form button {
display: inline-block;
}
#contact .column-2 h2 {
padding-left: 2rem;
}
/* Footer */
.footer {
height: 20rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.footer a {
color: #fff;
margin: 0 1.5rem;
}
.footer a:hover {
color: var(--primary);
}
.footer a i {
transition: 0.2 all ease-in-out;
}
.footer a i:hover {
transform: scale(1.1);
}
.footer a i:active {
transform: scale(1.15);
}
.footer p {
margin-top: 2rem;
}
.footer p span {
font-style: italic;
font-weight: bold;
}
/* Post Page */
.post .post-1 {
padding: 3rem;
}
.post img {
width: 50rem;
border-radius: 1rem;
display: block;
margin: 3rem auto;
}
.post .post-1 h2 {
font-size: 4rem;
font-weight: 300;
padding-top: 0.5rem;
}
.post .post-1 p {
margin-bottom: 2rem;
}
/* Extra */
.item-list li {
/* display: none; */
transition: all 0.5s ease;
transform: translateX(100vw);
}
.item-list .fa-bars {
transition: all 0.3s ease;
font-size: 2rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://kit.fontawesome.com/5c96e2fbe8.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="css/style.css" />
<title>EdgeLedger</title>
</head>
<body id="home">
<header class="hero">
<div class="navbar top">
<h1 class="logo">
<a href="index.html">
<span class="text-primary"
><i class="fas fa-book-open"></i> Edge</span
>Ledger
</a>
</h1>
<nav>
<ul class="item-list">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
<i id="ham-menu" class="fa-solid fa-bars closed"></i>
</ul>
</nav>
</div>
<div class="content">
<h1>The Sky Is The Limit</h1>
<p>Join us on our mission to change the world</p>
<a href="#about" class="btn bg-primary">
<i class="fas fa-chevron-right"></i>
Read More
</a>
</div>
</header>
<main id="about">
<!-- About: Services -->
<section class="services" id="services">
<div class="flex-icons">
<div class="box">
<i class="fa-solid fa-coins fa-2x"></i>
<h3>Financial Advice</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
atque!
</p>
</div>
<div class="box">
<i class="fa-solid fa-chart-column fa-2x"></i>
<h3>Stock Analysis</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
atque!
</p>
</div>
<div class="box">
<i class="fa-solid fa-handshake-angle fa-2x"></i>
<h3>Collaborations</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
atque!
</p>
</div>
</div>
</section>
<!-- About: Solutions -->
<section id="solutions">
<div class="flex-row">
<div class="column">
<div class="column-1">
<img src="img/meeting-2.jpg" alt="image" />
</div>
</div>
<div class="column bg-primary">
<div class="column-2">
<h4>What you're looking for</h4>
<h2>Our reputation speaks for us</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo
facere placeat ullam incidunt cum iste obcaecati aperiam
pariatur magni, eos optio sint culpa provident laboriosam quod
quia, suscipit alias deleniti. Natus soluta, recusandae iure
possimus accusantium hic perferendis rem quasi et vitae
explicabo esse doloribus quidem consectetur nobis! Eum, et.
</p>
<a href="#solutions" class="btn bg-outline">
<i class="fas fa-chevron-right"></i>
Read More
</a>
</div>
</div>
</div>
</section>
<!-- Cases -->
<section id="cases">
<div class="flex-grid">
<div class="grid-content">
<h4>This is what we do</h4>
<h2>Business Cases</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt,
voluptatum.
</p>
</div>
<div class="row">
<div class="column">
<img src="img/cases/cases1.jpg" alt="" />
<img src="img/cases/cases2.jpg" alt="" />
</div>
<div class="column">
<img src="img/cases/cases3.jpg" alt="" />
<img src="img/cases/cases4.jpg" alt="" />
</div>
<div class="column">
<img src="img/cases/cases5.jpg" alt="" />
<img src="img/cases/cases6.jpg" alt="" />
</div>
<div class="column">
<img src="img/cases/cases7.jpg" alt="" />
<img src="img/cases/cases8.jpg" alt="" />
</div>
</div>
</div>
</section>
<!-- Blog -->
<section id="blog">
<div class="flex-row flex-reverse">
<div class="column">
<div class="column-1">
<img src="img/blog/blog-home.jpg" alt="image" />
</div>
</div>
<div class="column bg-secondary">
<div class="column-2">
<h4>Blog | May 23 2022</h4>
<h2>Our recent restructuring plan</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo
facere placeat ullam incidunt cum iste obcaecati aperiam
pariatur magni, eos optio sint culpa provident laboriosam quod
quia, suscipit alias deleniti. Natus soluta, recusandae iure
possimus accusantium hic perferendis rem quasi et vitae
explicabo esse doloribus quidem consectetur nobis! Eum, et.
</p>
<a href="blog.html" class="btn bg-outline">
<i class="fas fa-chevron-right"></i>
Read More
</a>
</div>
</div>
</div>
</section>
<!-- Team -->
<section id="team">
<div class="team-content">
<h4>Who we are</h4>
<h2>Our Professional Team</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur,
expedita?
</p>
</div>
<div class="flex-icons">
<div class="box">
<img src="img/team/Chief Executive Officer.jpg" alt="" />
<h4>Jane Smith</h4>
<p>Chief Executive Officer</p>
</div>
<div class="box">
<img src="img/team/Chief Operating Officer.jpg" alt="" />
<h4>John Doe</h4>
<p>Chief Operating Officer</p>
</div>
<div class="box">
<img src="img/team/Chief Marketing Officer.jpg" alt="" />
<h4>Sara Rogers</h4>
<p>Chief Marketing Officer</p>
</div>
</div>
</section>
<section id="contact">
<div class="flex-row">
<div class="column">
<div class="column-1">
<img src="img/contact.jpg" alt="image" />
</div>
</div>
<div class="column bg-light">
<div class="column-2">
<h2>Contact Us</h2>
<form class="contact-form">
<div class="form-control">
<label for="name"></label>
<input
type="text"
name="name"
id="name"
placeholder="Full Name"
/>
</div>
<div class="form-control">
<label for="email"></label>
<input
type="email"
name="email"
id="email"
placeholder="Email Address"
/>
</div>
<div class="form-control">
<label for="phone"></label>
<input
type="text"
name="phone"
id="phone"
placeholder="Contact Number"
/>
</div>
<textarea
name="message"
id="message"
placeholder="Message"
></textarea>
<button type="submit" class="btn bg-primary">Send</button>
</form>
</div>
</div>
</div>
</section>
</main>
<footer class="footer bg-dark">
<div class="social">
<i class="fab fa-facebook fa-2x"></i>
<i class="fab fa-twitter fa-2x"></i>
<i class="fab fa-youtube fa-2x"></i>
<i class="fab fa-linkedin fa-2x"></i>
</div>
<p>
All Rights Reserved © 2022,
<span class="text-primary">Edge</span>Ledger
</p>
</footer>
<!-- Scripts -->
<script src="src/app.js"></script>
</body>
</html>
I'm relatively new to HTML/CSS and JavaScript and could really use some help on this one, as I've tried my best but to no avail. I will include the relevant code at the end. Thank you so much for your help in advance!
I'm experiencing some very weird behaviour with trying to animate a navbar menu. Basically, this is a part of a larger project in one of the courses that I'm taking, and I decided to redo the entire project and add more features here and there and experiment.
In the navbar (within the ul) I've decided to add a Font Awesome icon for a menu, then translate the list-items out of the view-port. When clicked, the icon triggers a function in the JavaScript file that translates the list-items into their place on the navbar, then translates them out of the view-port when pressed again. This is of course accompanied by a transition, and works/looks really well for a discount navbar menu.
One thing to explain before I ask my question is that there's another JavaScript function that turns the navbar's background from fully transparent to 80% opacity when scrolling further than 70px from the top, and turns it back to fully transparent when reaching the top again. Screenshot-1 (at the top) - Screenshot-2 (scrolled).
The problem is, when the navbar's background is at 80% opacity, a weird behaviour occurs where the navbar's background loses it's opacity and only the list-items retain the 80% opacity. This is an example. It gets even worse when I hover over it like in this screenshot. When clicking the menu icon again to retract them out, something even weirder like this sometimes happens, while the background on the navbar regains its correct opacity.
After trying a few things like removing the hover effect, not including the icon in the ul,..etc, I noticed that if I just set the opacity of the navbar to the default value 1, this weird behaviour stops, but I want to know why is this happening, as I don't want to simply give up on the slight transparency on the navbar.
I'm sure there's something I'm missing or not aware of, and I would love to learn this now to avoid a similar issue in the future. Is the opacity the issue, or is there something else causing this?
The relevant code is below. I may leave out some unnecessary CSS code in my CSS utility file that I'm certain doesn't have an effect on this. Here's a screenshot of how the header makes sense of the full header tag and its elements.
The property opacity affects on the whole elements not only background. You can use only background-color property to achieve what you want.
You can change the background color like this where c is the alpha(opacity) value. You can also use rgba(51,51,51,0.8) which is equivalent of #333c.
.navbar {
background-color: #333c;
}
.navbar.top {
background-color: transparent;
}
You can either just change the background color from javascript
navbar.style.backgroundColor = '#333c' // when scrolled
navbar.style.backgroundColor = 'transparent' // when scrolled
I have a task to make a blog thumbnail and blog content from input that looks like this: blog.html
This is the thumbnails which is located in the same HTML file as the input form: blog.html
This is the blog content and what I'm trying to achieve which is located in the different HTML file: blog-detail.html
I have 2 js files, blog.js for blog.html and blog-detail.js for blog-detail.html. All of the blog value is saved in let blogs = [] in blog.js
This is the snippet from the blog input and thumbnails:
let blogs = []
let month = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sept",
"Oct",
"Nov",
"Dec"
]
function addBlog(event) {
event.preventDefault()
let inputName = document.getElementById("inputProjectName").value
let inputContent = document.getElementById("inputDescription").value
let inputImage = document.getElementById("inputImage").files[0]
const projectDate = {
startDate: document.getElementById("inputStartDate").value,
endDate: document.getElementById("inputEndDate").value
}
inputImage = URL.createObjectURL(inputImage)
let cardIcons = {
html: document.querySelector('input[name="checkHtml"]').checked,
css: document.querySelector('input[name="checkCss"]').checked,
nodeJs: document.querySelector('input[name="checkNode"]').checked,
reactJs: document.querySelector('input[name="checkReact"]').checked
}
let blog = {
title: inputName,
date: projectDate,
content: inputContent,
icons: cardIcons,
image: inputImage
}
blogs.push(blog)
console.table(blogs)
renderCard()
}
function renderCard() {
let containerBlog = document.getElementById("contents")
containerBlog.innerHTML = '';
for (let i = 0; i < blogs.length; i++) {
containerBlog.innerHTML += `
<div id="contents" class="mp-card">
<!--MPC = My Project Card-->
<div class="mpc-img">
<img src="${blogs[i].image}" alt="">
</div>
<div class="mpc-title">
<a href="blog-detail.html">
<p>${blogs[i].title}</p>
</a>
</div>
<div class="mpc-duration">
<small>Durasi: 1 Bulan</small>
</div>
<div class="mpc-content">
${blogs[i].content}
</div>
<div class="mpc-icons">
${(blogs[i].icons.html === true) ? '<i class="fa-brands fa-html5"></i>' : ''}
${(blogs[i].icons.css === true) ? '<i class="fa-brands fa-css3-alt"></i>' : ''}
${(blogs[i].icons.nodeJs === true) ? '<i class="fa-brands fa-node-js"></i>' : ''}
${(blogs[i].icons.reactJs === true) ? '<i class="fa-brands fa-react"></i>' : ''}
</div>
<div class="mpc-mod">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
`
}
}
/* My Project */
/* FORM */
.mpi-title {
width: 100%;
margin: 50px 0px;
font-size: 30px;
text-align: center;
font-family: 'Lato', sans-serif !important;
font-weight: 700;
}
.mpi-form-container {
display: flex;
justify-content: center;
}
.mpi-form {
width: 540px;
display: flex;
justify-content: center;
}
.mpi-form label {
font-size: 25px;
font-weight: bold;
}
.mpi-form .mpi-name input,
.mpi-date input {
width: 100%;
height: 50px;
padding: 5px;
box-sizing: border-box;
font-size: 20px;
font-weight: 400;
padding-bottom: 5px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
border-radius: 8px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.mpi-date {
flex-grow: 1;
display: flex;
gap: 10px;
}
.mpi-date .date-start {
flex: 50%;
}
.mpi-date .date-end {
flex: 50%;
}
[type="date"]::-webkit-datetime-edit {
opacity: 0;
}
[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
width: 100%;
}
.mpi-desc textarea {
width: 100%;
font-size: 20px;
font-weight: 400;
padding: 8px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #c4c4c4;
box-sizing: border-box;
border-radius: 8px;
height: 200px;
}
.mpi-check {
display: flex;
gap: 120px;
margin: 20px 0px;
}
.mpi-check label {
font-size: 20px;
}
.check-left {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-right {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.check-label {
display: block;
position: relative;
padding-left: 35px;
color: #514a4a;
margin-bottom: 12px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.check-label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: white;
border-radius: 5px;
box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}
.check-label:hover input~.checkmark {
background-color: #ccc;
}
.check-label input:checked~.checkmark {
background-color: #2196F3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.check-label input:checked~.checkmark:after {
display: block;
}
.check-label .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.mpi-image {
overflow: hidden;
height: 50px;
width: 100%;
font-size: 20px;
font-weight: 400;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 20px;
background: #f4f3f3;
border: 1px solid #c4c4c4;
border-radius: 8px;
cursor: pointer;
padding-right: 8px;
box-shadow: 0 10px 10px rgb(0 0 0 / 26%);
}
.mpi-image label {
width: 100%;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}
.mpi-choose {
margin-top: -2px;
border-radius: 8px;
align-items: center;
padding: 13px 10px 13px 10px;
background-color: #e4e4e4;
color: #b2abab;
}
.mpi-attach {
padding-right: 10px;
}
.mpi-submit button {
margin-top: 30px;
float: right;
padding: 10px 30px;
border: none;
border-radius: 25px;
background-color: var(--btn);
color: white;
font-size: 15px;
font-weight: bold;
cursor: pointer;
margin-bottom: 110px;
}
.mpi-submit button:hover {
background-color: var(--btn-hover)
}
/* x FORM */
/* CARDS */
.mp-container {
width: 100%;
background-color: #f8f8f8;
padding-bottom: 70px;
}
.mp-card-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 20px 140px;
padding: 0px 70px 0px 70px;
}
.mp-title {
width: 100%;
display: flex;
font-size: 30px;
font-weight: bold;
justify-content: center;
padding: 40px 0px;
}
.mp-card {
width: 320px;
height: 440px;
max-width: 280px;
max-height: 440px;
padding: 10px 15px 10px 15px;
border: none;
border-radius: 10px;
background-color: white;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.mpc-img img {
border-radius: 10px;
width: 100%;
height: 200px;
object-fit: cover;
}
.mpc-title {
overflow: hidden;
margin-top: 10px;
font-weight: 900;
}
.mpc-title a {
text-decoration: none;
color: black;
}
.mpc-title a:hover {
text-decoration: underline
}
.mpc-content {
height: 60px;
overflow: hidden;
margin: 20px 0px 20px 0px;
text-align: justify;
word-wrap: break-word;
text-align: justify;
}
.mpc-icons {
display: flex;
font-size: 32px;
gap: 15px;
}
.mpc-mod {
display: flex;
gap: 10px;
text-align: center;
margin-top: 20px;
}
.mpc-mod button {
padding: 5px 10px;
border: 0;
border-radius: 4px;
background: var(--btn);
color: #fff;
cursor: pointer;
width: 50%;
}
.mpc-mod button:hover {
background-color: var(--btn-hover)
}
/* x CARDS x */
/* x My Project x */
<!--MPI = My Project Input-->
<div class="mpi-title">
<p>ADD BLOG</p>
</div>
<!--Form-->
<div class="mpi-form-container">
<div class="mpi-form">
<!--MP = My Project Input-->
<form onsubmit="addBlog(event)">
<div class="mpi-name">
<label for="inputProjectName">Project Name</label>
<input type="text" id="inputProjectName">
</div>
<div class="mpi-date">
<div class="date-start">
<label for="inputStartDate">Start Date</label>
<input type="date" id="inputStartDate">
</div>
<div class="date-end">
<label for="inputEndDate">End Date</label>
<input type="date" id="inputEndDate">
</div>
</div>
<div class="mpi-desc">
<label for="inputDescription">Description</label>
<textarea name="inputDescription" id="inputDescription"></textarea>
</div>
<div class="mpi-check-cont">
<label for="checkTitle">Technologies</label>
<div class="mpi-check">
<div class="check-left">
<div>
<label for="checkHtml" class="check-label">HTML
<input type="checkbox" id="checkHtml" name="checkHtml"check>
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkNode" class="check-label">Node Js
<input type="checkbox" id="checkNode" name="checkNode">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="check-right">
<div>
<label for="checkCss" class="check-label">CSS
<input type="checkbox" id="checkCss" name="checkCss">
<span class="checkmark"></span>
</label>
</div>
<div>
<label for="checkReact" class="check-label">React Js
<input type="checkbox" id="checkReact" name="checkReact">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
</div>
<div>
<label>Upload Image</label>
<div class="mpi-image">
<label for="inputImage">
<div class="mpi-choose">Choose</div>
<div class="mpi-attach"><i class="fa-solid fa-paperclip"></i></div>
</label>
<input type="file" id="inputImage" hidden />
</div>
</div>
<div class="mpi-submit">
<button type="submit">Submit</button>
</div>
</form>
</div>
</div>
<!--xFormx-->
<div class="mp-container">
<div class="mp-title">
<p>MY PROJECT</p>
</div>
<div id="contents" class="mp-card-container">
<div class="mp-card">
<!--MPC = My Project Card-->
<div class="mpc-img">
<img src="assets/phone1.jpg" alt="">
</div>
<div class="mpc-title">
<a href="blog-detail.html">
<p>Dumbways Mobile App - 2022</p>
</a>
</div>
<div class="mpc-duration">
<small>Duration: 2 Month</small>
</div>
<div class="mpc-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque temporibus excepturi deserunt consequuntur molestias adipisci corporis neque error. Delectus, dolorum dolorem neque vel earum ipsam ut fugiat quos distinctio blanditiis.
</div>
<div class="mpc-icons">
<i class="fa-brands fa-html5"></i>
<i class="fa-brands fa-css3-alt"></i>
<i class="fa-brands fa-node-js"></i>
<i class="fa-brands fa-react"></i>
</div>
<div class="mpc-mod">
<button>Edit</button>
<button>Delete</button>
</div>
</div>
</div>
</div>
This is the snippet from the blog detail:
document.getElementById("blog-detail").innerHTML = `
<div class="bd-title">
<p>${blogs[i].title}</p>
</div>
<div class="bd-idc">
<div class="idc-left">
<img src="${blogs[i].image}" alt="Blog Image">
</div>
<div class="idc-right">
<p>Duration</p>
<div class="bd-duration">
<div style="padding-left: 2px;">
<i class="fa-solid fa-calendar-days"></i>
<p>1 Jan 2021 - 1 Feb 2021</p>
</div>
<div>
<i class="fa-solid fa-clock"></i>
<p>1 Month</p>
</div>
</div>
<div class="bd-tech">
<p>Technologies</p>
<div class="i-tech">
<!--TI = Tech Icon-->
<div class="ti-left">
<div>
${(blogs[i].icons.html === true) ? '<i class="fa-brands fa-html5"></i>' : ''}
<p>HTML</p>
</div>
<div>
${(blogs[i].icons.nodeJs === true) ? '<i class="fa-brands fa-node-js"></i>' : ''}
<p>nodeJs </p>
</div>
</div>
<div class="ti-right">
<div>
${(blogs[i].icons.css === true) ? '<i class="fa-brands fa-css3-alt"></i>' : ''}
<p>CSS</p>
</div>
<div>
${(blogs[i].icons.reactJs === true) ? '<i class="fa-brands fa-react"></i>' : ''}
<p>ReactJs</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bd-content">
<p>
${blogs[i].content}
</p>
</div>
`;
/* Blog Detail */
.bd-title {
margin: 50px 0px;
text-align: center;
font-size: 40px;
font-weight: bold;
}
.bd-idc {
width: 100%;
display: flex;
padding: 0px 50px;
gap: 20px;
}
.idc-left {
flex: 55%;
overflow: hidden;
object-fit: cover;
padding: 0px 20px
}
.idc-left img {
width: 100%;
height: 400px;
object-fit: cover;
}
.idc-right {
flex: 45%
}
.idc-right p {
font-size: 30px;
font-weight: bold;
}
.bd-duration {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 20px;
}
.bd-duration p {
font-size: 30px;
font-weight: bold;
}
.bd-duration div {
display: flex;
align-items: center;
gap: 10px;
}
.bd-duration div p {
font-size: 20px;
}
.bd-duration div i {
font-size: 30px;
}
.bd-tech {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 20px;
}
.bd-tech p {
font-size: 30px;
font-weight: bold;
}
.i-tech {
display: flex;
gap: 0px 60px;
}
.ti-left div {
display: flex;
gap: 0px 20px;
margin-bottom: 20px;
}
.ti-right div {
display: flex;
gap: 0px 20px;
margin-bottom: 20px;
}
.bd-tech div p {
font-size: 20px;
}
.bd-tech div i {
font-size: 30px;
}
.bd-content {
margin-top: 50px;
padding: 0px 68px;
}
.bd-content p {
font-size: 20px;
text-align: justify;
}
/* x Blog Detail x */
<!--Blog Detail-->
<div id="blog-detail">
<!--BD = Blog Detail-->
<div class="bd-title">
<p>Blog Title</p>
</div>
<!--IDC = Image, Duration, Categories-->
<div class="bd-idc">
<div class="idc-left">
<img src="assets/phone5.jpg" alt="Blog Image">
</div>
<div class="idc-right">
<p>Duration</p>
<div class="bd-duration">
<div style="padding-left: 2px;">
<i class="fa-solid fa-calendar-days"></i>
<p>1 Jan 2022 - 1 Aug 2022</p>
</div>
<div>
<i class="fa-solid fa-clock"></i>
<p>8 Month</p>
</div>
</div>
<div class="bd-tech">
<p>Technologies</p>
<div class="i-tech">
<!--TI = Tech Icon-->
<div class="ti-left">
<div>
<i class="fa-brands fa-html5"></i>
<p>HTML</p>
</div>
<div>
<i class="fa-brands fa-node-js"></i>
<p>nodeJs </p>
</div>
</div>
<div class="ti-right">
<div>
<i class="fa-brands fa-css3-alt"></i>
<p>CSS</p>
</div>
<div>
<i class="fa-brands fa-react"></i>
<p>ReactJs</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bd-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Suscipit libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
libero sapiente, minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero sapiente,
minus atque a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit libero sapiente, minus atque
a nesciunt ipsum? Illum sapiente odio provident maxime aut nihil voluptatem officia voluptatibus vel! Necessitatibus, ipsam esse.
</p>
</div>
</div>
<!--xBlog Detailx-->
What I'm trying to achieve is when I click the thumbnail title and when directed I want the blog-content.html to show the value that I input from blog.html using innerHTML
I've tried to use module.exports, script type="module" and importing both js files in blog-detail.html but nothing work :(
and I've tried to browse for more solutions but my English isn't very good for browsing, I don't know the keyword to search for more solutions.
Sorry for the long question, Thanks.
you can use local Storage. You can pass you blogs array to from you blogs.js file to local Storage by using localStorage.setItem(); function and now you can retrive value from your another js file (blog-detail.js) by using localStorage.getItem().
If you want to learn more about how to use them Go Here
I hope this solves your problem.
I have a problem. I made the following tabbedPage, but the hidden content still takes up space. Here is the code:
let tabHeader = document.getElementsByClassName("tabbedpage-header")[0];
let tabIndicator = document.getElementsByClassName("tabbedpage-indicator")[0];
let tabContent = document.getElementsByClassName("tabbedpage-content")[0];
let tabsPane = tabHeader.getElementsByTagName("div");
for (let i = 0; i < tabsPane.length; i++) {
tabsPane[i].addEventListener("click", function() {
tabHeader.getElementsByClassName("active")[0].classList.remove("active");
tabsPane[i].classList.add("active");
tabContent.getElementsByClassName("active")[0].classList.remove("active");
tabContent.getElementsByTagName("div")[i].classList.add("active");
tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
});
}
/*--------------General----------------*/
body {
font-family: Arial;
}
.container {
width: 100%;
max-width: 1300px;
margin: 0 auto;
}
/*-------------------------------------*/
/*-------------TabbedPage---------------*/
.tabbedpage {
padding: 20px 0px;
}
.tabbedpage .tabbedpage-header {
height: 60px;
display: flex;
align-items: center;
}
.tabbedpage .tabbedpage-header>div {
width: calc(100% / 2);
text-align: center;
color: #888;
font-weight: 600;
cursor: pointer;
font-size: 20px;
text-transform: uppercase;
outline: none;
}
.tabbedpage .tabbedpage-header>div>i {
display: block;
margin-bottom: 5px;
}
.tabbedpage .tabbedpage-header>div.active {
color: #d81e05;
display: block;
}
.tabbedpage .tabbedpage-indicator {
position: relative;
width: calc(100% / 2);
height: 5px;
background: #d81e05;
left: 0px;
border-radius: 5px;
transition: all 500ms ease-in-out;
}
.tabbedpage .tabbedpage-content {
position: relative;
height: calc(100% - 60px);
padding: 10px 5px;
}
.tabbedpage .tabbedpage-content>div {
width: 100%;
top: 0;
left: 0;
opacity: 0;
transition: opacity 500ms ease-in-out 0ms, transform 500ms ease-in-out 0ms;
}
.tabbedpage .tabbedpage-content>div.active {
opacity: 1;
}
/*--------------------------------------*/
/*---------------Footer-----------------*/
footer {
width: 100%;
}
footer .red-bar {
display: flex;
align-items: center;
background: #d81e05;
height: 120px;
}
footer .red-bar .content {
display: flex;
align-items: center;
justify-content: flex-end;
}
/*------------------------------------------*/
<div class="container">
<div class="tabbedpage">
<div class="tabbedpage-header">
<div class="active">
statistics
</div>
<div>
user management
</div>
</div>
<div class="tabbedpage-indicator"></div>
<div class="tabbedpage-content">
<div class="active">
<h2>This is statistics section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error neque saepe commodi blanditiis fugiat nisi aliquam ratione porro quibusdam in, eveniet accusantium cumque. Dolore officia reprehenderit perferendis quod libero omnis.</p>
</div>
<div>
<h2>This is the user management section</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
</div>
</div>
</div>
</div>
<footer>
<div class="red-bar">
<div class="container content">
<p> Bel nu ons contact center <br> <b>023 751 06 06</b> </p>
</div>
</div>
</footer>
Now the TabbedPage is working the way I want, except that the content of a tab always uses space while not being showed. I can fix it by setting position: absolute;, but then the content goes trough the footer, which is also not allowed. So how can I remove the space that a hidden tab uses, while not going trough the footer?
You should use display instead of opacity.
But you should also set div to display: block; in div.active as below:
.tabbedpage .tabbedpage-content>div.active, .tabbedpage .tabbedpage-content>div.active div {
display: block; /* show it */
}
Pay attention that if you want to set div into div.active with a different displaythan you need to add !important to make sure that it will be taken correctly.
You also need to change some js in your for loop as below:
/** IF to point to the right div **/
if(tabsPane[i].className.match(/\bstat\b/)){
document.getElementById("stat").classList.add('active');
document.getElementById("userManagement").classList.remove('active');
}else if(tabsPane[i].className.match(/\buserManagement\b/)){
document.getElementById("userManagement").classList.add('active');
document.getElementById("stat").classList.remove('active');
}
And to make it works I was adding classes and id such as stat and userManagement because it was not identifying correctly the div anymore.
DEMO (Simple example):
let tabHeader = document.getElementsByClassName("tabbedpage-header")[0];
let tabIndicator = document.getElementsByClassName("tabbedpage-indicator")[0];
let tabContent = document.getElementsByClassName("tabbedpage-content")[0];
let tabsPane = tabHeader.getElementsByTagName("div");
for (let i = 0; i < tabsPane.length; i++) {
tabsPane[i].addEventListener("click", function() {
tabHeader.getElementsByClassName("active")[0].classList.remove("active");
tabsPane[i].classList.add("active");
/*tabContent.getElementsByClassName("active")[0].classList.remove("active");
tabContent.getElementsByTagName("div")[i].classList.add("active");*/
/** IF to point to the right div **/
if(tabsPane[i].className.match(/\bstat\b/)){
document.getElementById("stat").classList.add('active');
document.getElementById("userManagement").classList.remove('active');
}else if(tabsPane[i].className.match(/\buserManagement\b/)){
document.getElementById("userManagement").classList.add('active');
document.getElementById("stat").classList.remove('active');
}
tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
});
}
/*--------------General----------------*/
body {
font-family: Arial;
}
.container {
width: 100%;
max-width: 1300px;
margin: 0 auto;
}
/*-------------------------------------*/
/*-------------TabbedPage---------------*/
.tabbedpage {
padding: 20px 0px;
}
.tabbedpage .tabbedpage-header {
height: 60px;
display: flex;
align-items: center;
}
.tabbedpage .tabbedpage-header>div {
width: calc(100% / 2);
text-align: center;
color: #888;
font-weight: 600;
cursor: pointer;
font-size: 20px;
text-transform: uppercase;
outline: none;
}
.tabbedpage .tabbedpage-header>div>i {
display: block;
margin-bottom: 5px;
}
.tabbedpage .tabbedpage-header>div.active {
color: #d81e05;
display: block;
}
.tabbedpage .tabbedpage-indicator {
position: relative;
width: calc(100% / 2);
height: 5px;
background: #d81e05;
left: 0px;
border-radius: 5px;
transition: all 500ms ease-in-out;
}
.tabbedpage .tabbedpage-content {
position: relative;
height: calc(100% - 60px);
padding: 10px 5px;
}
.tabbedpage .tabbedpage-content>div {
width: 100%;
top: 0;
left: 0;
display: none; /* hide it */
transition: opacity 500ms ease-in-out 0ms, transform 500ms ease-in-out 0ms;
}
.tabbedpage .tabbedpage-content>div.active, .tabbedpage .tabbedpage-content>div.active div {
display: block; /* show it */
}
/*--------------------------------------*/
/*---------------Footer-----------------*/
footer {
width: 100%;
}
footer .red-bar {
display: flex;
align-items: center;
background: #d81e05;
height: 120px;
}
footer .red-bar .content {
display: flex;
align-items: center;
justify-content: flex-end;
}
/*------------------------------------------*/
<div class="container">
<div class="tabbedpage">
<div class="tabbedpage-header">
<div class="stat active">
statistics
</div>
<div class="userManagement">
user management
</div>
</div>
<div class="tabbedpage-indicator"></div>
<div class="tabbedpage-content">
<div id="stat" class="active">
<h2>This is statistics section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error neque saepe commodi blanditiis fugiat nisi aliquam ratione porro quibusdam in, eveniet accusantium cumque. Dolore officia reprehenderit perferendis quod libero omnis.</p>
<div>DIV IN DIV 2</div>
</div>
<div id="userManagement">
<h2>This is the user management section</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
</div>
</div>
</div>
</div>
<footer>
<div class="red-bar">
<div class="container content">
<p> Bel nu ons contact center <br> <b>023 751 06 06</b> </p>
</div>
</div>
</footer>
DEMO (Large example):
let tabHeader = document.getElementsByClassName("tabbedpage-header")[0];
let tabIndicator = document.getElementsByClassName("tabbedpage-indicator")[0];
let tabContent = document.getElementsByClassName("tabbedpage-content")[0];
let tabsPane = tabHeader.getElementsByTagName("div");
for (let i = 0; i < tabsPane.length; i++) {
tabsPane[i].addEventListener("click", function() {
tabHeader.getElementsByClassName("active")[0].classList.remove("active");
tabsPane[i].classList.add("active");
/*tabContent.getElementsByClassName("active")[0].classList.remove("active");
tabContent.getElementsByTagName("div")[i].classList.add("active");*/
/** IF to point to the right div **/
if(tabsPane[i].className.match(/\bstat\b/)){
document.getElementById("stat").classList.add('active');
document.getElementById("userManagement").classList.remove('active');
}else if(tabsPane[i].className.match(/\buserManagement\b/)){
document.getElementById("userManagement").classList.add('active');
document.getElementById("stat").classList.remove('active');
}
tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
});
}
/*--------------General----------------*/
body {
font-family: Arial;
}
.container {
width: 100%;
max-width: 1300px;
margin: 0 auto;
}
/*-------------------------------------*/
/*-------------TabbedPage---------------*/
.tabbedpage {
padding: 20px 0px;
}
.tabbedpage .tabbedpage-header {
height: 60px;
display: flex;
align-items: center;
}
.tabbedpage .tabbedpage-header>div {
width: calc(100% / 2);
text-align: center;
color: #888;
font-weight: 600;
cursor: pointer;
font-size: 20px;
text-transform: uppercase;
outline: none;
}
.tabbedpage .tabbedpage-header>div>i {
display: block;
margin-bottom: 5px;
}
.tabbedpage .tabbedpage-header>div.active {
color: #d81e05;
display: block;
}
.tabbedpage .tabbedpage-indicator {
position: relative;
width: calc(100% / 2);
height: 5px;
background: #d81e05;
left: 0px;
border-radius: 5px;
transition: all 500ms ease-in-out;
}
.tabbedpage .tabbedpage-content {
position: relative;
height: calc(100% - 60px);
padding: 10px 5px;
}
.tabbedpage .tabbedpage-content>div {
width: 100%;
top: 0;
left: 0;
display: none; /* hide it */
transition: opacity 500ms ease-in-out 0ms, transform 500ms ease-in-out 0ms;
}
.tabbedpage .tabbedpage-content>div.active, .tabbedpage .tabbedpage-content>div.active div {
display: block; /* show it */
}
/*--------------------------------------*/
/*-------------Statistics---------------*/
.activity-24h-title {
color: #000000;
font-size: 30px;
font-weight: bold;
}
.activity-24h {
width: 100%;
height: 125px;
background-color: #F6F6F6;
display: flex !important; /** Add !important **/
align-items: center;
justify-content: center;
}
.activity-24h .stat-frame {
position: relative;
width:calc(100% / 5 - (4 * 2px));
display: flex !important; /** Add !important **/
flex-direction: column
}
.activity-24h .stat-frame-title {
color: #000000;
font-size: 22px;
font-weight: bold;
text-align: center;
padding-bottom: 15px;
}
.activity-24h .stat-frame-value {
color: #d81e05;
font-size: 42px;
font-weight: bold;
width: 100%;
text-align: center;
}
.activity-24h .seperation-border {
width: 2px;
height: 80%;
background-color: #C4C4C4;
}
/*--------------------------------------*/
/*---------------Footer-----------------*/
footer {
width: 100%;
}
footer .red-bar {
display: flex;
align-items: center;
background: #d81e05;
height: 120px;
}
footer .red-bar .content {
display: flex;
align-items: center;
justify-content: flex-end;
}
<div class="tabbedpage">
<div class="tabbedpage-header">
<div class="stat active">
Statistieken
</div>
<div class="userManagement">
Gebruikersbeheer
</div>
</div>
<div class="tabbedpage-indicator"></div>
<div class="tabbedpage-content">
<div id="stat" class="active">
<span class="activity-24h-title">Afgelopen 24 uur</span>
<div class="activity-24h">
<div class="stat-frame">
<span class="stat-frame-title">Nieuwe gebruikers</span>
<span class="stat-frame-value">513</span>
</div>
<div class="seperation-border"></div>
<div class="stat-frame">
<span class="stat-frame-title">Actieve gebruikers</span>
<span class="stat-frame-value">1054</span>
</div>
<div class="seperation-border"></div>
<div class="stat-frame">
<span class="stat-frame-title">Matches</span>
<span class="stat-frame-value">1577</span>
</div>
<div class="seperation-border"></div>
<div class="stat-frame">
<span class="stat-frame-title">Gerapporteerd</span>
<span class="stat-frame-value">33</span>
</div>
<div class="seperation-border"></div>
<div class="stat-frame">
<span class="stat-frame-title">Geblokkeerd</span>
<span class="stat-frame-value">9</span>
</div>
</div>
</div>
<div id="userManagement">
<h2>This is about section</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
</div>
</div>
</div>
<footer>
<div class="red-bar">
<div class="container content">
<p> Bel nu ons contact center <br> <b>023 751 06 06</b> </p>
</div>
</div>
</footer>
You can achieve that by using display: none and display: block instead of opacity: 0 and opacity: 1 to hide the inactive element:
let tabHeader = document.getElementsByClassName("tabbedpage-header")[0];
let tabIndicator = document.getElementsByClassName("tabbedpage-indicator")[0];
let tabContent = document.getElementsByClassName("tabbedpage-content")[0];
let tabsPane = tabHeader.getElementsByTagName("div");
for (let i = 0; i < tabsPane.length; i++) {
tabsPane[i].addEventListener("click", function() {
tabHeader.getElementsByClassName("active")[0].classList.remove("active");
tabsPane[i].classList.add("active");
tabContent.getElementsByClassName("active")[0].classList.remove("active");
tabContent.getElementsByTagName("div")[i].classList.add("active");
tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
});
}
/*--------------General----------------*/
body {
font-family: Arial;
}
.container {
width: 100%;
max-width: 1300px;
margin: 0 auto;
}
/*-------------------------------------*/
/*-------------TabbedPage---------------*/
.tabbedpage {
padding: 20px 0px;
}
.tabbedpage .tabbedpage-header {
height: 60px;
display: flex;
align-items: center;
}
.tabbedpage .tabbedpage-header>div {
width: calc(100% / 2);
text-align: center;
color: #888;
font-weight: 600;
cursor: pointer;
font-size: 20px;
text-transform: uppercase;
outline: none;
}
.tabbedpage .tabbedpage-header>div>i {
display: block;
margin-bottom: 5px;
}
.tabbedpage .tabbedpage-header>div.active {
color: #d81e05;
display: block;
}
.tabbedpage .tabbedpage-indicator {
position: relative;
width: calc(100% / 2);
height: 5px;
background: #d81e05;
left: 0px;
border-radius: 5px;
transition: all 500ms ease-in-out;
}
.tabbedpage .tabbedpage-content {
position: relative;
height: calc(100% - 60px);
padding: 10px 5px;
}
.tabbedpage .tabbedpage-content>div {
width: 100%;
top: 0;
left: 0;
display: none; /* hide it */
transition: opacity 500ms ease-in-out 0ms, transform 500ms ease-in-out 0ms;
}
.tabbedpage .tabbedpage-content>div.active {
display: block; /* show it */
}
/*--------------------------------------*/
/*---------------Footer-----------------*/
footer {
width: 100%;
}
footer .red-bar {
display: flex;
align-items: center;
background: #d81e05;
height: 120px;
}
footer .red-bar .content {
display: flex;
align-items: center;
justify-content: flex-end;
}
/*------------------------------------------*/
<div class="container">
<div class="tabbedpage">
<div class="tabbedpage-header">
<div class="active">
statistics
</div>
<div>
user management
</div>
</div>
<div class="tabbedpage-indicator"></div>
<div class="tabbedpage-content">
<div class="active">
<h2>This is statistics section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error neque saepe commodi blanditiis fugiat nisi aliquam ratione porro quibusdam in, eveniet accusantium cumque. Dolore officia reprehenderit perferendis quod libero omnis.</p>
</div>
<div>
<h2>This is the user management section</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi minus exercitationem vero, id autem fugit assumenda a molestiae numquam at, quisquam cumque. Labore eligendi perspiciatis quia incidunt quaerat ut ducimus?</p>
</div>
</div>
</div>
</div>
<footer>
<div class="red-bar">
<div class="container content">
<p> Bel nu ons contact center <br> <b>023 751 06 06</b> </p>
</div>
</div>
</footer>
You can use document.write() to edit the document so you can remove add the div when required. Example:
function runcode(){
document.write("<div> hi </div>")
}
#button{
background-color: red;
padding: 15px 32px;
}
#button:hover{
background-color: pink;
}
<button onclick="runcode()" id="button">replace with a div with hi inside</button>
I think you should be using display instead of opacity, just as #MaxiGui wrote. You can be a bit fancy too, and create a tag for it:
invisible {
display:none;
}
As a quick workaround you can modify footer style as following.
footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
}