Hello I have some problems on showing my menu bar when I am looking it from laptop or other devices and I was wondering if someone can help me! The problem is whenever I scroll down to the slideshow or where is the video my menu bar disappear behind the slideshow or the video. I think you will understand it perfectly when you try it.
<!--JavaScript-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(window).on('scroll', function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
});
function toggleMenu(x) {
x.classList.toggle('openMenu');
}
</script>
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
/*Menu Bar*/
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 0 100px;
transition: all 300ms;
}
nav.black {
background: rgba(0, 0, 0, 0.8);
}
nav .logo {
display: inline-block;
width: 25%;
padding: 0 5px;
line-height: 80px;
font-size: 24px;
transition: all 0.3s;
text-align: center;
}
nav.black .logo {
color: #fff;
}
nav a {
display: inline-block;
width: 12.5%;
line-height: 80px;
color: #151515;
padding: 0 5px;
text-decoration: none;
text-transform: uppercase;
transition: .3s;
text-align: center;
vertical-align: top;
}
nav.black a {
color: #fefefe;
}
nav a:focus {
outline: none;
}
nav a.active {
background: #E2472F;
color: #fff;
border-radius: 6px;
}
section.sec1 {
width: 100%;
height: 100vh;
background: url(img/lol.jpg);
background-size: cover;
background-position: center;
}
/* Hamburger icon */
.hamburger {
display: none;
cursor: pointer;
}
.hamburger .bar1,
.hamburger .bar2,
.hamburger .bar3 {
width: 35px;
height: 5px;
background-color: #fefefe;
margin: 6px 0;
transition: all 0.4s;
}
.openMenu .hamburger .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.openMenu .hamburger .bar2 {
opacity: 0;
}
.openMenu .hamburger .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
/*Media*/
#media(max-width: 860px) {
nav {
background: rgba(0, 0, 0, 0.8);
padding: 0 20px;
color: #fefefe;
overflow: hidden;
}
.logo {
position: fixed;
top: 0;
}
nav a {
width: 100%;
line-height: calc((100vh - 80px) / 6);
transform: translateY(80px);
visibility: hidden;
}
.openMenu a {
color: #fefefe;
visibility: visible;
}
.hamburger {
display: inline-block;
position: absolute;
right: 20px;
top: 20px;
}
.openMenu {
height: 100vh;
}
.slider {
width: 100%;
height: 23%;
}
section.sec1 {
width: 100%;
height: 30%;
}
article#video{
width: 100%;
}
video{
width: 100%;
}
aside{
border-bottom:#e8491d 3px solid;
width: 100%;
height: 250px;
}
aside#welcometext{
font-family: cursive;
width: 100%;
height: 76%;
}
aside#New{
font-family: serif;
height: 100%;
width: 100%;
}
}
/*Slideshow*/
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.slider {
overflow: hidden;
height: 450px%;
}
.slider figure div{
width: 20%;
float: left;
}
.slider figure img{
width: 100%;
float: left;
}
.slider figure{
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 25s slidy infinite;
}
#keyframes slidy{
0% {
left: 0%;
}
10% {
left: 0%;
}
12% {
left: -100%;
}
22% {
left: -100%;
}
24% {
left: -200%;
}
34% {
left: -200%;
}
36% {
left: -300%;
}
46% {
left: -300%;
}
48% {
left: -400%;
}
58% {
left: -400%;
}
60% {
left: -300%;
}
70% {
left: -300%;
}
72% {
left: -200%;
}
82% {
left: -200%;
}
84% {
left: -100%;
}
94% {
left: -100%;
}
96% {
left: 0%;
}
}
/*Welcome*/
article{
float: left;
margin: 0 auto;
width: 23%;
height: auto;
}
#welcometext{
float: right:
margin: 0 auto;
width: 100%;
height: auto;
border-bottom:#e8491d 3px solid;
height: 38%;
}
#News1{
margin-left: 5%;
width: 52%;
height: 7%;
display: inline-flex;
}
section.News{
border-bottom:#e8491d 3px solid;
height: 100%;
}
aside#New{
padding: 27%;
height: 100%;
width: 100%;
font-family: cursive;
}
<html>
<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> Landschaft </title>
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link rel="stylesheet" href="https//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<!--Body-->
<body>
<div class="wrapper">
<nav>
<div class="hamburger" onclick="toggleMenu(this.parentNode);">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="logo">Landschaft</div><a href="index.html">НАЧАЛО</a
><a href="about.html">СЪБИТИЯ</a
><a href="index.html">ПЪТЕКИ</a
><a href="index.html">ФОРУМ</a
><a href="index.html">ВРЪЗКИ</a
><a class="active" href="index.html">ВХОД</a>
</nav>
<!--Section - Slideshow-->
<section class="sec1"></section>
<section class="content">
<div class="slider">
<figure>
<div class="slide">
<img src="img/slideshow1.jpg">
</div>
<div class="slide">
<img src="img/slideshow2.jpg">
</div>
<div class="slide">
<img src="img/slideshow3.jpg">
</div>
<div class="slide">
<img src="img/slideshow4.jpg">
</div>
<div class="slide">
<img src="img/slideshow5.jpg">
</div>
</figure>
</div>
</section>
<!--Section Welcome Video-->
<section class="Welcome">
<article id="video">
<video width="295" height="238" controls autopl>
<source src="video.mp4" type="video/mp4">
</video>
</article>
<aside id="welcometext">
<h2><center>Welcome</center></h2>
<center><p>Lamium (dead-nettles) is a genus of about 40–50 species of flowering plants in the family Lamiaceae,[3] of which it is the type genus. They are all herbaceous plants native to Europe, Asia, and northern Africa, but several have become very successful weeds of crop fields and are now widely naturalised across much of the temperate world.[2][4][5]</p></center>
</aside>
</section>
<!--Section News-->
<section class="News">
<article id="News1">
<img id ="News1" src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg">
<img id ="News1" src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg">
<img id ="News1" src="https://cdn.pixabay.com/photo/2017/03/14/17/43/mountain-2143877_960_720.jpg">
</article>
<aside id="New">
<p> dsadas das </p>
</aside>
</section>
</div>
</body>
</html>
Adding a z-index rule to your nav element solved the problem on my end.
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 0 100px;
transition: all 300ms;
z-index: 100;
}
Here is a little read on the subject
Give your header/nav a z-index:
nav {z-index:100}
Z-index positions your content in front-back space. The higher the value the closer to the front the element will be.
Related
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.
My webpage has an element that gets removed when the URL parameters change. One element is supposed to display and the other is supposed to disappear. My attempt was to change the class using classList.add() and classList.remove(). The code that should-have worked:
if (pageType === "signup") {
console.log ("signup")
signupConfirm.classList.remove ("hidden");//doesn't seem to work
questionConfirm.classList.add ("hidden");
//triger function
signupConfirmCode()
}
else {
console.log ("hello")
}
View the problem here:
https://cheerful-sable-4fff28.netlify.app/sucuss.html?page-type=signup
All Code:
HTML/JS
<!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">
<title>Succes | The Coders Club</title>
<link rel="icon" href="img_2.jpg">
<link rel="stylesheet" href="Styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&family=Poppins:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="info_styles.css">
</head>
<body>
<div class="nav-bar">
<nav>
<img src="img_2.jpg" class="nav-img">
<div class="nav-options">
<button class="nav-option">About Us</button>
<button class="nav-option">Classes</button>
<button class="nav-option">Contact Us</button>
</div>
</nav>
</div>
<div class="welcome" id="question-confirm">
<div class="success" style="height: 50%; position:absolute; bottom: 200px;">
<h1>Your Question is in!</h1>
<p>For your reference, this is what you wrote:</p>
<div id="wrote"></div>
<h2>While you wait why not?</h2>
<button class="standard-button" style="width: 250px; height: 50px;">Check out our classes</button><br><br>
<button class="standard-button" style="width: 250px; height: 50px;">Read the about us page</button><br><br>
<button class="standard-button" style="width: 250px; height: 50px;">Head to our homepage</button><br><br>
</div>
<div class="signup hidden welcome" id="signup-confirm">
<div class="success">
<h1>Success! Your child(ren) enrolled!</h1>
<p>A conformation will be sent to your email address. For your refernce below are the detials you entered into the signup form. If you need to change <strong>any</strong> of these details please contact me.</p>
<div class="signup-infomation">
<h2>Parent Name</h2>
<li id="parent-name-confirm">Error no parent name</li>
<h2>Student Name(s)</h2>
<li id="student-names">Error no student(s) name</li>
<h2>Parent Email Address</h2>
<li id="email-confirm">Error no parent email address found</li>
<h2>Parent Phone Number</h2>
<li id="parent-phone">Error no parent name</li><br><br>
<p>This info is very important. It may be a good idea to bookmark or</p>
<button class="standard-button" onclick="window.print();">Print this info</button><br><br>
</div>
<h3>Please remeber to bring <span id="confirm-price">$39</span> cash to pay Ethan.</h3>
</div>
</div>
<script>
var signupConfirm = document.getElementById ("signup-confirm");
var questionConfirm = document.getElementById ("question-confirm");
console.log (signupConfirm)
const urlParams = new URLSearchParams(window.location.search);
var pageType = urlParams.get("page-type");
var signupConfirmCode = function () {
var parentNameConfirm = document.getElementById ("parent-name-confirm");
parentNameConfirm.textContent = localStorage.getItem("parent_name");
var studentNamesConfirm = document.getElementById ("student-names");
studentNamesConfirm.textContent = localStorage.getItem("child_names");
var parentEmailConfirm = document.getElementById ("email-confirm");
parentEmailConfirm.textContent = localStorage.getItem("email_confirm");
var parentPhoneConfirm = document.getElementById ("parent-phone");
parentPhoneConfirm.textContent = localStorage.getItem("parent_phone");
};
if (pageType === "signup") {
console.log ("signup")
signupConfirm.classList.remove ("hidden");
questionConfirm.classList.add ("hidden")
signupConfirmCode()
}
else {
console.log ("hello")
}
</script>
<script>
var wrote = document.getElementById ("wrote");
wrote.innerHTML = sessionStorage.getItem ("Tiny-Data")
</script>
</body>
</html>
CSS
body {
overflow-x: hidden;
font-size: large;
margin: 0;
}
.welcome {
text-align: center;
background-image: url("img_1.jpg");
background-size: cover;
background-repeat: no-repeat;
height: 95vh;
color: white;
position: absolute;
top: 100px;
min-width: 100%;
padding: 0 auto;
}
.welcome-txt {
position: absolute;
top: 40%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
h1, h2, h3, h4 {
font-family: 'Montserrat', sans-serif;
}
.nav-bar {
z-index: 98;
background-color: rgba(204, 204, 204, 0.8);
padding: 15px;
}
.nav-img {
height: 100px;
}
.nav-options {
float: right;
padding-right: 50px;
}
.nav-option {
border: none;
background-color: rgba(204, 204, 204, 0.1);
height: 100px;
width: 150px;
font-size: large;
cursor: pointer;
transition: all 0.5s ease-out;
position: relative;
bottom: 15px;
}
.nav-option:hover {
background-color: rgba(204, 204, 204, 0.1);
color: white;
}
p, ul, ol, li, select {
font-family: 'Poppins', sans-serif;
}
footer {
position: absolute;
top: 3000px;
width: 100%;
}
.footer-list {
list-style: none;
}
.footer-secetion {
position: absolute;
bottom: 200px;
text-align: center;
}
.content {
position: absolute;
top: 1200px;
text-align: center;
margin-left: 30%;
}
input {
height: 30px;
width: 300px;
}
::placeholder {
text-align: center;
font-family: 'Poppins', sans-serif;
}
textarea {
resize: none;
width: 700px;
height: 400px;
}
.standard-button {
background-color: rgb(16, 92, 116);
color: white;
border: none;
border-radius: 5px;
height: 30px;
width: 150px;
font-size: medium;
cursor: pointer;
transition: all 0.5s ease-out;
}
.standard-button:hover {
width: 175px;
height: 40px;
}
.hidden {
display: none;
}
.info-content {
position: absolute;
top: 1075px;
text-align: center;
background-image: url("img_5.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}
.info-content-blocks {
background-color: rgba(204, 204, 204, 0.8);
margin: 30px;
padding: 30px;
}
.diveder {
width: 100%;
height: 100px;
background-color: rgba(204, 204, 204, 0.8);
padding-top: 2%;
padding-bottom: 1%;
}
.success {
background-color: rgba(255, 255, 255, 0.808);
margin-left: 1.75%;
padding: 30px;
height: 80%;
position: absolute;
bottom: 100px;
color: black;
width: 93%;
}
.signup-infomation {
border: 1px solid;
width: 45%;
position: relative;
left: 25%;
overflow-y: hidden;
overflow-x: scroll;
}
select {
width: 150px;
height: 35px;
font-size: medium;
}
.line {
width: 50px;
background-color: white;
z-index: 99;
height: 0.5px;
}
.hamburger-menu {
background-color: transparent;
border: none;
position: absolute;
left: 85%;
top: 30px;
}
.mobile-nav {
display: none;
}
.mobile-menu {
margin: 50px;
padding: 0;
z-index: 98;
position: fixed;
right: 0%;
bottom: -6%;
background-color:rgba(204, 204, 204, 0.8);
width: 100%;
height: 110%;
margin-left:auto;
margin-right:auto;
padding: 50px;
}
.mobile-options {
position: absolute;
list-style: none;
top: 0;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
height: 110%;
}
.mobile-option {
width: 100%;
height: 50px;
font-size: large;
letter-spacing: 2px;
line-height: 100%;
text-align: center;
background-color: rgba(204, 204, 204, 0.8);
border: none;
padding-right: 60px;
}
.exit-btn {
width: 50px;
background-color: transparent;
border: none;
font-size: 4rem;
color: white;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
float: right;
position: absolute;
bottom: 75%;
left: 75%;
}
.fade-out {
opacity: 0;
transition: all 3000ms ease-in-out;
}
.fade-in {
opacity: 1;
transition: all 3000ms ease-in-out;
}
.arrow
{
position: relative;
bottom: -2rem;
left: 50%;
margin-left:-20px;
width: 40px;
height: 40px;
/**
* Dark Arrow Down
*/
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MTIiIGlkPSJzdmcyIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzIGlkPSJkZWZzNCIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTU0MC4zNjIyKSI+PHBhdGggZD0ibSAxMjcuNDA2MjUsNjU3Ljc4MTI1IGMgLTQuOTg1MywwLjA3ODQgLTkuOTEwNzcsMi4xNjMwOCAtMTMuNDM3NSw1LjY4NzUgbCAtNTUsNTUgYyAtMy42MDA1NjUsMy41OTkyNyAtNS42OTY4ODMsOC42NTg5NSAtNS42OTY4ODMsMTMuNzUgMCw1LjA5MTA1IDIuMDk2MzE4LDEwLjE1MDczIDUuNjk2ODgzLDEzLjc1IEwgMjQyLjI1LDkyOS4yNSBjIDMuNTk5MjcsMy42MDA1NiA4LjY1ODk1LDUuNjk2ODggMTMuNzUsNS42OTY4OCA1LjA5MTA1LDAgMTAuMTUwNzMsLTIuMDk2MzIgMTMuNzUsLTUuNjk2ODggTCA0NTMuMDMxMjUsNzQ1Ljk2ODc1IGMgMy42MDA1NiwtMy41OTkyNyA1LjY5Njg4LC04LjY1ODk1IDUuNjk2ODgsLTEzLjc1IDAsLTUuMDkxMDUgLTIuMDk2MzIsLTEwLjE1MDczIC01LjY5Njg4LC0xMy43NSBsIC01NSwtNTUgYyAtMy41OTgxNSwtMy41OTEyNyAtOC42NTA2OCwtNS42ODEyNyAtMTMuNzM0MzgsLTUuNjgxMjcgLTUuMDgzNjksMCAtMTAuMTM2MjIsMi4wOSAtMTMuNzM0MzcsNS42ODEyNyBMIDI1Niw3NzguMDMxMjUgMTQxLjQzNzUsNjYzLjQ2ODc1IGMgLTMuNjY2NzgsLTMuNjY0MjMgLTguODQ4MDEsLTUuNzY0NDIgLTE0LjAzMTI1LC01LjY4NzUgeiIgaWQ9InBhdGgzNzY2LTEiIHN0eWxlPSJmb250LXNpemU6bWVkaXVtO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7dGV4dC1pbmRlbnQ6MDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtZGVjb3JhdGlvbjpub25lO2xpbmUtaGVpZ2h0Om5vcm1hbDtsZXR0ZXItc3BhY2luZzpub3JtYWw7d29yZC1zcGFjaW5nOm5vcm1hbDt0ZXh0LXRyYW5zZm9ybTpub25lO2RpcmVjdGlvbjpsdHI7YmxvY2stcHJvZ3Jlc3Npb246dGI7d3JpdGluZy1tb2RlOmxyLXRiO3RleHQtYW5jaG9yOnN0YXJ0O2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO2NvbG9yOiMwMDAwMDA7ZmlsbDojMjIyMjIyO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDozOC44ODAwMDEwNzttYXJrZXI6bm9uZTt2aXNpYmlsaXR5OnZpc2libGU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZvbnQtZmFtaWx5OlNhbnM7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpTYW5zIi8+PC9nPjwvc3ZnPg==);
background-size: contain;
}
.bounce {
animation: bounce 2s infinite;
}
.arrow-background {
background-color: rgba(204, 204, 204, 0.8);
min-width: 100px;
padding: 25px;
border-radius: 100px;
margin: 0;
position: absolute;
top: 80%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
#media print {
.nav-bar {
display: none;
}
.standard-button {
display: none;
}
p {
display: none;
}
}
#media screen and (max-width: 830px) {
.desktop-nav {
display: none;
}
.mobile-nav {
display: inline-block;
}
}
Your problem seems to be the HTML, your #question-confirm seems to have a missing closing tag.
You need to add the missing </div>.
This is what makes #signup-confirm to be inside #question-confirm.
I have a timeline like this. But if there are a lot of points, it does not look very nice. How can I add functionality like a slider? To be displayed (only the first 5 years) and the rest to appear after the transition between years.
How can i do this? Or maybe there are some libraries with such functionality.
function initProgress() {
var activeDist = $(".slide a.active").position();
activeDist = activeDist.left;
$(".after").stop().animate({
width: activeDist + "px"
});
}
initProgress();
$("a").click(function(e) {
e.preventDefault();
$(".slide a").removeClass("active");
$(this).addClass("active");
initProgress();
});
$(window).resize(function() {
initProgress();
});
body {
background: royalblue;
margin: 0;
padding: 0;
}
.container {
position: relative;
}
.container .before,
.container .after {
z-index: -1;
position: absolute;
top: 50%;
left: 0;
width: 100%;
margin-top: -3px;
height: 4px;
background: cornflowerblue;
}
.container .after {
width: 50%;
background: white;
}
.container:before,
.container:after {
content: "";
display: block;
position: absolute;
top: 50%;
bottom: 0;
margin-top: -3px;
width: 44px;
height: 4px;
background-color: green;
}
.container:before {
left: 0;
background: white;
background: linear-gradient(90deg, royalblue 0%, white 100%, white 100%);
}
.container:after {
right: 0;
background: linear-gradient(270deg, royalblue 0%, cornflowerblue 100%, cornflowerblue 0%);
}
.timeline {
display: table;
table-layout: fixed;
margin-top: 60px;
width: 100%;
}
.time {
display: table-cell;
text-align: center;
}
.slide a {
display: inline-block;
position: relative;
width: 10px;
height: 10px;
border: 2px solid white;
border-radius: 100%;
background: royalblue;
color: white;
transition: 0.3s all ease;
}
.slide a.active,
.slide a:hover {
border-color: white;
background: white;
}
a.deactive {
border: none;
width: 0px;
}
.slide i {
display: block;
position: absolute;
top: -40px;
left: -12px;
width: 30px;
height: 30px;
border-radius: 100%;
line-height: 30px;
color: white;
font-style: normal;
font-size: 11px;
}
.slide span {
display: none;
opacity: 0;
display: block;
position: fixed;
top: 150px;
left: 0;
right: 0;
color: white;
}
a.active>i {
transform:scale(5);
}
a.active~span {
display: block;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="before"></div>
<div class="after"></div>
<div class="container__track timeline">
<div class="slide time">
<a class="" href=""><i>1979</i></a><span> 1979 </span>
</div>
<div class="slide time">
<a class="active" href=""><i>1980</i></a><span> 1980 </span>
</div>
<div class="slide time">
<i>1981</i><span> 1981 </span>
</div>
<div class="slide time">
<i>1983</i><span> 1983 </span>
</div>
<div class="slide time">
<i>1984</i><span> 1984 </span>
</div>
</div>
</div>
I transparent the color of the scroll on the horizontal if you want to change it according to your taste
.slides :: - webkit-scrollbar-thumb {
background: transparent;
border-radius: 10px;
}
function initProgress() {
var activeDist = $(".slide a.active").position();
activeDist = activeDist.left;
$(".after").stop().animate({
width: activeDist + "px"
});
}
initProgress();
$("a").click(function(e) {
$(".slide a").removeClass("active");
$(this).addClass("active");
initProgress();
});
$(window).resize(function() {
initProgress();
});
* {
box-sizing: border-box;
}
.slider {
width: 100%;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
width: 10px;
height: 0px;
}
.slides::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 100%;
height: 400px;
margin-right: 50px;
border-radius: 10px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.slides > div:target {
/* transform: scale(0.8); */
}
.author-info {
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 0.75rem;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
.author-info a {
color: white;
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slide > a {
display: inline-block;
position: relative;
width: 10px;
height: 10px;
border: 2px solid white;
border-radius: 100%;
background: royalblue;
color: white;
transition: 0.3s all ease;
}
.slide > a > i {
display: block;
position: absolute;
top: -40px;
left: -12px;
width: 30px;
height: 30px;
border-radius: 100%;
line-height: 30px;
color: white;
font-style: normal;
font-size: 11px;
}
.slide a.active,
.slide a:hover {
border-color: white;
background: white;
}
.slide a.deactive {
border: none;
width: 0px;
}
/* Don't need button navigation */
#supports (scroll-snap-type) {
.slider > a {
display: none;
}
}
html, body {
height: 100%;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, #74ABE2, #5563DE);
font-family: 'Ropa Sans', sans-serif;
}
.slide span {
display: none;
opacity: 0;
display: block;
position: fixed;
top: 150px;
left: 0;
right: 0;
color: white;
}
.slide a.active>i {
transform:scale(5);
}
.slide a.active~span {
display: block;
opacity: 1;
}
.time {
display: table-cell;
text-align: center;
}
.container {
position: relative;
}
.container .before,
.container .after {
z-index: -1;
position: absolute;
top: 50%;
left: 0;
width: 100%;
margin-top: -3px;
height: 4px;
background: cornflowerblue;
}
.container .after {
width: 50%;
background: white;
}
.container:before,
.container:after {
content: "";
display: block;
position: absolute;
top: 50%;
bottom: 0;
margin-top: -3px;
width: 44px;
height: 4px;
background-color: green;
}
.container:before {
left: 0;
background: white;
background: linear-gradient(90deg, royalblue 0%, white 100%, white 100%);
}
.container:after {
right: 0;
background: linear-gradient(270deg, royalblue 0%, cornflowerblue 100%, cornflowerblue 0%);
}
.timeline {
display: table;
table-layout: fixed;
margin-top: 60px;
width: 100%;
}
<div class="slider">
<div class="container">
<div class="before"></div>
<div class="after"></div>
<div class="container__track timeline">
<div class="slide time">
<i>1979</i>
</div>
<div class="slide time">
<i>1980</i>
</div>
<div class="slide time">
<i>1981</i>
</div>
<div class="slide time">
<i>1982</i>
</div>
<div class="slide time">
<i>1983</i>
</div>
<div class="slide time">
<i>1984</i>
</div>
</div>
</div>
<div class="slides">
<div id="slide-1">
<span> 1979 </span>
</div>
<div id="slide-2">
<span> 1980 </span>
</div>
<div id="slide-3">
<span> 1981 </span>
</div>
<div id="slide-4" >
<span> 1982 </span>
</div>
<div id="slide-5">
<span> 1983 </span>
</div>
<div id="slide-6">
<span> 1984 </span>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I'm creating a full page navigation shade for my site so that it's the same across all devices. At the moment I have two buttons, one for when the shade is in view and one for when it isn't. I'm wondering if it would be better to have one button always present so it can be animated? I'd be aiming for something like the squeeze animation here but I'm not sure how I'd go about animating that across the two buttons vs just one - or how you'd create it from scratch.
Here's what I'm working with;
const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');
function onClick(event) {
siteNav.classList.toggle('active');
}
navButtons.forEach(button => button.addEventListener('click', onClick));
.site-header {
height: 80px;
background-color: #FFFFFF;
display: inline-flex;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
box-shadow: 0px 0.5px 10px #000000;
}
.site-header-fill {
height: 80px;
}
.site-logo-container {
height: 60px;
margin-left: 20px;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
display: block;
float: left;
}
.site-logo {
height: 60px;
width: auto;
float: left;
}
.site-nav-action-container {
height: 50px;
width: 50px;
max-width: 50px;
margin-left: 10px;
margin-right: 10px;
margin-top: 15px;
margin-bottom: 15px;
display: block;
float: right;
text-align: right;
}
.site-nav {
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
background: #3399ff;
z-index: 2;
display: none;
}
.site-nav.active {
display: block;
}
.site-nav-content {
width: 20%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media only screen and (max-width: 500px) {
.site-nav-content {
width: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
.site-nav-pages {
text-align:center;
}
.nav-action {
height: 50px;
width: 50px;
}
<div class="site-header ">
<div class="site-logo-container">
<img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
</div>
<div class="site-nav-action-container">
<button class="nav-action">
<p>☰</p>
</button>
</div>
</div>
<div class="site-nav">
<div class="site-nav-action-container">
<button class="nav-action">
<p>×</p>
</button>
</div>
<div class="site-nav-content">
<div class="site-nav-pages">
<p>Page 1</p>
<p>Page 2</p>
<p>Page 3</p>
<p>Page 4</p>
<p>Page 5</p>
</div>
</div>
</div>
At the moment the shade now functions to be visible or not based on button pressed but I wonder if having one button is the way to go or if placing the icon outside of a button would work best.
Ideally the hamburger would animate as the shade is revealed from the top but I'll work on that once a sensible approach to the button is sorted. Any help would be appreciated because I clearly don't know what I'm doing here.
Thanks in advance.
You can use for the ☰ to × effect. You can write all the line labels yourself. the first code snippet is an animation that I use a lot, and the second is the animation that I think you want. I installed both so you can use whatever you want to use.
const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');
function onClick(event) {
siteNav.classList.toggle('active');
}
navButtons.forEach(button => button.addEventListener('click', onClick));
const menuIcon = document.querySelector(".menu-icon");
menuIcon.addEventListener("click", () => {
menuIcon.classList.toggle("toggle")
siteNav.classList.toggle('active');
})
.site-header {
height: 80px;
background-color: #FFFFFF;
display: inline-flex;
position: fixed;
top: 0;
left: 0;
right: 0;
box-shadow: 0px 0.5px 10px #000000;
}
.site-header-fill {
height: 80px;
}
.site-logo-container {
height: 60px;
margin-left: 20px;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
display: block;
float: left;
}
.site-logo {
height: 60px;
width: auto;
float: left;
}
.site-nav-action-container {
height: 50px;
width: 50px;
max-width: 50px;
margin-left: 10px;
margin-right: 10px;
margin-top: 15px;
margin-bottom: 15px;
display: block;
float: right;
text-align: right;
}
.site-nav {
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
background: #3399ff;
display: none;
}
.site-nav.active {
display: block;
}
.site-nav-content {
width: 20%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media only screen and (max-width: 500px) {
.site-nav-content {
width: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
.site-nav-pages {
text-align: center;
}
/* Menu icon */
.menu-icon {
cursor: pointer;
position: absolute;
z-index: 1;
}
.menu-icon div {
width: 25px;
height: 3px;
background-color: black;
margin: 5px;
transition: all .4s ease;
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
<!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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="site-header ">
<div class="site-logo-container">
<img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
</div>
<div class="site-nav-action-container">
<!-- Menu icon -->
<div class="menu-icon">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
<div class="site-nav">
<div class="site-nav-content">
<div class="site-nav-pages">
<p>Page 1</p>
<p>Page 2</p>
<p>Page 3</p>
<p>Page 4</p>
<p>Page 5</p>
</div>
</div>
</div>
</body>
</html>
const navButtons = document.querySelectorAll('button.nav-action');
const siteNav = document.querySelector('.site-nav');
function onClick(event) {
siteNav.classList.toggle('active');
}
navButtons.forEach(button => button.addEventListener('click', onClick));
let icon = document.getElementById("nav-icon");
icon.addEventListener("click", () => {
icon.classList.toggle("open")
siteNav.classList.toggle('active');
})
.site-header {
height: 80px;
background-color: #FFFFFF;
display: inline-flex;
position: fixed;
top: 0;
left: 0;
right: 0;
box-shadow: 0px 0.5px 10px #000000;
}
.site-header-fill {
height: 80px;
}
.site-logo-container {
height: 60px;
margin-left: 20px;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
display: block;
float: left;
}
.site-logo {
height: 60px;
width: auto;
float: left;
}
.site-nav-action-container {
height: 50px;
width: 50px;
max-width: 50px;
margin-left: 10px;
margin-right: 10px;
margin-top: 15px;
margin-bottom: 15px;
display: block;
float: right;
text-align: right;
}
.site-nav {
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
background: #3399ff;
display: none;
}
.site-nav.active {
display: block;
}
.site-nav-content {
width: 20%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media only screen and (max-width: 500px) {
.site-nav-content {
width: auto;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
.site-nav-pages {
text-align: center;
}
/* NAV ICON */
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2),
#nav-icon span:nth-child(3) {
top: 8px;
}
#nav-icon span:nth-child(4) {
top: 16px;
}
#nav-icon.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon.open span:nth-child(2) {
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(3) {
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon {
width: 30px;
height: 25px;
position: absolute;
transform: rotate(0deg);
transition: .5s ease-in-out;
cursor: pointer;
z-index: 1;
top: 30px;
}
#nav-icon span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #000;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
<div class="site-header ">
<div class="site-logo-container">
<img class="site-logo" src="https://via.placeholder.com/1000x300" alt="Logo">
</div>
<div class="site-nav-action-container">
<!-- Menu icon -->
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="site-nav">
<div class="site-nav-content">
<div class="site-nav-pages">
<p>Page 1</p>
<p>Page 2</p>
<p>Page 3</p>
<p>Page 4</p>
<p>Page 5</p>
</div>
</div>
</div>
I want to make the down arrow icons disappear when a user scroll down the page. Although I searched it on another question of stackoverflow, I cannot find a solution. I made jQuery code. I am not sure it is correct or not.
this is the code on fiddle
https://jsfiddle.net/92mtjzew/
main.js
$(document).ready(() => {
$('#slideshow .slick').slick({
autoplay: true,
autoplaySpeed: 2000,
dots: true,
});
});
$(document).ready(() => {
$('#userReview .slick').slick({
autoplayhttps://jsfiddle.net/92mtjzew/#: true,
autoplaySpeed: 8000,
dots: true,
});
});
$(window).scroll(function(){
if($(".box").toggle($(this).scrollTop() === 0) || ($(this).scrollTop() > 0)) {
$('.box').show();
} else {
$('.box').hide();
}
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tutorial</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="header">
<div class="logo">
<h1><img src="img/logo.png" widht="473px" height="50px"></h1>
</div>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu">
Work
About Us
Services
Blog
<span>Contact Us</span>
</div>
</div>
</div><!-- /#header -->
<section id="slideshow">
<div class="slick">
<div><img src="img/image1.jpg" width="1274px" height="640px" alt=""></div>
<div><img src="img/image2.jpg" width="1274px" height="640px" alt=""></div>
<div><img src="img/image3.jpg" width="1274px" height="640px" alt=""></div>
</div>
</section>
<div class="box">
<span onclick="scrollDown()"></span>
<span onclick="scrollDown()"></span>
<span onclick="scrollDown()"></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="js/main.js"></script>
<script>
function scrollDown(){
var businessPage = document.getElementById("businessPage");
businessPage.scrollIntoView();
}
</script>
</body>
</html>
style.css
#media only screen and (max-width: 2000px) {
html, body {
width: 100%;
height: 100%;
margin: 0;
background: linear-gradient(#FBDA61, #FF3CAC);
overflow-x: hidden;
color: cornsilk;
}
a {
text-decoration: none;
}
h1 {
font-size: 26pt;
}
button {
text-transform: uppercase;
font-weight: bold;
}
html {
font-family: "helvetica neue", sans-serif;
}
.box {
position: absolute;
top: 94%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
display: fixed
}
.box span {
display: fixed;
width: 20px;
height: 20px;
border-bottom: 3px solid white;
border-right: 3px solid white;
transform: rotate(45deg);
margin: -10px;
transition: all .3s;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
z-index: 1;
animation: animate 2s infinite;
}
.box span:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
z-index: -2;
}
.box span:before {
content: '';
color: cornsilk;
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #d3d3d3;
transition: all .3s;
z-index: -1;
}
.box span:hover {
color: #fff;
}
.box span:hover:before {
width: 100%;
}
.box span:nth-child(1) {
opacity: 0.3;
z-index: 1;
}
.box span:nth-child(2) {
opacity: 0.5;
z-index: 1;
}
.logo h1 {
margin: 0px
}
.logo img{
text-align: left;
float: left;
padding: 15px 0 0 0;
}
.nav {
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: 80px;
line-height: 70px;
background-color: black;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
clear: right;
text-decoration: none;
color: cornsilk;
margin: 0 10px;
line-height: 70px;
}
span {
color: #54D17A;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
display: none;
float: right;
color: cornsilk;
}
#toggle {
display: none;
}
#slideshow {
position: relative;
top: 0px;
left: 0px;
}
#slideshow {
div {
width: 100%;
height: 300px;
img {
width: 100%;
height: auto;
}
}
}
Try the following example
.hidden{display:none !important;}
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 210) {
$('.box').removeClass("hidden");
} else {
$('.box').addClass("hidden");
}
});
});