Develop Reference

Why is my content not displaying after the page gets loaded?

hello i have created a loading screen for my home page, but the content doesn't display after the site has loaded. I set the console log to send message once it has loaded and I don't get any errors. Does anyone know why this is happening? Also, how can I get the loading text to fade every time it changes as well?
function timeout(ms) {
return new Promise((resolve, reject) => setTimeout(resolve, ms));
}
function loadingScreen() {
var loadingText = document.getElementById('loading-text');
loadingText.innerText = "Welcome To StudioPick."
var delay = 7000;
return timeout(delay)
.then(() => { loadingText.innerText = "Loading studios..."; return timeout(delay) })
.then(() => { loadingText.innerText = "Almost done..."; return timeout(delay) })
.then(() => { loadingText.innerText = "Let's get started"; return timeout(delay) })
.then(() => { loadingText.parentElement.style.display = "none" })
}
document.addEventListener('DOMContentLoaded', () => {
console.log("content has loaded.")
loadingScreen();
});
#import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
body {
background-color: #d1d1d1 !important;
#import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#loading-text {
position: relative;
top: 33rem;
text-align: center;
z-index: 100 !important;
color: #ffffff;
font-size: 20px;
}
#loading {
font-size: 30px;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background: #9370db url(/dist/512x512\ Half\ Circle.gif);
background-size: 2%;
background-repeat: no-repeat;
background-position: center;
}
.navbar-light {
background-color: transparent;
z-index: 5;
}
.navbar-nav {
justify-content: space-between;
}
.navbar-brand {
font-size: 35px;
}
.nav-item {
font-size: 20px;
padding-right: 15px;
color: #ffffff !important;
}
.nav-item2 {
background-color: #9370db !important;
border-radius: 15px !important;
width: 95px !important;
text-align: center !important;
font-size: 20px;
}
header {
position: relative;
background-color: black;
height: 75vh;
min-height: 25rem;
width: 100%;
overflow: hidden;
}
header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
header .container {
position: relative;
z-index: 2;
}
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
z-index: 1;
}
/* Media Query for devices withi coarse pointers and no hover functionality */
/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */
#media (pointer: coarse) and (hover: none) {
header {
background: url("https://source.unsplash.com/XT5OInaElMw/1600x900") black
no-repeat center center scroll;
}
header video {
display: none;
}
}
.graybg {
background-color: #ffffff !important;
border-radius: 15px !important;
margin: 15px;
padding: 7px;
}
.searchbox {
width: 100%;
border-radius: 15px !important;
background-color: transparent;
border: 5px;
padding: 30px;
margin: 0;
margin-top: 75px;
text-align: center;
position: relative;
top: -130px;
}
.search {
position: relative;
right: -185px;
display: flex;
justify-content: space evenly;
width: 100%;
border-radius: 15px !important;
padding: 7px;
margin-top: 10px;
border: 3px solid #000000;
font-size: 17px;
}
.zipcode {
position: relative;
right: -165px;
display: flex;
justify-content: space evenly;
margin-top: 10px;
margin-left: 40px;
width: 50%;
border-radius: 15px !important;
padding: 7px;
border: 3px solid #000000;
font-size: 17px;
}
.sortbox {
position: relative;
right: -75px;
display: flex;
justify-content: space evenly;
margin-top: 10px;
width: 33%;
border-radius: 15px !important;
padding: 7px;
border: 3px solid #000000;
font-size: 17px;
}
.filterbox {
position: relative;
right: 85px;
display: flex;
justify-content: space evenly;
width: 30%;
border-radius: 15px !important;
padding: 7px;
border: 3px solid #000000;
font-size: 17px;
margin-top: 10px;
}
.enter-site {
background-color: transparent;
color: #ffffff;
padding: 0;
border-color: #ffffff;
width: 120px;
height: 45px;
border-radius: 15px !important;
align-items: center;
justify-content: center;
position: relative;
right: -580px;
top: 50px;
z-index: 25;
}
#footer {
position: relative;
right: -15px;
top: 225px;
z-index: 20;
font-size: 12px;
}
/*---Header---*/
.sturow > * {
flex: 1;
}
/*---Studio List---*/
.stucontainer {
width: 100%;
height: 900px;
padding: 50px 80px;
}
/*---Card One---*/
/*---Star Rating 1---*/
.rating-box {
width: 175px;
border-radius: 15px !important;
height: 35px;
margin: auto;
margin-bottom: 10px;
background-color: #e5e5e5;
border: 1px;
box-sizing: border-box;
}
svg {
width: 30px;
height: 30px;
padding: 3px;
margin-top: 3px;
}
/* hide radio buttons */
input[name="star"] {
display: inline-block;
width: 0;
opacity: 0;
margin-left: -2px;
}
/* hide source svg */
.star-source {
width: 0;
height: 0;
visibility: hidden;
}
/* set initial color to transparent so fill is empty*/
.star {
color: #7a7a7a;
transition: color 0.2s ease-in-out;
}
/* set direction to row-reverse so 5th star is at the end and ~ can be used to fill all sibling stars that precede last starred element*/
.star-container {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
label:hover ~ label .star,
svg.star:hover,
input[name="star"]:focus ~ label .star,
input[name="star"]:checked ~ label .star {
color: #fbff28;
}
input[name="star"]:checked + label .star {
animation: starred 0.5s;
}
input[name="star"]:checked + label {
animation: scaleup 1s;
}
#keyframes scaleup {
from {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
#keyframes starred {
from {
color: #d6ca2a;
}
to {
color: #d6ca2a;
}
}
/*---Links---*/
a:link {
text-decoration: none;
color: black;
}
a:visited {
color: black;
}
a:hover {
text-decoration: none;
color: purple;
}
/*---Card Body---*/
.card1 {
position: relative;
top: 45px;
right: 300px;
margin: auto;
border: none;
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
overflow: hidden;
border-radius: 20px;
width: 420px;
height: 330px;
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
}
.card1 .card-meta {
position: relative;
right: -55px;
color: #9370db;
}
.stuLocation {
position: relative;
top: -10px;
right: -55px;
}
/*---Like Button---*/
.btns1 {
position: relative;
top: -50px;
left: -50px;
}
.card1.card-has-bg {
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
background-size: 130%;
background-repeat: no-repeat;
background-position: center center;
}
.card1.card-has-bg:hover {
transform: scale(0.98);
box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.3);
background-size: 130%;
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1.card-has-bg:hover .card-img-overlay {
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #d2d2d25c 100%);
}
.card1 .card-body {
transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1:hover {
cursor: pointer;
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1:hover .card-body {
margin-top: 30px;
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
}
.card1 .card-img-overlay {
background-color: rgba(138, 138, 138, 0.425);
}
/*---Card Body---*/
/*---Heart Button---*/
.btns1 {
position: relative;
top: -70px;
left: 300px;
}
/*---Heart Button---*/
/*---Star Rating---*/
.rating-box {
position: relative;
top: -30px;
left: -105px;
border-radius: 15px !important;
width: 105px;
height: 15px;
margin: auto;
margin-bottom: 10px;
background-color: #e5e5e55a;
border: 1px;
box-sizing: border-box;
}
svg {
position: relative;
top: -7px;
width: 20px;
height: 20px;
padding-left: 3px;
padding-right: 3px;
}
/* hide radio buttons */
input[name="star"] {
display: inline-block;
width: 0;
opacity: 0;
margin-left: -2px;
}
/* hide source svg */
.star-source {
width: 0;
height: 0;
visibility: hidden;
}
/* set initial color to transparent so fill is empty*/
.star {
color: #7a7a7a;
transition: color 0.2s ease-in-out;
}
/* set direction to row-reverse so 5th star is at the end and ~ can be used to fill all sibling stars that precede last starred element*/
.star-container {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
label:hover ~ label .star,
svg.star:hover,
input[name="star"]:focus ~ label .star,
input[name="star"]:checked ~ label .star {
color: #fbff28;
}
input[name="star"]:checked + label .star {
animation: starred 0.5s;
}
input[name="star"]:checked + label {
animation: scaleup 1s;
}
#keyframes scaleup {
from {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
#keyframes starred {
from {
color: #d6ca2a;
}
to {
color: #d6ca2a;
}
}
/*---Star Rating---*/
#media (max-width: 768px) {
.card {
min-height: 350px;
}
}
#media (max-width: 420px) {
.card {
min-height: 300px;
}
}
/*---Card stack---*/
.stucontainer .card1-stack {
width: 500px;
height: 250px;
position: absolute;
margin: 20px auto;
}
.stucontainer .card1-stack .buttons {
display: none;
position: absolute;
background: rgba(0, 0, 0, 0.46);
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 50%;
width: 35px;
height: 35px;
left: 0;
top: 55%;
color: rgba(255, 255, 255, 0.7);
text-align: center;
line-height: 35px;
text-decoration: none;
font-size: 22px;
z-index: 100;
outline: none;
transition: all 0.2s ease;
}
.stucontainer .card1-stack .buttons:hover {
transform: scale(1.3, 1.3);
}
.stucontainer .card1-stack .prev {
left: 15px;
right: auto;
}
.container .card1-stack .next {
left: auto;
right: 15px;
}
.stucontainer .card1-stack .carousel .buttons:hover {
color: #c01313;
background: #fff;
}
.stucontainer .card1-stack .card-list {
width: 300px;
}
.stucontainer .card1-stack .card-list__image {
height: 200px;
}
.stucontainer .card1-stack .card-list__text {
color: #fff;
font-weight: 300;
}
.stucontainer .card1-stack .card-list li {
display: flex;
align-items: center;
justify-content: center;
transition: all 100ms ease-in-out;
border-radius: 10px;
position: absolute;
list-style: none;
height: 300px;
left: 0;
right: 0;
margin: 0 auto;
padding-top: 20px;
text-align: center;
-webkit-box-shadow: 0 2px 15px 1px rgba(225, 225, 225, 0.5);
box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.5);
}
.stucontainer .card1-stack .card-list li:nth-child(1) {
top: 24px;
width: 60%;
/* animation: scaleCard 100ms; */
}
.stucontainer .card1-stack .card-list li:nth-child(2) {
top: 36px;
width: 70%;
}
.stucontainer .card1-stack .card-list li:nth-child(3) {
top: 48px;
width: 80%;
}
.stucontainer .card1-stack .card-list li:nth-child(4) {
top: 60px;
width: 90%;
}
.stucontainer .card1-stack .card-list li:nth-child(5) {
top: 72px;
width: 100%;
}
.container .card1-stack:hover > .buttons.prev {
display: block;
animation: bounceInLeft 200ms;
}
.stucontainer .card1-stack:hover > .buttons.next {
display: block;
animation: bounceInRight 200ms;
}
.transformThis {
animation: scaleDown 500ms;
}
.transformPrev {
animation: scaleUp 100ms;
display: none;
}
#keyframes scaleUp {
0% {
transform: scale(1.2) translateY(50px);
opacity: 0;
}
20% {
transform: scale(1.15) translateY(40px);
opacity: 0.1;
}
40% {
transform: scale(1.1) translateY(30px);
opacity: 0.2;
}
60% {
transform: scale(1.05) translateY(20px);
opacity: 0.4;
}
80% {
transform: scale(1.01) translateY(10px);
opacity: 0.8;
}
100% {
transform: scale(1) translateY(0);
opacity: 1;
}
}
#keyframes scaleDown {
0% {
transform: scale(1) translateY(0);
opacity: 1;
}
20% {
transform: scale(1.01) translateY(20px);
opacity: 0.8;
}
40% {
transform: scale(1.05) translateY(40px);
opacity: 0.4;
}
60% {
transform: scale(1.1) translateY(60px);
opacity: 0.2;
}
80% {
transform: scale(1.15) translateY(80px);
opacity: 0.1;
}
100% {
transform: scale(1.2) translateY(100px);
opacity: 0;
}
}
#keyframes scaleCard {
0% {
top: 5px;
}
100% {
top: 24px;
}
}
#keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(40px);
}
100% {
transform: translateX(0);
}
}
#keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(-40px);
}
100% {
transform: translateX(0);
}
}
/*---Card stack---*/
/*---Card One---*/
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.98.0">
<title>StudioPick</title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link href="./style.css" rel="stylesheet">
</head>
<body>
<div id="loading">
<div id="loading-text"></div>
</div>
<div id="page">
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand"
href="#"><strong>StudioPick</strong></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-curresnt="page" style="color: #ffffff;"
href="index.html"><strong>Home</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" style="color: #ffffff;" href="login.html"><strong>Log In</strong></a>
</li>
<li class="nav-item2">
<a class="nav-link" href="signup.html"><strong>Sign Up</strong></a>
</li>
</ul>
</div>
</div>
</nav>
<!-- This div is intentionally blank. It creates the transparent black overlay over the video which you can modify in the CSS -->
<div class="overlay"></div>
<!-- The HTML5 video element that will create the background video on the header -->
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="./Joony_Vlog.mp4" type="video/mp4">
</video>
<!-- The header content -->
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100">
<div class="searchbox">
<h1 style="font-size: 50px; font-family: Arial, sans-serif;"><strong>Find Your Next
Studio</strong></h1>
<div class="row">
<!---Search--->
<div class="col-md-3">
<input class="search" type="text" placeholder="Search">
</div>
<!---Zipcode-->
<div class="col-md-3">
<input class="zipcode" type="text" placeholder="Zipcode">
</div>
<!---Sort----->
<div class="col-md-3">
<select class="sortbox">
<option value="Sort">Sort by</option>
<option value="Location">Location</option>
<option value="Rating">Rating</option>
</select>
</div>
<!---Filter--->
<div class="col-md-3">
<select class="filterbox">
<option value="Filter">Filter</option>
<option value="50 mi">50 mi</option>
<option value="30 mi">30 mi</option>
<option value="25 mi">25 mi</option>
<option value="10 mi">10 mi</option>
<option value="5 mi">5 mi</option>
</select>
</div>
<button class="enter-site" onclick="window.location.href='Index.html'"></a><strong>View
Studios</strong></button>
<footer class="mt-auto text-white-50" id="footer">
<p>#Bekaedo <br>StudioPick 2022 ©</p>
</footer>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Page section example for content below the video header -->
<section class="my-5">
<div class="container">
<!--Studio List-->
<div class="row">
<!--Studio One-->
<div class="stuOne mx-auto">
<div class="stucontainer">
<div class="card1-stack">
<!--Studio Front Page-->
<li class="card1 text-white card-has-bg click-col"
style="background-image:url('https://westlakepro.com/wp-content/uploads/2020/01/SnoopDoggStudio.jpg');">
<div class="card-img-overlay d-flex flex-column">
<div class="card-body">
<div class="media">
<img class="mr-3 rounded-circle" id="stuImage"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQxUXsEFPioqCqDqgp7MeLNpM7iZYL6mt97ElI3LwCnuFoarwmSWbJquoEwbi1AJSRzXBs&usqp=CAU"
alt="Generic placeholder image"
style="max-width:50px; position: relative; top: 50px; left: -150px;">
<div class="media-body">
<h6 class="card-meta mb-2"><strong>CC Studios</strong></h6>
<small class="stuLocation">Bethesda, MD</small>
</div>
</div>
<!--Heart Button--->
<div class="btns1">
<Button style="font-size: 35px" onclick="Toggle1()" id="btnh1"
class="btn"><i class="fas fa-heart"></i></Button>
</div>
<!---Heart Button--->
<!---Star Rating--->
<div class="rating-box">
<div class="star-source">
<svg>
<linearGradient x1="50%" y1="5.41294643%" x2="87.5527344%"
y2="65.4921875%" id="grad">
<stop stop-color="#bf209f" offset="0%"></stop>
<stop stop-color="#d62a9d" offset="60%"></stop>
<stop stop-color="#ED009E" offset="100%"></stop>
</linearGradient>
<symbol id="star" viewBox="153 89 106 108">
<polygon id="star-shape" stroke="url(#grad)" stroke-width="5"
fill="currentColor"
points="206 162.5 176.610737 185.45085 189.356511 150.407797 158.447174 129.54915 195.713758 130.842203 206 95 216.286242 130.842203 253.552826 129.54915 222.643489 150.407797 235.389263 185.45085">
</polygon>
</symbol>
</svg>
</div>
<div class="star-container">
<input type="radio" name="star" id="five">
<label for="five">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="four">
<label for="four">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="three">
<label for="three">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="two">
<label for="two">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
<input type="radio" name="star" id="one">
<label for="one">
<svg class="star">
<use xlink:href="#star" />
</svg>
</label>
</div>
</div>
<!---Star Rating--->
</div>
</div>
<!--Studio Front Page-->
</div>
</div>
</div>
<!--Studio One-->
<!--Studio Two-->
<!--Studio Two-->
</div>
</div>
</section>
</div>
<script src="script.js"></script>
</body>
</html>

You are setting display: none to .loading-text, it needs to be set on its parent (#loading).
As for fading, innerText.fadeOut does nothing. I would suggest doing this with css by toggling appropriate classes with js.

Check why it is not transforming rotate 45deg of toggle button

It is getting the class i assigned but why it is not transforming to 45deg rotate. I couldn't figure out as i tried for almost 15 mins.please check and let me know. So i thought to post it here. Let me know if you can crack it.https://codepen.io/TA0011/pen/ExLyLNe check the link and let me know about the concern.
const sidebar = document.querySelector('#mySidebar')
const toggle = document.querySelector('#sidebar-toggle')
toggle.addEventListener('click', toggleSidebar)
function toggleSidebar(e) {
toggle.classList.toggle('open')
sidebar.classList.toggle('open');
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
header{
padding: 0 20px;
height: 40px;
width:100%;
background: coral;
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
display: flex;
justify-content: space-between;
z-index: 1001;
}
header img{
width:40px;
height:40px;
}
#sidebar-toggle{
margin: 0;
cursor: grab;
background: rgba(0, 136, 169, 1);
border-radius: 50%;
width: 40px;
height: 40px;
position:relative;
}
#sidebar-toggle div{
width: 20px;
height:2px;
top: 8px;
background-color: #fff;
margin: 5px 0;
position: relative;
transition: all 0.3s ease 0s;
transform: translate(50%,-50%);
}
.open.bar4 {
-webkit-transform: rotate(-45deg) translate(-6px, 6px);
transform: rotate(-45deg) translate(-4.5px, 5.5px);
moz-transform: rotate(-45deg) translate(-4.5px, 5.5px);
}
.open .bar5 {
opacity: 0;
}
.open .bar6 {
-webkit-transform: rotate(45deg) translate(-5.5px, -5.5px);
transform: rotate(45deg) translate(-5.5px, -5.5px);
moz-transform: rotate(45deg) translate(-5.5px, -5.5px);
}
.sidebar-header img{
width:30px;
}
.sidebar {
display:none;
position: fixed;
height: 100vh;
top: 40px;
left: 0;
background-color: #fff;
width: 15.625rem;
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
}
.open.sidebar {
display: flex;
}
.sidebar-header {
display: flex;
padding: 5px;
}
.sidebar-header img {
flex-wrap: wrap;
pointer-events: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
border-radius: 50%;
width: 41px;
float: none;
display: block;
object-fit: fill;
height: 40px;
}
.sidebar-header h6 {
display: flex;
justify-content: flex-end;
}
<header>
<img src="https://cdn.dribbble.com/userupload/3158902/file/original-7c71bfa677e61dea61bc2acd59158d32.jpg?resize=400x0">
<div id="sidebar-toggle">
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
</div>
</header>
<div class="sidebar" id='mySidebar'>
<div class="sidebar-container">
<div class="sidebar-header">
<img src="https://i.pinimg.com/736x/0d/cf/b5/0dcfb548989afdf22afff75e2a46a508.jpg">
<h6>Umann goswami</h6>
</div>
</div>
</div>
<div id="main">
Welcome human
</div>

An ID selector # has the highest specificity. That means that the .open class will be overwritten by the css of #sidebar-toggle.
You can fix this by preceding your CSS selectors with the ID selector.
#sidebar-toggle.open .bar4 {}
#sidebar-toggle.open .bar5 {}
#sidebar-toggle.open .bar6 {}
Also you're missing a space between .open.bar4
const sidebar = document.querySelector('#mySidebar')
const toggle = document.querySelector('#sidebar-toggle')
toggle.addEventListener('click', toggleSidebar)
function toggleSidebar(e) {
toggle.classList.toggle('open')
sidebar.classList.toggle('open');
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
header{
padding: 0 20px;
height: 40px;
width:100%;
background: coral;
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
display: flex;
justify-content: space-between;
z-index: 1001;
}
header img{
width:40px;
height:40px;
}
#sidebar-toggle{
margin: 0;
cursor: grab;
background: rgba(0, 136, 169, 1);
border-radius: 50%;
width: 40px;
height: 40px;
position:relative;
}
#sidebar-toggle div{
width: 20px;
height:2px;
top: 8px;
background-color: #fff;
margin: 5px 0;
position: relative;
transition: all 0.3s ease 0s;
transform: translate(50%,-50%);
}
#sidebar-toggle.open .bar4 {
-webkit-transform: rotate(-45deg) translate(-6px, 6px);
transform: rotate(-45deg) translate(-4.5px, 5.5px);
moz-transform: rotate(-45deg) translate(-4.5px, 5.5px);
}
#sidebar-toggle.open .bar5 {
opacity: 0;
}
#sidebar-toggle.open .bar6 {
-webkit-transform: rotate(45deg) translate(-5.5px, -5.5px);
transform: rotate(45deg) translate(-5.5px, -5.5px);
moz-transform: rotate(45deg) translate(-5.5px, -5.5px);
}
.sidebar-header img{
width:30px;
}
.sidebar {
display:none;
position: fixed;
height: 100vh;
top: 40px;
left: 0;
background-color: #fff;
width: 15.625rem;
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
}
.open.sidebar {
display: flex;
}
.sidebar-header {
display: flex;
padding: 5px;
}
.sidebar-header img {
flex-wrap: wrap;
pointer-events: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
border-radius: 50%;
width: 41px;
float: none;
display: block;
object-fit: fill;
height: 40px;
}
.sidebar-header h6 {
display: flex;
justify-content: flex-end;
}
<header>
<img src="https://cdn.dribbble.com/userupload/3158902/file/original-7c71bfa677e61dea61bc2acd59158d32.jpg?resize=400x0">
<div id="sidebar-toggle">
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
</div>
</header>
<div class="sidebar" id='mySidebar'>
<div class="sidebar-container">
<div class="sidebar-header">
<img src="https://i.pinimg.com/736x/0d/cf/b5/0dcfb548989afdf22afff75e2a46a508.jpg">
<h6>Umann goswami</h6>
</div>
</div>
</div>
<div id="main">
Welcome human
</div>
Example positioning with CSS Grid
So here we create a grid where there is a single column with a fixed width of 20px. The amount of rows are generated dynamically based on the amount of children. Each row has a height 2px. The space (gap) between each row is 5px. All rows and columns are then position in the center of the #sidebar-toggle element.
const sidebarToggle = document.querySelector('#sidebar-toggle');
setInterval(() => {
sidebarToggle.classList.toggle('open');
}, 2000);
#sidebar-toggle {
display: grid;
grid-auto-rows: 2px;
grid-template-columns: 20px;
gap: 5px;
place-content: center;
cursor: pointer;
background: rgba(0, 136, 169, 1);
border-radius: 50%;
width: 40px;
height: 40px;
margin: 0;
}
#sidebar-toggle div {
background-color: #fff;
position: relative;
transition: all 0.3s ease 0s;
}
#sidebar-toggle.open .bar4 {
transform: translate3d(0, 7px, 0) rotate(-45deg);
}
#sidebar-toggle.open .bar5 {
opacity: 0;
}
#sidebar-toggle.open .bar6 {
transform: translate3d(0, -7px, 0) rotate(45deg);
}
<div id="sidebar-toggle">
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
</div>

How to make a collapsed side that shrink content box

$(function(){
$('#hamburgerMenu').on("click", function(){
$(this).toggleClass('collapsed').promise().done(function(){
$(".app").addClass("expanded_container--container");
});
$("#app_navigation").toggleClass("expanded");
});
});
main nav {
position: fixed;
z-index: 99;
left: 0;
top: 60px;
height: 100%;
width: 80px;
background-color: #ffffff;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 15px 0px;
box-sizing: border-box;
display: flex;
flex-direction: column;
flex: 1 0 auto;
outline: none;
overflow-y: hidden;
overflow-x: hidden;
-webkit-transition: width 400ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, height 400ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
transition: width 400ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, height 400ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
}
.expanded {
width: 215px;
}
.hamburger-mobile {
display: none;
}
.nav-items {
margin: 0;
padding: 70px 0 20px 0;
width: 100%;
height: 100%;
list-style: none;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.item-wrapper {
width: 215px;
height: 50px;
box-sizing: border-box;
text-align: left;
display: flex;
align-items: center;
overflow-x: hidden;
word-wrap: no-wrap;
min-width: 0;
color: #darkGrey;
font-size: 18px;
margin-left: 5px;
}
.item-wrapper:hover {
cursor: pointer;
background-color: rgba(71, 71, 71, 0.05);
color: #428aff;
}
.item-wrapper i {
width: 75px;
text-align: center;
}
.profile {
height: 60px;
}
.profile > img {
height: 50px;
width: 50px;
border-radius: 50%;
padding: 5px 15px;
}
.selected {
border-left: 4px solid #428aff;
color: #428aff;
}
.selected i {
margin-left: -4px;
}
show {
transform: translateX(0px);
}
/* Hamburger */
.icon-bar {
background-color: #474747;
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin-bottom: 4px;
transition: opacity, transform;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.7, 0, 0, 0.7);
}
.hamburger-menu {
display: block;
cursor: pointer;
position: fixed;
padding: 10px;
top: 79px;
left: 19px;
z-index: 999;
transition: transform;
transition-duration: 400ms;
transition-timing-function: cubic-bezier(0.7, 0, 0, 0.7);
}
/*.hamburger-menu:hover {
background-color: rgba(0, 0, 0, .2);
border-radius: 50%;
}*/
.hamburger-menu:hover > .icon-bar {
background-color: #428aff;
}
.hamburger-menu:not(.collapsed) {
transform: translateX(150px);
}
.hamburger-menu:not(.collapsed) .icon-bar:nth-child(1) {
transform: translateY(4.5px) rotate(-45deg) scaleX(0.5);
}
.hamburger-menu:not(.collapsed) .icon-bar:nth-child(2) {
opacity: 0;
/*transform: translateX(-10px);*/
}
.hamburger-menu:not(.collapsed) .icon-bar:nth-child(3) {
transform: translateY(-1px) rotate(45deg) scaleX(0.5);
}
/* ./Hamburger */
/* Media queries */
#media screen and (max-width: 768px) {
main {
height: 50px;
width: 100%;
}
.hamburger-menu {
display: none;
}
.hamburger-mobile {
cursor: pointer;
position: fixed;
padding: 10px;
top: 8;
left: 0;
z-index: 999;
transition: transform;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.7, 0, 0, 0.7);
display: block;
}
.hamburger-mobile:hover > .icon-bar {
background-color: #428aff;
}
.hamburger-mobile:not(.collapsed) .icon-bar:nth-child(1) {
transform: translateY(6px) rotate(-45deg);
}
.hamburger-mobile:not(.collapsed) .icon-bar:nth-child(2) {
opacity: 0;
transform: translateX(-10px);
}
.hamburger-mobile:not(.collapsed) .icon-bar:nth-child(3) {
transform: translateY(-6px) rotate(45deg);
}
/* ./Hamburger */
.expanded-mobile {
height: 100%;
}
.item-wrapper {
width: 100%;
display: flex;
justify-content: center;
}
.nav-items {
overflow-y: hidden;
}
.selected {
border: none;
}
.selected > i {
margin-left: 0;
}
}
/*--------------------------------------------------------------
# App shrink-content container
--------------------------------------------------------------*/
div.app {
-webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;;
transition: all 400ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
}
.shrink_container--container {
margin-left: 215px;
}
.expanded_container--container {
margin-left: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en" >
<body>
<main id="main">
<div class="app shrink_container--container">
<nav id="app_navigation" class="expanded">
<ul class="nav-items">
<div class="item-wrapper" onclick="toggleSelected()">
<i class="far fa-calendar-alt"></i> Item 1
</div>
<div class="item-wrapper selected" onclick="toggleSelected()">
<i class="far fa-address-card"></i> Item 2
</div>
<div class="item-wrapper" onclick="toggleSelected()">
<a href="/ayschange/buy-or-sell">
<i class="far fa-envelope"></i> Achat
</a>
</div>
<div class="item-wrapper profile" onclick="toggleSelected()">
<a href="/ayschange/accounts/?action=logout">
<i class="fas fa-sign-out-alt"></i> Transactions
</a>
</div>
<div class="item-wrapper profile" onclick="toggleSelected()">
<a href="/ayschange/accounts/?action=logout">
<i class="fas fa-sign-out-alt"></i> Rapports
</a>
</div>
<div class="item-wrapper profile" onclick="toggleSelected()">
<a href="/ayschange/accounts/?action=logout">
<i class="fas fa-sign-out-alt"></i> Déconnexion
</a>
</div>
</ul>
</nav>
<div class="hamburger-menu" id="hamburgerMenu" onclick="toggleMenu()">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="hamburger-mobile collapsed" id="hamburgerMobile" onclick="toggleMobile()">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
</div>
</main>
</body>
</html>
I have a side navbar that has an init size of 80px when the page is loaded and when I toggle it to expand to the size of 215px, it does but the container to right doesn't shrink, I don't know what I am missing in my js code, I didn't want to copy all the code but my main issue is with the js code can anyone help me, please
JS
$(function(){
$('#hamburgerMenu').on("click", function(){
$(this).toggleClass('collapsed').promise().done(function(){
$(".app").addClass("expanded_container--container");
});
$("#app_navigation").toggleClass("expanded");
});
});
CSS
.expanded {
width: 215px;
}
.shrink_container--container {
margin-left: 215px;
}
.expanded_container--container {
margin-left: 80px;
}
HTML
<div>
<nav id="app_navigation" class="expanded">
<ul class="nav-items">
<div class="item-wrapper">
<i class="far fa-calendar-alt"></i> Item 1
</div>
</ul>
</nav>
<div class="app shrink_container--container">
</div>
</div>

Vertical CSS Carousel Fade the Background Elements

I have this vertical CSS Carousel working fine.
var carousel = $(".carousel"),
currdeg = 0;
$(".next").on("click", { d: "n" }, rotate);
$(".prev").on("click", { d: "p" }, rotate);
function rotate(e){
if(e.data.d=="n"){
currdeg = currdeg - 60;
}
if(e.data.d=="p"){
currdeg = currdeg + 60;
}
carousel.css({
"-webkit-transform": "rotateX("+currdeg+"deg)",
"-moz-transform": "rotateX("+currdeg+"deg)",
"-o-transform": "rotateX("+currdeg+"deg)",
"transform": "rotateX("+currdeg+"deg)"
});
}
body {
background: #333;
padding: 70px 0;
font: 15px/20px Arial, sans-serif;
}
.transformer {
transform: translateY(150px);
}
.container {
margin: 0 auto;
width: 250px;
height: 200px;
position: relative;
perspective: 1000px;
}
.carousel {
height: 100%;
width: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.item {
display: block;
position: absolute;
background: #000;
width: 250px;
height: 200px;
line-height: 200px;
font-size: 5em;
text-align: center;
color: #FFF;
opacity: 0.95;
border-radius: 10px;
}
.a {
transform: rotateX(0deg) translateZ(250px);
background: #ed1c24;
}
.b {
transform: rotateX(60deg) translateZ(250px);
background: #0072bc;
}
.c {
transform: rotateX(120deg) translateZ(250px);
background: #39b54a;
}
.d {
transform: rotateX(180deg) translateZ(250px);
background: #f26522;
}
.e {
transform: rotateX(240deg) translateZ(250px);
background: #630460;
}
.f {
transform: rotateX(300deg) translateZ(250px);
background: #8c6239;
}
.next, .prev {
color: #444;
position: absolute;
top: 100px;
padding: 1em 2em;
cursor: pointer;
background: #CCC;
border-radius: 5px;
border-top: 1px solid #FFF;
box-shadow: 0 5px 0 #999;
transition: box-shadow 0.1s, top 0.1s;
}
.next:hover, .prev:hover { color: #000; }
.next:active, .prev:active {
top: 104px;
box-shadow: 0 1px 0 #999;
}
.next { right: 1em; }
.prev { left: 1em; }
<script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="transformer">
<div class="container">
<div class="carousel">
<div class="item a">A</div>
<div class="item b">B</div>
<div class="item c">C</div>
<div class="item d">D</div>
<div class="item e">E</div>
<div class="item f">F</div>
</div>
</div>
<div class="next">Next</div>
<div class="prev">Prev</div>
</div>
I'm just in need of help with some visual tweaking.
How can I fade out the elements, so that only the div in view (front)
is 100% visible. The other elements should fade from 100% to 0%, depending
on how far away they are from the front.
Any ideas? Thank you very much.

Slider Slide is not repeating

Slider Slide is not repeating.
I'm trying to do that. The slider works fine, but when the last slide comes there's an end, no repeat.
And here's my code in a snippet (the snippet's window may be too little, so take a look here: https://codepen.io/km_likhon/pen/eEroNK):
var Slider = (function() {
var initSlider = function() {
var dir = $("html").attr("dir");
var swipeHandler = new Hammer(document.getElementById("slider"));
swipeHandler.on('swipeleft', function(e) {
if (dir == "rtl")
$(".arrow-left").trigger("click");
else
$(".arrow-right").trigger("click");
});
swipeHandler.on('swiperight', function(e) {
if (dir == "rtl")
$(".arrow-right").trigger("click");
else
$(".arrow-left").trigger("click");
});
$(".arrow-right , .arrow-left").click(function(event) {
var nextActiveSlide = $(".slide.active").next();
if ($(this).hasClass("arrow-left"))
nextActiveSlide = $(".slide.active").prev();
if (nextActiveSlide.length > 0) {
var nextActiveIndex = nextActiveSlide.index();
$(".dots span").removeClass("active");
$($(".dots").children()[nextActiveIndex]).addClass("active");
updateSlides(nextActiveSlide);
}
});
$(".dots span").click(function(event) {
var slideIndex = $(this).index();
var nextActiveSlide = $($(".slider").children()[slideIndex]);
$(".dots span").removeClass("active");
$(this).addClass("active");
updateSlides(nextActiveSlide);
});
var updateSlides = function(nextActiveSlide) {
var nextActiveSlideIndex = $(nextActiveSlide).index();
$(".slide").removeClass("prev-1");
$(".slide").removeClass("next-1");
$(".slide").removeClass("active");
$(".slide").removeClass("prev-2");
$(".slide").removeClass("next-2");
nextActiveSlide.addClass("active");
nextActiveSlide.prev().addClass("prev-1");
nextActiveSlide.prev().prev().addClass("prev-2");
nextActiveSlide.addClass("active");
nextActiveSlide.next().addClass("next-1");
nextActiveSlide.next().next().addClass("next-2");
}
var updateToNextSlide = function(nextActiveSlide)
{
}
}
return {
init: function() {
initSlider();
}
}
})();
$(function() {
Slider.init();
});
.slider-container {
display: block;
height: 270px;
width: auto;
margin: 0 auto;
position: relative;
max-width: 1300px;
margin-top: 20px;
}
.slider-container .arrow-left {
position: absolute;
left: 10%;
top: 50%;
transform: translate3d(0, -50%, 0);
color: white;
font-size: 28px;
cursor: pointer;
z-index: 9;
border-top: 15px solid transparent;
border-right: 30px solid #C85054;
border-bottom: 15px solid transparent;
}
#media (max-width: 768px) {
.slider-container .arrow-left {
display: none;
}
}
.slider-container .arrow-right {
position: absolute;
right: 10%;
top: 50%;
transform: translate3d(0, -50%, 0);
color: white;
font-size: 28px;
cursor: pointer;
z-index: 9;
border-top: 15px solid transparent;
border-left: 30px solid #C85054;
border-bottom: 15px solid transparent;
}
#media (max-width: 768px) {
.slider-container .arrow-right {
display: none;
}
}
.slider-container .dots {
display: inline-block;
width: 100%;
text-align: center;
margin: 30px 0;
user-select: none;
}
.slider-container .dots span {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 2px;
cursor: pointer;
user-select: none;
padding: 10px 0;
position: relative;
}
.slider-container .dots span:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
height: 10px;
width: 10px;
border-radius: 50%;
background-color: #ccc;
opacity: 0.6;
}
#media (max-width: 768px) {
.slider-container .dots span {
width: 23px;
margin-bottom: 15px;
}
}
.slider-container .dots span.active:before {
background-color: #C85054;
opacity: 1;
}
.slider-container .slider {
display: block;
width: 650px;
height: 100%;
margin: 0 auto;
position: relative;
text-align: center;
line-height: 270px;
color: white;
}
#media (max-width: 768px) {
.slider-container .slider {
height: 450px;
}
}
.slider-container .slider .slide {
display: inline-block;
width: 80%;
height: 270px;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0) scale3d(0.4, 0.4, 1);
transition: transform 0.3s ease-in-out 0s, z-index .2s ease-in-out .1s;
background-color: #2C2A40;
}
.slider-container .slider .slide:nth-child(odd) {
background-color: gray;
}
#media (max-width: 768px) {
.slider-container .slider .slide {
width: 100%;
height: 450px;
}
}
.slider-container .slider .slide:nth-child(1) {
background-color: #505E63;
}
.slider-container .slider .slide:nth-child(2) {
background-color: #62698C;
}
.slider-container .slider .slide:nth-child(3) {
background-color: #2C2A40;
}
.slider-container .slider .slide:nth-child(4) {
background-color: #C85054;
}
.slider-container .slider .slide:nth-child(5) {
background-color: #F1BB70;
}
.slider-container .slider .slide.prev-2 {
transform: translate3d(-105%, -50%, 0) scale3d(0.4, 0.4, 1);
z-index: 1;
opacity: 0.5;
}
.slider-container .slider .slide.prev-1 {
transform: translate3d(-85%, -50%, 0) scale3d(0.6, 0.6, 1);
z-index: 2;
}
.slider-container .slider .slide.next-1 {
z-index: 2;
transform: translate3d(-15%, -50%, 0) scale3d(0.6, 0.6, 1);
}
.slider-container .slider .slide.next-2 {
z-index: 1;
transform: translate3d(5%, -50%, 0) scale3d(0.4, 0.4, 1);
opacity: 0.5;
}
.slider-container .slider .slide.active {
z-index: 3;
transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
box-shadow: 0px 5px 15px 3px rgba(0, 0, 0, 0.3);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<div class="slider-container">
<span class="arrow-left"></span>
<span class="arrow-right"></span>
<div class="slider" id="slider">
<div class="slide prev-2">
1
</div>
<div class="slide prev-1">
2
</div>
<div class="slide active">
3
</div>
<div class="slide next-1">
4
</div>
<div class="slide next-2">
5
</div>
<div class="slide">
6
</div>
<div class="slide">
7
</div>
<div class="slide">
8
</div>
</div>
<div class="dots">
<span></span>
<span></span>
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
Please help me fix this. Thanks.