How to display another page without reloading?

How to display another page without reloading? - javascript

I'm working on Admin panel for my Portfolio page.
body {
margin: 0;
background-color: #E0E0E0;
}
.navbar {
width: 100%;
height: 40px;
background-color: #21262a;
position: fixed;
top: 0;
display: block;
}
.navbar .adminText {
color: #d9f3fe;
position: absolute;
font-family: sans-serif;
top: 50%;
margin-left: 10px;
transform: translateY(-50%);
text-transform: uppercase;
font-weight: 600;
cursor: default;
user-select: none;
}
.navbar .logout {
float: right;
position: relative;
top: 50%;
transform: translateY(-50%);
border-style: none;
height: 100%;
width: 100px;
background-color: #21262a;
color: #d9f3fe;
transition: .2s;
}
.logout:hover {
background-color: #181b20;
cursor: pointer;
}
.logout:focus {
outline: none;
}
.control {
height: calc(100% - 40px);
width: 20%;
background-color: #21262a;
position: fixed;
left: 0;
bottom: 0;
}
.control .dashboard {
position: relative;
width: 100%;
height: 50px;
border: none;
background-color: #21262a;
color: #d9f3fe;
font-size: 1.1em;
transition: .3s;
text-align: left;
}
.control .dashboard:hover {
background-color: #181b20;
cursor: pointer;
}
.control .dashboard:focus {
outline: none;
}
.control .dashboard i {
margin-right: 10px;
float: left;
margin-left: 10px;
}
.workStation {
position: absolute;
height: calc(100%-40px);
width: 80%;
right: 0;
top: 40px;
z-index: 100;
}
#active {
background-color: #006da0;
}
#active:after {
content: "";
height: 20px;
width: 20px;
position: absolute;
background-color: #E0E0E0;
transform: rotate(45deg);
right: -10px;
}
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
</head>
<div class="navbar">
<h class="adminText">Zenzzex Portfolio Admin Panel</h>
<button class="logout">LOGOUT</button>
</div>
<aside class="control">
<button class="dashboard" id="active"> <i class="fas fa-tachometer-alt"></i> Dashboard</button>
<button class="dashboard"> <i class="fas fa-images"></i> Posts</button>
<button class="dashboard"> <i class="fas fa-plus-square"></i> Add post</button>
</aside>
<aside class="workStation">
<h1>THis is DASHBOARD</h1>
</aside>
That's my page.
Now, I will have it linked to my database, I'm doing it in PHP, but for now I'm working on frontend.
So When I click on Posts I want to display content for that page in this gray area that is empty.
I think You know What I mean by now.
So what's the best way to do it? Keep in mind, I'm doing my backend system in PHP.

An easy way to do this is by using the state pattern. This will let you load different pages by changing the state of your application. Let me show you an example of doing this.
<div id="content"></div>
const content = document.getElementById('content');
const PageState = function() {
let currentState = new homeState(this);
this.change = state => currentState = state;
}
const homeState = function() {
content.innerHTML = `This is my home page`;
}
const aboutState = function() {
content.innerHTML = `This is my about page`;
}
const page = new PageState();
page.change(new homeState);
You have the content element as the main tag of the page, then you simply call page.change() with the new state you want to have. This lets you avoid changing the page & only changing the content of it.
This will let you achieve a single page application without a javascript framework like react.js or vue.js. It's a neat & simple way to get started.

Please try this
$(document).ready(() => {
let return_text = true;
let $content = $('.workStation');
let $button = $('button.dashboard');
if($button.attr('id') === 'active'){
let data_uri = $button.data('uri');
return_data($content,data_uri, return_text)
}
$button.click(function (e) {
e.stopPropagation();
e.preventDefault();
$this = $(this);
$this.attr('id', 'active').siblings().removeAttr('id', 'active');
let data_uri = $this.data('uri');
return_data($content,data_uri, return_text)
});
function return_data($content,data_uri, return_text) {
if (return_text) {
$content.html(`<h1>${data_uri}</h1>`);
} else {
//Ajax
$.get(data_uri).done(function (response, status){
if(status === 'success'){
$content.html(response);
}else{
alert('error! '+status);
}
}).fail(function(jqXHR, textStatus){
alert("Request failed: " + textStatus);
})
}
}
});
body {
margin: 0;
background-color: #E0E0E0;
}
.navbar {
width: 100%;
height: 40px;
background-color: #21262a;
position: fixed;
top: 0;
display: block;
}
.navbar .adminText {
color: #d9f3fe;
position: absolute;
font-family: sans-serif;
top: 50%;
margin-left: 10px;
transform: translateY(-50%);
text-transform: uppercase;
font-weight: 600;
cursor: default;
user-select: none;
}
.navbar .logout {
float: right;
position: relative;
top: 50%;
transform: translateY(-50%);
border-style: none;
height: 100%;
width: 100px;
background-color: #21262a;
color: #d9f3fe;
transition: .2s;
}
.logout:hover {
background-color: #181b20;
cursor: pointer;
}
.logout:focus {
outline: none;
}
.control {
height: calc(100% - 40px);
width: 20%;
background-color: #21262a;
position: fixed;
left: 0;
bottom: 0;
}
.control .dashboard {
position: relative;
width: 100%;
height: 50px;
border: none;
background-color: #21262a;
color: #d9f3fe;
font-size: 1.1em;
transition: .3s;
text-align: left;
}
.control .dashboard:hover {
background-color: #181b20;
cursor: pointer;
}
.control .dashboard:focus {
outline: none;
}
.control .dashboard i {
margin-right: 10px;
float: left;
margin-left: 10px;
}
.workStation {
position: absolute;
height: calc(100% - 40px);
width: 80%;
right: 0;
top: 40px;
z-index: 100;
}
#active {
background-color: #006da0;
}
#active:after {
content: "";
height: 20px;
width: 20px;
position: absolute;
background-color: #E0E0E0;
transform: rotate(45deg);
right: -10px;
}
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="navbar">
<h class="adminText">Zenzzex Portfolio Admin Panel</h>
<button class="logout">LOGOUT</button>
</div>
<aside class="control">
<button class="dashboard" id="active" data-uri="This is Dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard
</button>
<button class="dashboard" data-uri="This is Post"><i class="fas fa-images"></i> Posts</button>
<button class="dashboard" data-uri="This is Add post"><i class="fas fa-plus-square"></i> Add post</button>
</aside>
<aside class="workStation"></aside>

This code is simple in each button there is an attribute data-page="" put the name of the page in data-page="exemple.php or path/exemple.php"
$(document).ready(() => {
let $content = $('.workStation');
let $button = $('button.dashboard');
if ($button.attr('id') === 'active') {
let $data_uri = $button.data('page');
return_page($content, $data_uri)
}
$button.click(function (e) {
e.stopPropagation();
e.preventDefault();
$this = $(this);
$this.attr('id', 'active').siblings().removeAttr('id');
let $data_uri = $this.data('page');
if ($data_uri !== '') {
return_page($content, $data_uri);
}else{
$content.html('<h1>Empty data-uri attribute<h1/>');
}
});
function return_page($content, $data_uri) {
$($content).load( $data_uri,function(responseText,textStatus){
if(textStatus === 'error') $content.html(`<h1>${$data_uri} Page not found<h1/>`);
});
}
});
body {
margin: 0;
background-color: #E0E0E0;
}
.navbar {
width: 100%;
height: 40px;
background-color: #21262a;
position: fixed;
top: 0;
display: block;
}
.navbar .adminText {
color: #d9f3fe;
position: absolute;
font-family: sans-serif;
top: 50%;
margin-left: 10px;
transform: translateY(-50%);
text-transform: uppercase;
font-weight: 600;
cursor: default;
user-select: none;
}
.navbar .logout {
float: right;
position: relative;
top: 50%;
transform: translateY(-50%);
border-style: none;
height: 100%;
width: 100px;
background-color: #21262a;
color: #d9f3fe;
transition: .2s;
}
.logout:hover {
background-color: #181b20;
cursor: pointer;
}
.logout:focus {
outline: none;
}
.control {
height: calc(100% - 40px);
width: 20%;
background-color: #21262a;
position: fixed;
left: 0;
bottom: 0;
}
.control .dashboard {
position: relative;
width: 100%;
height: 50px;
border: none;
background-color: #21262a;
color: #d9f3fe;
font-size: 1.1em;
transition: .3s;
text-align: left;
}
.control .dashboard:hover {
background-color: #181b20;
cursor: pointer;
}
.control .dashboard:focus {
outline: none;
}
.control .dashboard i {
margin-right: 10px;
float: left;
margin-left: 10px;
}
.workStation {
position: absolute;
height: calc(100% - 40px);
width: 80%;
right: 0;
top: 40px;
z-index: 100;
}
#active {
background-color: #006da0;
}
#active:after {
content: "";
height: 20px;
width: 20px;
position: absolute;
background-color: #E0E0E0;
transform: rotate(45deg);
right: -10px;
}
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="navbar">
<h class="adminText">Zenzzex Portfolio Admin Panel</h>
<button class="logout">LOGOUT</button>
</div>
<aside class="control">
<button class="dashboard" id="active" data-page="dashboard.html"><i class="fas fa-tachometer-alt"></i> Dashboard
</button>
<button class="dashboard" data-page="post.html"><i class="fas fa-images"></i> Posts</button>
<button class="dashboard" data-page="add_post.html"><i class="fas fa-plus-square"></i> Add post</button>
</aside>
<aside class="workStation"></aside>
</body>

Please try this
$('#post').click(function(){
$('.title-dashboard').hide();
$('.title-post').show();
$('#dasboard').removeClass('active');
$('#post').addClass('active');
});
$('#dasboard').click(function(){
$('.title-dashboard').show();
$('.title-post').hide();
$('#post').removeClass('active');
$('#dasboard').addClass('active');
});
body {
margin: 0;
background-color: #E0E0E0;
}
.navbar {
width: 100%;
height: 40px;
background-color: #21262a;
position: fixed;
top: 0;
display: block;
}
.navbar .adminText {
color: #d9f3fe;
position: absolute;
font-family: sans-serif;
top: 50%;
margin-left: 10px;
transform: translateY(-50%);
text-transform: uppercase;
font-weight: 600;
cursor: default;
user-select: none;
}
.navbar .logout {
float: right;
position: relative;
top: 50%;
transform: translateY(-50%);
border-style: none;
height: 100%;
width: 100px;
background-color: #21262a;
color: #d9f3fe;
transition: .2s;
}
.logout:hover {
background-color: #181b20;
cursor: pointer;
}
.logout:focus {
outline: none;
}
.control {
height: calc(100% - 40px);
width: 20%;
background-color: #21262a;
position: fixed;
left: 0;
bottom: 0;
}
.control .dashboard {
position: relative;
width: 100%;
height: 50px;
border: none;
background-color: #21262a;
color: #d9f3fe;
font-size: 1.1em;
transition: .3s;
text-align: left;
}
.control .dashboard:hover {
background-color: #181b20;
cursor: pointer;
}
.control .dashboard:focus {
outline: none;
}
.control .dashboard i {
margin-right: 10px;
float: left;
margin-left: 10px;
}
.workStation {
position: absolute;
height: calc(100%-40px);
width: 80%;
right: 0;
top: 40px;
z-index: 100;
}
.active {
background-color: #006da0;
}
.active:after {
content: "";
height: 20px;
width: 20px;
position: absolute;
background-color: #E0E0E0;
transform: rotate(45deg);
right: -10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
</head>
<div class="navbar">
<h class="adminText">Zenzzex Portfolio Admin Panel</h>
<button class="logout">LOGOUT</button>
</div>
<aside class="control">
<button class="dashboard" class="active" id="dasboard"> <i class="fas fa-tachometer-alt"></i> Dashboard</button>
<button class="dashboard" id="post"> <i class="fas fa-images"></i> Posts</button>
<button class="dashboard"> <i class="fas fa-plus-square"></i> Add post</button>
</aside>
<aside class="workStation">
<h1 class="title-dashboard">THis is DASHBOARD</h1>
<h1 style="display:none;" class="title-post">THis is POST</h1>
</aside>

Related

How to change the showing section with javascript

i am trying to develop a "dashboard" style website, using php, javascript, html and css. After i made the sidebar, i am trying to change the "page", like, the user is in the home page, after he clicks in any icon of the sidebar, he would change the section (it was hidden, now it is show, for example), without changing the page. I am using a script that i used in another website that i made, but can't figure it out to work in this project, i don't know if it is because i am using php (in the other project, i didn't), or i am messing up the code. If anyone can help, i would appreciate ;)
!(function($) {
"use strict";
// Nav Menu
$(document).on('click', '.nav-menu a, .mobile-nav a', function(e) {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var hash = this.hash;
var target = $(hash);
if (target.length) {
e.preventDefault();
if ($(this).parents('.nav-menu, .mobile-nav').length) {
$('.nav-menu .active, .mobile-nav .active').removeClass('active');
$(this).closest('li').addClass('active');
}
if (hash == '#home') {
$('#home').removeClass('home-top');
$("section").removeClass('section-show');
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
return;
}
if (!$('#home').hasClass('home-top')) {
$('#home').addClass('home-top');
setTimeout(function() {
$("section").removeClass('section-show');
$(hash).addClass('section-show');
}, 350);
} else {
$("section").removeClass('section-show');
$(hash).addClass('section-show');
}
$('html, body').animate({
scrollTop: 0
}, 350);
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
return false;
}
}
});
// Activate/show sections on load with hash links
if (window.location.hash) {
var initial_nav = window.location.hash;
if ($(initial_nav).length) {
$('#home').addClass('home-top');
$('.nav-menu .active, .mobile-nav .active').removeClass('active');
$('.nav-menu, .mobile-nav').find('a[href="' + initial_nav + '"]').parent('li').addClass('active');
setTimeout(function() {
$("section").removeClass('section-show');
$(initial_nav).addClass('section-show');
}, 350);
}
}
// Mobile Navigation
if ($('.nav-menu').length) {
var $mobile_nav = $('.nav-menu').clone().prop({
class: 'mobile-nav d-lg-none'
});
$('body').append($mobile_nav);
$('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="icofont-navigation-menu"></i></button>');
$('body').append('<div class="mobile-nav-overly"></div>');
$(document).on('click', '.mobile-nav-toggle', function(e) {
$('body').toggleClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').toggle();
});
$(document).click(function(e) {
var container = $(".mobile-nav, .mobile-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
}
});
} else if ($(".mobile-nav, .mobile-nav-toggle").length) {
$(".mobile-nav, .mobile-nav-toggle").hide();
}
})(jQuery);
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 14px;
line-height: 1.3;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
body {
background: #2d2d2d;
display: flex;
min-height: 100vh;
min-width: 100vw;
overflow: hidden;
color: white;
padding: 16px;
}
.sidebar{
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 78px;
background: #0f0f0f;
padding: 6px 14px;
z-index: 99;
transition: all 0.5s ease;
}
.sidebar.open{
width: 250px;
}
.sidebar .logo-details{
height: 60px;
display: flex;
align-items: center;
position: relative;
}
.sidebar .logo-details .icon{
opacity: 0;
transition: all 0.5s ease;
}
.sidebar .logo-details .logo_name{
color: #fff;
font-size: 20px;
font-weight: 600;
opacity: 0;
transition: all 0.5s ease;
}
.sidebar.open .logo-details .icon,
.sidebar.open .logo-details .logo_name{
opacity: 1;
padding-left: 20px;
}
.sidebar .logo-details #btn{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
font-size: 22px;
transition: all 0.4s ease;
font-size: 23px;
text-align: center;
cursor: pointer;
transition: all 0.5s ease;
}
.sidebar.open .logo-details #btn{
text-align: right;
}
.sidebar i{
color: #fff;
height: 60px;
min-width: 50px;
font-size: 28px;
text-align: center;
line-height: 60px;
}
.sidebar .nav-list{
margin-top: 20px;
height: 100%;
}
.sidebar li{
position: relative;
margin: 8px 0;
list-style: none;
}
.sidebar li .tooltip{
position: absolute;
top: -20px;
left: calc(100% + 15px);
z-index: 3;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
padding: 6px 12px;
border-radius: 4px;
font-size: 15px;
font-weight: 400;
opacity: 0;
white-space: nowrap;
pointer-events: none;
transition: 0s;
}
.sidebar li:hover .tooltip{
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
top: 50%;
transform: translateY(-50%);
}
.sidebar.open li .tooltip{
display: none;
}
.sidebar input{
font-size: 15px;
color: #FFF;
font-weight: 400;
outline: none;
height: 50px;
width: 100%;
width: 50px;
border: none;
border-radius: 12px;
transition: all 0.5s ease;
background: #0f0f0f;
}
.sidebar.open input{
padding: 0 20px 0 50px;
width: 100%;
}
.sidebar .bx-search{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 22px;
background: #0f0f0f;
color: #FFF;
}
.sidebar.open .bx-search:hover{
background: #0f0f0f;
color: #FFF;
}
.sidebar .bx-search:hover{
background: #FFF;
color: #2d2d2d;
}
.sidebar li a{
display: flex;
height: 100%;
width: 100%;
border-radius: 12px;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
background: #0f0f0f;
}
.sidebar li a:hover{
background: #FFF;
}
.sidebar li a .links_name{
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: 0.4s;
}
.sidebar.open li a .links_name{
opacity: 1;
pointer-events: auto;
}
.sidebar li a:hover .links_name,
.sidebar li a:hover i{
transition: all 0.5s ease;
color: #11101D;
}
.sidebar li i{
height: 50px;
line-height: 50px;
font-size: 18px;
border-radius: 12px;
}
.sidebar li.profile{
position: fixed;
height: 60px;
width: 78px;
left: 0;
bottom: -8px;
padding: 10px 14px;
background: #0f0f0f;
transition: all 0.5s ease;
overflow: hidden;
}
.sidebar.open li.profile{
width: 250px;
}
.sidebar li .profile-details{
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sidebar li img{
height: 45px;
width: 45px;
object-fit: cover;
border-radius: 6px;
margin-right: 10px;
}
.sidebar li.profile .name,
.sidebar li.profile .job{
font-size: 15px;
font-weight: 400;
color: #fff;
white-space: nowrap;
}
.sidebar li.profile .job{
font-size: 12px;
}
.sidebar .profile #log_out{
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
background: #0f0f0f;
width: 100%;
height: 60px;
line-height: 60px;
border-radius: 0px;
transition: all 0.5s ease;
}
.sidebar.open .profile #log_out{
width: 50px;
background: none;
right: 40%;
}
.home-section{
position: relative;
background: #E4E9F7;
min-height: 100vh;
top: 0;
left: 78px;
width: calc(100% - 78px);
transition: all 0.5s ease;
z-index: 2;
}
.sidebar.open ~ .home-section{
left: 250px;
width: calc(100% - 250px);
}
.home-section .text{
display: inline-block;
color: #11101d;
font-size: 25px;
font-weight: 500;
margin: 18px
}
#media (max-width: 420px) {
.sidebar li .tooltip{
display: none;
}
}
.main {
background-color: #0f0f0f;
width: 100%;
padding: 50px;
margin-left: 110px;
margin-top: 60px;
margin-bottom: 60px;
margin-right: 60px;
border-radius: 50px;
display: flex;
}
section {
overflow: hidden;
position: absolute;
width: 100%;
top: 140px;
bottom: 100%;
opacity: 0;
transition: ease-in-out 0.4s;
z-index: 2;
}
section.section-show {
top: 100px;
bottom: auto;
opacity: 1;
padding-bottom: 45px;
}
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/painel.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<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#500&display=swap" rel="stylesheet">
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<title>Prosw Treinamentos</title>
</head>
<body>
<div class="sidebar">
<div class="logo-details">
<div class="logo_name">Prosw Cursos</div>
<i class='bx bx-menu' id="btn" ></i>
</div>
<nav>
<ul class="nav-list">
<li>
<i class='bx bx-search' ></i>
<input type="text" placeholder="Search...">
<span class="tooltip">Search</span>
</li>
<li class="active">
<a href="#home">
<i class='bx bx-grid-alt'></i>
<span class="links_name">Videos</span>
</a>
<span class="tooltip">Videos</span>
</li>
<li>
<a href="#duvidas">
<i class='bx bx-chat' ></i>
<span class="links_name">Duvidas</span>
</a>
<span class="tooltip">Duvidas</span>
</li>
<li>
<a href="#tutorial">
<i class='bx bx-pie-chart-alt-2' ></i>
<span class="links_name">Tutorial de uso</span>
</a>
<span class="tooltip">Tutorial</span>
</li>
<li>
<a href="#settings">
<i class='bx bx-cog' ></i>
<span class="links_name">Configurações</span>
</a>
<span class="tooltip">Setting</span>
</li>
<li class="profile">
<i class='bx bx-log-out' id="log_out" ></i>
</li>
</ul>
</nav>
</div>
<div class="main">
<section id="home" class="home-top">
<div class="content">
<header>
<h1>Treinamentos</h1>
</header>
</div>
</section>
<section id="duvidas">
<div class="content">
<header>
<h1>Dúvidas</h1>
</header>
</div>
</section>
<section id="tutorial">
<div class="content">
<header>
<h1>Tutorial</h1>
</header>
</div>
</section>
<section id="settings">
<div class="content">
<header>
<h1>Configurações</h1>
</header>
</div>
</section>
</div>
<script>
let sidebar = document.querySelector(".sidebar");
let closeBtn = document.querySelector("#btn");
let searchBtn = document.querySelector(".bx-search");
closeBtn.addEventListener("click", ()=>{
sidebar.classList.toggle("open");
menuBtnChange();//calling the function(optional)
});
searchBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
sidebar.classList.toggle("open");
menuBtnChange(); //calling the function(optional)
});
// following are the code to change sidebar button(optional)
function menuBtnChange() {
if(sidebar.classList.contains("open")){
closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");//replacing the iocns class
}else {
closeBtn.classList.replace("bx-menu-alt-right","bx-menu");//replacing the iocns class
}
}
</script>
<script src="js/main.js"></script>
</body>
</html>

You have not added the jquery library
add this
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

classList.add() is not working | Vanilla JavaScript

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.

How to delay something thats just a possibility

So i'm making a website, and i have a sort of a slider menu from top, and when i hover over a button everything appears, but when i hover out it doesn't disappear. In my js code i had to delay the disappearance with setTimeout() because there's a small gap between the button and the menu. So if someone would know how to make it disappear while keeping the timer thing so it doesn't disappear when going from button to the menu i'd be insanely grateful. Thanks in advance. Here's the code:
var timeout;
function mouseOver(){
document.getElementById('menu-roll').style.display = 'block';
timeout = setTimeout(function(){document.getElementById('menu-roll').style.display = 'none';}, 3000);
}
function mouseOut(){
clearTimeout(timeout);
}
:root{
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
*{
margin: 0;
padding: 0;
}
body{
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper{
height: 100vh;
width: 100%;
}
#navbar{
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a{
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover{
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper{
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup{
0%{
top: 150px;
}
100%{
top: 0;
}
}
#menu-wrapper{
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img{
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video{
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll{
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll{
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a{
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover{
text-decoration: underline;
}
ul{
list-style-type: none;
}
#h1-menu-tandoor{
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#h1-menu-restaurace{
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#information-section{
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction{
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1{
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3{
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p{
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider{
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos{
position: relative;
z-index: 6;
height: 10px;
}
.first-photo{
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info{
height: 407px;
}
#services-photo{
top: 50px;
}
#media screen and (max-width: 700px){
.first-photo{
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction{
width: 60%;
margin: 0 auto;
}
#divider{
margin-bottom: 10px;
}
#services-info{
height: 800px;
}
#services-photo{
top: 470px;
position: relative;
}
}
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>

I'm not sure that I understand everything but take a look at this code.
var timeout;
function mouseOver() {
document.getElementById('menu-roll').style.display = 'block';
clearTimeout(timeout);
}
function mouseOut() {
timeout = setTimeout(function() {
document.getElementById('menu-roll').style.display = 'none';
}, 1000);
}
:root {
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper {
height: 100vh;
width: 100%;
}
#navbar {
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover {
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper {
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup {
0% {
top: 150px;
}
100% {
top: 0;
}
}
#menu-wrapper {
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img {
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video {
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll {
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll {
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a {
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover {
text-decoration: underline;
}
ul {
list-style-type: none;
}
#h1-menu-tandoor {
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#h1-menu-restaurace {
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#information-section {
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction {
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1 {
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3 {
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p {
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider {
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos {
position: relative;
z-index: 6;
height: 10px;
}
.first-photo {
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info {
height: 407px;
}
#services-photo {
top: 50px;
}
#media screen and (max-width: 700px) {
.first-photo {
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction {
width: 60%;
margin: 0 auto;
}
#divider {
margin-bottom: 10px;
}
#services-info {
height: 800px;
}
#services-photo {
top: 470px;
position: relative;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/index.css">
<link rel="shortcut icon" href="styles/favicon.ico.png" />
<title>Tandoor</title>
</head>
<body>
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>
</body>
</html>

I make a side pull-down menu. Does not work

I make a side pull-down menu. Does not work. Please tell me what the problem is
The menu does not open and does not display any errors. I have already tried everything that I could and zero result.
function left_menu(selector){
let menu = $(selector);
let button = menu.find('.left_menu_button');
let links = menu.find('.left_menu_link');
let overlay = menu.find('.left_menu_close_container');
button.on('click', (e) => {
e.preventDefault();
loggleMenu();
});
links.on('click', () => loggleMenu());
overlay.on('click', () => loggleMenu());
function loggleMenu(){
menu.toggleClass('left_menu_main_div_active');
if(menu.hasClass('left_menu_main_div_active')){
$('body').css('overflow', 'hidden');
}else{
$('body').css('overflow', 'visible');
}
}
}
left_menu('.left_menu_main_div');
.left_menu_button{
position: absolute;
left: 10px;
z-index: 30;
width: 50px;
height: 50px;
border-radius: 50%;
}
.left_menu_button:hover .left_menu_span{
background-color: black;
width: 35px;
height: 5px;
transition: 0.4s;
}
.left_menu_button:hover .left_menu_span::after{
background-color: black;
width: 35px;
height: 5px;
transition: 0.4s;
margin-top: 2px;
}
.left_menu_button:hover .left_menu_span::before{
background-color: black;
width: 35px;
height: 5px;
transition: 0.4s;
margin-top: -2px;
}
.left_menu_span,
.left_menu_span::after,
.left_menu_span::before{
position: absolute;
width: 30px;
height: 4px;
background-color: #1f1a1e;
}
.left_menu_span{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.left_menu_span::before{
content: '';
top: -10px;
}
.left_menu_span::after{
content: '';
top: 10px;
}
.left_menu_main_div_active .left_menu_span{
background-color: transparent;
}
.left_menu_main_div_active .left_menu_span::before{
top: 0;
transform: rotate(45deg);
}
.left_menu_main_div_active .left_menu_span::after{
top: 0;
transform: rotate(-45deg);
}
.left_menu_nav{
padding-top: 55px;
position: fixed;
z-index: 20;
display: flex;
flex-flow: column;
height: 100%;
width: 20%;
background-color: #2a2a2a;
overflow-y: auto;
left: -100%;
}
.left_menu_main_div_active .left_menu_nav{
left: 0;
}
.left_menu_link{
text-align: center;
padding: 10px;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 5px;
font-weight: bold;
color: white;
margin-top: 10px;
}
.left_menu_link:hover{
filter: brightness(0.7);
border: 1px solid black;
border-radius: 3px;
transition: 0.7s;
}
.left_menu_close_container{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.left_menu_main_div_active .left_menu_close_container{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left_menu_container">
<div class="left_menu_main_div">
<a href="#" class="left_menu_button">
<span class="left_menu_span"></span>
</a>
<nav class="left_menu_nav">
Инвентарь
Персонаж
Ремесло
Охота
</nav>
<div class="left_menu_close_container"></div>
</div>
</div>

Shouldn't function loggleMenu( be function ToggleMenu(?
Also where are you loading the script in the html?
Pop a few console.Log() calls into the script and see where it gets up to or fails.

Having issues with Jquery .animate()

I am trying to make a slide menu but my Jquery animation is not working. I am trying to move the off the page on click. To make sure Jquery is running i added a couple of divs that work fine when clicked. Here is my code.
$(document).ready(function(){
$(".scroll-menu").click(function(){
$(".scroll-menu").hide();
});
$(".box").click(function(){
$(".box").hide();
});
$(".icon-open").click(function(){
$("nav").animate({left: "-16em"}, 500, swing);
});
});
.box {
margin-top: 20em;
position: relative;
width: 10em;
height: 20em;
background: green;
left: 20em
}
.scroll-menu{
background: blue;
height: 300px;
width: 500px;
margin: auto;
}
nav {
position: absolute;
height: 100%;
width: 16em;
left: 0;
top: 0;
background: #f5f5f5;
border-right: .1em solid grey
}
.mini-menu {
position: relative;
background: #E3E0E6;
top: 5em;
height: 32em
}
.top-menu {
position: relative;
top: 5em;
list-style-type: none;
margin-left: -1em;
}
.top-menu li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1.1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.top-menu li:hover {
background: #725490;
}
.top-menu li a {
text-decoration: none;
color: #000000
}
.top-menu li:hover a {
color: white;
}
.mini-menu ul li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.mini-menu ul {
position: relative;
top: .9em;
list-style-type: none;
margin-left: -1em;
}
.mini-menu ul li a {
text-decoration: none;
color: rgb(109, 52, 150);
}
.mini-menu a:hover {
color:#ab6bb1
}
.header {
position: absolute;
height: 5em;
width: 100%;
left: 0;
top: 0;
background: white;
z-index: 1;
border-bottom: .12em solid grey
}
.logo{
position: relative;
width: 10em;
height: auto;
left: 2em;
top: 2em
}
.app{
positio: relative;
margin-left: 8.8em;
margin-top: -.1em;
font-family: antic, ;
font-size: 1.4em
}
.search{
position: relative;
left: 12em;
top: -2em;
width:15em;
border: .06em solid grey;
font-family: antic, ;
font-size: 1.9em;
padding-left: .5em
}
form i {
position: relative;
left: 11.5em;
top: -1.9em;
color: purple;
cursor: pointer;
}
.icon-open{
position: absolute;
top: 5em;
cursor:pointer;
left: 19em;
z-index: 2
}
.icon-open i {
cursor:pointer;
z-index: 1
}
{
position: relative;
background: green;
height 30em;
width: 6em;
top: 30em;
left: 50em;
border: solid;
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="http://use.edgefonts.net/droid-sans:n4,n7:all.js"></script>
<script src="http://use.edgefonts.net/source-sans-pro.js"></script>
<script src="http://use.edgefonts.net/antic:n4:all;droid-sans:n4,n7:all.js"> </script>
<div class="box"></div>
<div class="scroll-menu"></div>
<nav>
<ul class= "top-menu">
<li> Home</li>
<li> Popular</li>
<li>Trending</li>
<li>Collections</li>
</ul>
<div class="mini-menu">
<ul>
<li>Diagnosis & Staging</li>
<li>Image Review</li>
<li>Rx & Protocols</li>
<li>Planning</li>
<li>Chart Checks & Reviews</li>
<li>Calibration</li>
<li>Policy & Procedure</li>
<li>Certifications</li>
<li>Connected Clinical</li>
<li>Messaging</li>
<li>Utilities</li>
<li>Interfaces</li>
<li>Acounting & Finance</li>
<li>Clinical Analytics</li>
</ul>
</div>
</nav>
<div class="header">
<img src="MedLever-Logo-HighRes.png" class="logo">
<p class="app">App Store</p>
<form>
<input type="text" autocomplete="on" name="search" class="search">
<i class="fa fa-search fa-2x"></i>
</form>
</div>
<div class="icon-open">
<i class="fa fa-bars"></i>
</div>

You need to put quotes around 'swing' in the animation style.
$(".icon-open").click(function(){
$("nav").animate({left: "-16em"}, 500, 'swing');
});
http://codepen.io/anon/pen/BNGWrE
Edit
Added a variable called navhidden so you can toggle the showing and hiding of the nav:
Refresh / open above CodePen link.
$(".icon-open").click(function() {
if (navhidden) {
//Show
$("nav").animate({
left: "0"
}, 500, 'swing');
navhidden = false;
} else {
$("nav").animate({
left: "-16em"
}, 500, 'swing');
navhidden = true;
}
});

In this JSFiddle you can find it works when clicking the image.
$(document).ready(function(){
$(".scroll-menu").click(function(){
$(".scroll-menu").hide();
});
$(".box").click(function(){
$(".box").hide();
});
$(".icon-open").click(function(){
console.log('Image clicked');
$("nav").animate({left: "-16em"}, 500, 'swing');
});
});

Develop Reference

JavaScript is the programming language of the Web.

How to display another page without reloading? - javascript

Related

How to change the showing section with javascript

classList.add() is not working | Vanilla JavaScript

How to delay something thats just a possibility

I make a side pull-down menu. Does not work

Having issues with Jquery .animate()

Categories

Resources