How to close side menu when the dark area is clicked? - javascript

I built a simple side navigation. If you run the snippet and resize the window to smaller size you'll see a red square. If you click on it, the menu opens.
The menu opens fine, however I'd like to close the menu when I click the dark area, not the X. I tried adding a "click" eventListener to the body itself and remove the "is-open" class but didn't work. I spent several hours thinking what could be the problem and finally decided to post here and ask for your suggestion.
"use strict";
const menuToggle = document.querySelector(".menu-toggle");
const menuClose = document.querySelector(".menu-close");
const nav = menuToggle.parentElement;
menuToggle.addEventListener("click", event => {
event.preventDefault();
nav.classList.add("is-open");
document.body.style.backgroundColor = "rgba(0,0,0,0.5)";
});
menuClose.addEventListener("click", event => {
event.preventDefault();
menuToggle.nextElementSibling.style.width = null;
document.body.style.backgroundColor = null;
nav.classList.remove("is-open");
});
:root {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.menu-toggle {
width: 40px;
height: 40px;
border: 1px solid red;
cursor: pointer;
}
.menu-container {
position: absolute;
background: lightskyblue;
height: 100vh;
width: 0;
transition: width 0.4s ease-in-out;
top: 0;
left: 0;
overflow: auto;
z-index: 1;
}
.menu-close {
position: absolute;
right: 1em;
}
.nav-menu {
list-style: none;
padding-left: 0;
margin: 50px 0 0 0;
}
.nav-menu > li + li {
border-top: 1px solid #fff;
}
.nav-menu > li > a {
display: block;
color: #000;
padding: 0.8em 1em;
font-size: 1.1rem;
text-decoration: none;
text-transform: uppercase;
}
.nav.is-open .menu-container {
width: 200px;
}
.menu-close::before {
content: "\00d7";
font-size: 2.6rem;
}
/*#media screen and (min-width: 37.5em) {*/
#media screen and (min-width: 40.5em) {
body {
background: #fff !important;
}
.menu-toggle {
display: none;
}
.nav.is-open .menu-container {
width: auto;
height: auto;
}
.menu-container {
position: initial;
height: auto;
width: auto;
overflow: hidden;
}
.menu-close {
display: none;
}
.nav-menu {
display: flex;
position: static;
justify-content: center;
margin: 0;
}
.nav-menu > li {
margin-left: 1em;
}
.nav-menu > li + li {
border-top: initial;
}
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="hamburgerside.css">
<title>Hamburger Menu Side</title>
</head>
<body>
<nav class="nav">
<div class="menu-toggle">
<span class="menu-toggle__linecenter"></span>
</div>
<div class="menu-container">
<span class="menu-close"></span>
<ul class="nav-menu">
<li>Home</li>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</div>
</nav>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusamus accusantium aliquid consequatur facere illum
incidunt magnam magni maiores nam neque numquam omnis
perferendis porro quae quibusdam, quos sed tenetur ullam.
</p>
</main>
<script src="hamburgerside.js"></script>
</body>
</html>

So if I understand correctly what you are trying to do, you will need to use document rather than body for the click event. You will also need to use event.stopImmediatePropagation() rather than event.preventDefault() which will allow the first click but not the second. Also in the condition you would need to only run the click event if anywhere but the menu is clicked.
NOTE: I had to remove your media query as it was preventing the toggle-menu from being displayed.
"use strict";
const menuToggle = document.querySelector(".menu-toggle");
const menuClose = document.querySelector(".menu-close");
const nav = menuToggle.parentElement;
menuToggle.addEventListener("click", event => {
event.stopImmediatePropagation();
nav.classList.add("is-open");
document.body.style.backgroundColor = "rgba(0,0,0,.5)";
});
document.addEventListener("click", event => {
if (nav.classList.contains("is-open") && !event.target.classList.contains("nav-menu")) {
menuToggle.nextElementSibling.style.width = null;
document.body.style.backgroundColor = "#fff";
nav.classList.remove("is-open");
}
});
:root {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.menu-toggle {
width: 40px;
height: 40px;
border: 1px solid red;
cursor: pointer;
}
.menu-container {
position: absolute;
background: lightskyblue;
height: 100vh;
width: 0;
transition: width 0.4s ease-in-out;
top: 0;
left: 0;
overflow: auto;
z-index: 1;
}
.menu-close {
position: absolute;
right: 1em;
}
.nav-menu {
list-style: none;
padding-left: 0;
margin: 50px 0 0 0;
}
.nav-menu > li + li {
border-top: 1px solid #fff;
}
.nav-menu > li > a {
display: block;
color: #000;
padding: 0.8em 1em;
font-size: 1.1rem;
text-decoration: none;
text-transform: uppercase;
}
.nav.is-open .menu-container {
width: 200px;
}
.menu-close::before {
content: "\00d7";
font-size: 2.6rem;
}
}
<nav class="nav">
<div class="menu-toggle">
<span class="menu-toggle__linecenter"></span>
</div>
<div class="menu-container">
<span class="menu-close"></span>
<ul class="nav-menu">
<li>Home</li>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</div>
</nav>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Accusamus accusantium aliquid consequatur facere illum
incidunt magnam magni maiores nam neque numquam omnis
perferendis porro quae quibusdam, quos sed tenetur ullam.
</p>
</main>

Here is what you want, I added a new div next to the menu with a class hidden and for the script when the event.target is equal to that div or the close button then will fire the function. check it out and let me know if you have any questions.
const menuToggle = document.querySelector(".menu-toggle");
const menuClose = document.querySelector(".menu-close");
const menuActive = document.querySelector(".menu_active");
const nav = menuToggle.parentElement;
const log = console.log;
const app = {
init: () => {
app.menuToggle();
},
menuToggle: () => {
menuToggle.addEventListener("click", event => {
event.preventDefault();
nav.classList.add("is-open");
menuActive.classList.remove('hidden');
app.closeMenu();
});
log('working')
},
closeMenu: () => {
if (nav.classList.contains('is-open')) {
document.addEventListener("click", event => {
event.preventDefault();
let closeMenu = event.target.className;
if (closeMenu === 'menu_active' || closeMenu === 'menu-close') {
//log(event.target.className)
menuToggle.nextElementSibling.style.width = null;
menuActive.classList.add('hidden');
nav.classList.remove("is-open");
}
});
}
}
};
document.addEventListener('DOMContentLoaded', app.init())
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.menu_active {
background: rgba(0, 0, 0, 0.5);
position: absolute;
height: 100vh;
width: calc(100vw - 200px);
top: 0;
right: 0;
}
.hidden {
visibility: hidden;
display: none;
}
.menu-toggle {
width: 40px;
height: 40px;
border: 1px solid red;
cursor: pointer;
}
.menu-container {
position: absolute;
background: lightskyblue;
height: 100vh;
width: 0;
transition: width 0.4s ease-in-out;
top: 0;
left: 0;
overflow: auto;
z-index: 1;
}
.menu-close {
position: absolute;
right: 1em;
}
.nav-menu {
list-style: none;
padding-left: 0;
margin: 50px 0 0 0;
}
.nav-menu>li+li {
border-top: 1px solid #fff;
}
.nav-menu>li>a {
display: block;
color: #000;
padding: 0.8em 1em;
font-size: 1.1rem;
text-decoration: none;
text-transform: uppercase;
}
.nav.is-open .menu-container {
width: 200px;
}
.menu-close::before {
content: "\00d7";
font-size: 2.6rem;
}
/*#media screen and (min-width: 37.5em) {*/
#media screen and (min-width: 40.5em) {
body {
background: #fff !important;
}
.menu-toggle {
display: none;
}
.nav.is-open .menu-container {
width: auto;
height: auto;
}
.menu-container {
position: initial;
height: auto;
width: auto;
overflow: hidden;
}
.menu-close {
display: none;
}
.nav-menu {
display: flex;
position: static;
justify-content: center;
margin: 0;
}
.nav-menu>li {
margin-left: 1em;
}
.nav-menu>li+li {
border-top: initial;
}
}
<body>
<nav class="nav">
<div class="menu-toggle">
<span class="menu-toggle__linecenter"></span>
</div>
<div class="menu-container">
<span class="menu-close"></span>
<ul class="nav-menu">
<li>Home</li>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</div>
<div class="menu_active hidden"></div>
</nav>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus accusantium aliquid consequatur facere illum incidunt magnam magni maiores nam neque numquam omnis perferendis porro quae quibusdam, quos sed tenetur ullam.
</p>
</main>
</body>

Related

Change "active" class in navbar on scrolling - JavaScript, HTML

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>

trying to place a bottom bar along side with a responsive sidebar

I have been trying to build a website layout with a responsive sidebar and a bottom navbar --both of which have a fixed position--
I want the bottom navbar to get pushed and resized by the sidebar in wider viewports.
I have tried using flexbox utility in css and bootstrap , but that didn't solve anything. I had the position property of the bottom navbar set to absolute and i wrapped it in a container with the maion content of the page, but that also didn't work
var sideBarOpen = false;
function openNav(){
document.getElementById("sideNav").style.width = "250px";
// document.getElementById("main").style.marginLeft = "250px";
// document.getElementById("main").style.opacity = "0.1";
document.getElementById("main").style.filter = "blur(2px)";
sideBarOpen = true;
}
function closeNav(){
document.getElementById("sideNav").style.width = "0";
// document.getElementById("main").style.marginLeft = "0";
// document.getElementById("main").style.opacity = "1";
document.getElementById("main").style.filter = "blur(0)";
sideBarOpen = false;
}
$( document ).click(function( event ) {
var target = $( event.target );
if(!target.is("#sideNav") && !$("#sideNav").has(event.target).length && !target.is(".sidebar-toggle") && sideBarOpen){
closeNav();
}else if(target.is(".sidebar-toggle")){
openNav();
}
});
// $("body").click(function (e) {
// });
html{
height: 100%;
width: 100%;
margin: 0;
}
body{
width: 100%;
height: 100%;
margin: 0;
font-family: "Lato", sans-serif;
}
/* .wrapper {
height: 100%;
width: 100%;
margin: 0;
}
.container{
min-height: 100vh;
min-width: 100vh;
margin: 0;
transition: .2s;
} */
/* .container {
margin: 270px;
transition: .2s;
} */
.side-nav {
width: auto;
min-width: 270px;
/* min-height: 100vh; */
height: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x:hidden ;
padding-top: 60px;
transition: 0.2s;
}
.side-nav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.side-nav a:hover {
color: #f1f1f1;
}
.side-nav .close-btn {
position: absolute;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
background-color: inherit;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
display: none;
}
#main {
padding: 20px;
width: 100%;
margin-left: 270px;
transition: all .2s;
}
.bottom-nav{
position: fixed;
display: flex;
justify-content:space-evenly;
align-content:stretch;
background-color: #0080ffd7;
width: 100%;
bottom: 0;
margin: 0;
/* max-width: inherit;
min-width: inherit; */
overflow: auto;
/* text-align: center; */
}
.bottom-nav a{
float: left;
width: 100%;
text-align: center;
padding: 12px 0;
transition: all 0.3 ease;
color: azure;
font-size: 25px;
text-decoration: none;
border: none;
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
outline: 1px solid;
outline-color: #6eaec280;
outline-offset: 0px;
text-shadow: none;
transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}
.sidebar-toggle{
display: none;
transition: .1s;
}
.bottom-nav span{
color: azure;
font-size: 15px;
display: block;
}
.bottom-nav i{
color: azure;
font-size: 25px;
display: block;
}
.bottom-nav a:hover{
background-color: #4355aa;
border: 1px solid;
border-color:#6eaec280;
box-shadow: inset 0 0 20px hsla(241, 49%, 55%, 0.5), 0 0 20px rgba(58, 174, 219, 0.2);
outline-color: rgba(199, 42, 42, 0);
outline-offset: 15px;
text-shadow: 1px 1px 2px #427388;
}
a.active {
background-color:#af684c ;
}
#media screen and (max-height:450px){
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
#media screen and (max-width: 992px){
.side-nav{
width: 0;
min-width: 0;
min-height: 0;
}
#main {
margin: 0;
}
/* .container {
min-height: 100vh;
min-width: 100vh;
margin: 0;
} */
.bottom-nav{
margin: 0;
}
.sidebar-toggle{
display: inline;
}
}
<!doctype html>
<html lang="en">
<head>
<title>UI look</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>
<div class="side-nav" id="sideNav">
<span class="close-btn" onclick="closeNav()">× </span>
<div>
<section>
<h3>Services</h3>
Home
About
</section>
<section>
<h3>Account</h3>
Login
Register
</section>
</div>
<div class="list-group list-group-flush">
Dashboard
Shortcuts
Overview
Events
Profile
Status
</div>
</div>
<div id="main">
<span class="sidebar-toggle" style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis doloremque, natus cum nulla quos, aperiam id non enim, quo incidunt alias. Tempore mollitia incidunt asperiores dignissimos accusamus ducimus expedita excepturi!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio dolorum tenetur corrupti eum sunt ut excepturi tempora magnam, quisquam doloribus, error veritatis possimus quidem saepe. Error totam facilis quod harum!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid aliquam veritatis, esse necessitatibus neque officia, error iste ipsum non recusandae praesentium odit fugiat atque, eveniet dignissimos! Earum dolore voluptates iure.</p>
</div>
<div class="bottom-nav" id="bottomNav">
<i class="fas fa-home"></i><span>main</span>
<i class="fas fa-bell"></i><span>notifications</span>
<i class="fas fa-question"></i><span>help</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.3/umd/popper.min.js" integrity="sha512-53CQcu9ciJDlqhK7UD8dZZ+TF2PFGZrOngEYM/8qucuQba+a+BXOIRsp9PoMNJI3ZeLMVNIxIfZLbG/CdHI5PA==" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
As I see it you have 2 options:
1.Leave the HTMl as is, and using jQuery determine the width of the bottom bar when the sidebar is open:
$(window).resize(function(){
if($(window).width() > 1024){
$('.bottom-nav').width($(window).width() - $('.side-nav').width())
}
})
2.Use a container for both the side-nav and the bottom-nav and set its position to fixed or absolute. (this will only work if as I understood when the sidebar is open, the main content shouldn't be accessible and should be blurred)

HTML Div takes up space while hidden

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;
}

Placing a banner at the bottom of a web site pushing all elements up

I’m trying to add a JavaScript component that should be added and work on various sites. My code adds a rectangle at the bottom of the site using a div with position:fixed.
On some sites, there are already some elements at the bottom of the screen, which also use position:fixed.
I would like to identify those elements and raise them up. So that both elements will be visible.
Another alternative would be to raise the whole site up and place my div at the bottom.
Does anyone have an idea, how this can be done in JavaScript/css configuration?
I've created a sample code which is similar to what I do to add the banner at the bottom of the site: http://jsfiddle.net/bp0yk7cv/8
var div = document.createElement('div');
div.innerHTML = "my <b>new</b> banner <large>should be placed at the bottom</large>";
// set style
div.style.color = 'red';
div.style.backgroundColor = 'yellow'
div.style.position = 'fixed';
div.style.bottom = '0px';
div.style.height = '30px';
document.body.appendChild(div);
The code site is given. The JavaScript part is added and can manipulate the site code. My requirement is to make all the elements behind my new banner raise up.
Thanks,
Use flexbox for your footer-at-the-bottom layout. Add display: flex; and flex-direction: column; to the footer's parent; add margin-top: auto; to the footer. Done!
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
html,
body {
height: 100%;
}
body {
margin: 0;
padding: 0;
font: 12px/1 Arial, sans-serif;
}
p {
line-height: 1.5;
}
.text-center {
text-align: center;
}
.bg-black {
background: #212121;
}
.bg-black a {
color: #efefef;
}
.wrapper {
min-height: 100%;
display: flex;
flex-direction: column;
}
ul.menu {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.menu.horizontal-menu li {
display: inline-block;
font-size: 0;
}
ul.menu.horizontal-menu li a {
font-size: 12px;
}
ul.menu.vertical-menu li {
display: block;
}
ul.menu.vertical-menu li a {
display: block;
padding: 5px 10px;
}
.header {
display: flex;
}
.header .branding {
margin-right: 0;
height: 52px;
line-height: 52px;
}
.header nav {
margin-left: auto;
}
.header nav ul li a {
height: 52px;
display: table-cell;
vertical-align: middle;
}
.content-sideber {
display: flex;
max-width: 1200px;
margin: 0 auto;
}
.content-sideber .content {
width: 75%;
}
.content-sideber .sidebar {
width: 25%;
}
#media (max-width: 575px) {
.content-sideber {
flex-direction: column;
}
.content-sideber .content,
.content-sideber .sidebar {
width: 100%;
}
}
.footer {
margin-top: auto;
padding: 0 10px;
}
<div class="wrapper">
<header class="header bg-black">
<a class="branding" href="#">MyCompany</a>
<nav>
<ul class="menu horizontal-menu">
<li>Home</li>
<li>About</li>
<li>Clients</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
<main class="content-sideber">
<section class="content">
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem quia repellat dolor natus, non tempora hic, itaque, officiis iste nemo, eligendi facere impedit commodi pariatur. At accusantium ducimus aspernatur quisquam!</p>
<p>Voluptates nobis, error illo id ab similique qui quibusdam minima doloremque excepturi facere fugiat nisi amet accusantium. Porro nesciunt totam nobis, cupiditate voluptas veritatis, sit temporibus fugit sapiente at quasi.</p>
</section>
<aside class="sidebar">
<ul class="menu vertical-menu">
<li>Lorem ipsum dolor sit</li>
<li>Consectetur adipisicing</li>
<li>Atque excepturi corporis</li>
<li>Officiis magnam</li>
</ul>
</aside>
</main>
<footer class="footer text-center">
<img src="https://picsum.photos/700/50/?gravity=south" alt="">
</footer>
</div>

Add class active if onclick

I have a menu. I scrolled the function to the item that is listed in the menu. I also want the selected element to appear hr. I get if there is no scroll function, then hr appears in the selected menu. And I need that when the clicks on the menu appears and hr and scroll function. Lets look at link 2 and link 3
$('a.scrollTo').on('click', function(){
// data-scrollTo = section scrolling to name
var scrollTo = $(this).attr('data-scrollTo');
// toggle active class on and off. added 1/24/17
$( "a.scrollTo" ).each(function() {
if(scrollTo == $(this).attr('data-scrollTo')){
$(this).addClass('active');
}else{
$(this).removeClass('active');
}
});
// animate and scroll to the sectin
$('body, html').animate({
// the magic - scroll to section
"scrollTop": $('#'+scrollTo).offset().top
}, 1000 );
return false;
})
var elems = document.querySelectorAll(".one,.two,.three");
for (var i = 0; i < elems.length; i++) {
elems[i].addEventListener("click",function(e){
if(document.querySelector(".activeOne")){
document.querySelector(".activeOne").classList.remove("activeOne");
}
e.currentTarget.classList.add("activeOne");
});
}
* {
margin: 0;
padding: 0;
outline: none;
}
body, html {
width: 100%;
height: 100%;
}
#main-header {
background-image: url(../img/background.jpg);
min-height: 100%;max-width: 100%;
background-attachment: fixed;
background-repeat: repeat-x;
background-position: left center;
position: relative;}
.main-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .5;
z-index: 0;
background-image: linear-gradient(to right, #34373a, #696c70);
background-image: -moz-linear-gradient(to right, #34373a, #696c70);
background-image: -webkit-linear-gradient(to left, #34373a, #696c70);
background-image: -ms-linear-gradient(to left, #34373a, #696c70);
}
.header {
position: relative;
z-index: 1;
}
#headet-title {
text-align: center;
color: white;
font-family: 'Cabin Condensed', sans-serif;
margin: 15% 0 0.5% 0;
font-size: 1.7em;
}
#description-header {
text-align: center;
color: white;
font-family: 'Cabin Condensed', sans-serif;
font-size: 1.4em;
width: 50%;
margin: auto;
}
#menu-nav a {
color: white;
text-decoration:none;
color:#fff;
width:120px;
display:inline-block;
text-align:center;
transition:all .33s linear;
-webkit-transition:all .33s linear;
}
ul li {
display: inline;
text-align: center;
}
.two:hover ~ hr {
margin-left: 44%;
}
.three:hover ~ hr {
margin-left: 78%;
}
.scrollTo.activeOne ~ hr {
margin-left: 10%;
}
.two.activeOne ~ hr {
margin-left: 44%;
}
.three.activeOne ~ hr {
margin-left: 78%;
}
hr {
height: .15rem;
width: 12%;
margin: 0;
background: #ff2a58;
border: none;
transition: .3s ease-in-out;
margin-left: 10%;
}
.menu-nav-header {
display: flex;
justify-content: space-between;
padding: 5px;
}
#logo h2 {
color: white;
font-family: 'Cabin Condensed', sans-serif;
}
.button {
text-align: center;
margin-top: 2%;
}
.button a {
color: white;
font-family: 'Cabin Condensed', sans-serif;
text-decoration: none;
border: 1px solid;
padding: 6px 12px 6px 12px;
border-radius: 3px;
font-size: 1.3em;
}
.header-title-border {
height: 2px;
width: 190px;
background-color: #ff2a58;
margin: auto;
margin-bottom: 1%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="scroll/section-scroll.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="scroll/jquery.section-scroll.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/>
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cabin+Condensed" rel="stylesheet">
</head>
<div id="main-header">
<div class="main-overlay"></div>
<div class="header">
<div class="menu-nav-header"> <div id="logo">
<h2>NAME</h2>
</div>
<div id="menu-nav">
<ul>
<li class="one"><a class="scrollTo" data-scrollTo="main-header" href="#">Link 1</a></li>
<li class="two"> <a class="scrollTo" data-scrollTo="content1" href="#">Link 2</a></li>
<li class="three"> <a class="scrollTo" data-scrollTo="content2" href="#">Link 3</a></li>
<hr />
</ul>
</div>
</div>
<div id="headet-title">
<h1 class="wow fadeInDown">Name of Your Company</h1>
</div>
<div class="header-title-border"></div>
<div id="description-header">
<span class="wow fadeInDown">Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque voluptate commodi impedit,
vitae vero, quo et odit natus sequi odio reprehenderit expedita voluptatum aspernatur, dolore soluta corporis aliquid animi iure.</span>
</div>
<div class="button">
Get Started
</div>
</div>
</div>
<div id="content1">Hello</div>
Link 2 has content1, which is why hr does not appear, while link 3 has no content2 and hr appears. Help me please

Categories

Resources