Making a Page Inaccessible With a Button?

Making a Page Inaccessible With a Button? - javascript

My goal is something similar to what YouTube has when you click their menu icon; the rest of the page gets darker and nothing on that part of the page is accessible to the user until the button is clicked again and the menu recedes. Any help with this would be greatly appreciated.
<!DOCTYPE html>
<body lang = 'en-US'>
<head>
<meta charset = 'UTF-8'>
<meta http-equiv = 'X-UA-Compatible' content = 'IE = edge'>
<meta name = 'viewport' content = 'width = device-width, initial-scale = 1'>
<title>Testing</title>
<!-- links to relative files -->
<link rel = 'stylesheet' href = '/Custom_Scrollbar.CSS'>
<link rel = 'shortcut icon' type = 'image/png' href = '/Images/Odd_Jobs_Favicon.png'>
</head>
<body>
<div class = 'headerBar'>
<style>
.headerBar {
position: absolute;
width: 100%;
height: 80px;
top: 0px;
left: 0px;
background-color: #e0e0e0;
}
</style>
</div>
<div class = 'headerStrip'>
<style>
.headerStrip {
position: absolute;
width: 100%;
height: 5px;
top: 80px;
left: 0px;
background-color: #5e00bc
}
</style>
</div>
<div class = 'bodyBar'>
<style>
.bodyBar {
position: absolute;
width: 100%;
height: 100%;
top: 85px;
left: 0px;
background-color: #000000
}
</style>
</div>
<div class = 'jobLinks'>
<li><a class = 'find' href = '#'>Link</a></li>
<style>
.jobLinks {
text-decoration: none;
list-style: none;
}
.find {
position: absolute;
width: 80px;
height: 40px;
top: 30px;
left: 300px;
font-family: 'comfortaa';
font-size: 18px;
font-weight: 800;
color: #000000;
text-decoration: none;
text-align: center;
transition: ease-out 0.4s;
background-color: #e0e0e0;
}
.find:hover {
color: #5e00bc;
}
</style>
</div>
<div class = 'menu'>
<button class = 'menuButton'></button>
<div class = 'linkList'>
<ul>
<li><a class = 'links' href = '#'>Link 1</a></li>
<li><a class = 'links' href = '#'>Link 2</a></li>
<li><a class = 'links' href = '#'>Link 3</a></li>
<li><a class = 'links' href = '#'>Link 4</a></li>
<li><a class = 'links' href = '#'>Link 5</a></li>
<li><a class = 'links' href = '#'>Link 6</a></li>
<li><a class = 'links' href = '#'>Link 7</a></li>
</ul>
</div>
<style>
.menuButton {
position: absolute;
width: 30px;
height: 30px;
top: 25px;
left: 1303px;
border: none;
outline: none;
transition: ease-out 0.5s;
background-image: url('/Images/Menu_Icon.png');
background-color: #e0e0e0;
cursor: pointer;
}
.links {
font-family: 'comfortaa';
font-size: 18px;
font-weight: 500;
color: #000000;
text-decoration: none;
transition: ease-out 0.4s;
}
.links:hover {
color: #5e00bc;
}
.linkList {
position: fixed;
width: 150px;
height: 100%;
right: -150px;
top: 85px;
transition: ease-out 0.5s;
background: #e0e0e0;
}
.linkList ul li {
list-style: none;
padding: 15px;
}
.menuButton:focus ~ .linkList {
right: 0px;
}
</style>
<script>
menuBtn = document.getElementsByClassName('menuButton')[0];
menuBtn.addEventListener('click', function() {
menu = document.getElementsByClassName('linkList')[0];
menu.style.webkitTransition = '0.6s';
if (menu.style.right == '0px') {
menu.style.right = '-150px';
} else {
menu.style.right = '0px';
}
});
</script>
</div>
</body>
</html>

It can be achieved by some css and js.
I am adding menuOpen class when the menu is open. and removing it when the menu is closed.
menuOpen class css is setting other content besides menu unaccesseiable.
const open = document.querySelector("#open");
const close = document.querySelector("#close");
const menu = document.querySelector("#menu");
open.addEventListener("click", () => {
menu.classList.add("active");
document.body.classList.add("menuOpen");
});
close.addEventListener("click", () => {
menu.classList.remove("active");
document.body.classList.remove("menuOpen");
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: relative;
overflow-x: hidden;
}
#menu {
display: flex;
flex-direction: column;
gap: 15px;
width: 100px;
position: absolute;
top: 0;
left: -100px;
background-color: #f5f5f5;
padding: 20px;
transition: .5s;
}
#menu.active {
left: 0;
}
.menuOpen {
position: relaive;
transition: .5s;
}
.menuOpen::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
opacity: 0.5;
height: 100vh;
width: 100vw;
overflow: hidden;
}
<button id="open">open</button>
<div id="menu">
<button id="close">close</button>
<button>a</button>
<button>a</button>
<button>a</button>
</div>
<p>content</p>

Related

Professional menu with JavaScript and jQuery

I have designed a menu for my WordPress site.
My menu has two main problems:
1- When I click on the icon, the ".back" class, which puts gray color on the whole screen, becomes black. so that the background becomes completely black.
2- The second problem is related to when I click on the gray area.
When on the body with the ".back" class. I made it, I click it, the menu closes, but the icon does not return to the previous state.
I put the codes that I wrote below so that you can better understand my problem and I hope you can help me in solving this problem.
Thanks.
let icon = document.querySelector(".icon_menu");
let nav = document.querySelector(".main_menu");
icon.addEventListener("click", function() {
if (this.classList.contains("bi-grid-fill")) {
this.classList = "bi bi-x-circle-fill icon_menu";
icon.style.left = "25%";
icon.style.color = "#ff6f6f";
icon.style.fontSize = "30px";
nav.style.left = 0;
} else {
this.classList = "bi bi-grid-fill icon_menu";
icon.style.left = "2%";
icon.style.color = "#a66fff";
icon.style.fontSize = "40px";
nav.style.left = "-300px";
}
$('body').append('<div class="back"></div>')
$('.back').click(function() {
icon.style.left = "2%";
icon.style.color = "#a66fff";
icon.style.fontSize = "40px";
nav.style.left = '-300px';
$(this).remove();
});
});
.main_menu {
position: absolute;
top: 0;
left: -300px;
bottom: 0;
z-index: 999;
background: #eee;
padding-right: 2rem;
transition: all 1s ease;
}
.icon_menu {
position: fixed;
top: 10%;
left: 2%;
font-size: 40px;
color: #a66fff;
cursor: pointer;
z-index: 99999;
transition: all 1s ease;
}
.main_menu ul {
list-style: none;
line-height: 60px;
font-size: 35px;
}
.main_menu ul li a {
color: #000000;
text-decoration: none;
padding-right: 15px;
padding-left: 40px;
margin-left: -60px;
margin-bottom: 10px;
}
.back {
width: 100%;
height: 100%;
position: fixed;
z-index: 9 !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #00000056;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<nav id="nav">
<span class="bi bi-grid-fill icon_menu"></span>
<aside class="main_menu">
<ul>
<li>
<a href="#">
home
</a>
</li>
<li>
<a href="#">
our articles
</a>
</li>
<li><a href="#">
about us
</a>
</li>
</ul>
</aside>
</nav>
</section>

Your first issue is caused because you keep adding/removing the element. This is bad practice, and inside you should just call .toggle() to hide/show it instead.
Your second issue is caused because you do only change the classes when the button is clicked, not the background.
Try this code instead:
let icon = document.querySelector(".icon_menu");
let nav = document.querySelector(".main_menu");
$('.back').hide();
$('.back').click(function() {
if ($(this).is(':hidden')) return;
$(this).toggle();
icon.classList = "bi bi-grid-fill icon_menu";
icon.style.left = "2%";
icon.style.color = "#a66fff";
icon.style.fontSize = "40px";
nav.style.left = '-300px';
});
icon.addEventListener("click", function() {
if (this.classList.contains("bi-grid-fill")) {
this.classList = "bi bi-x-circle-fill icon_menu";
icon.style.left = "25%";
icon.style.color = "#ff6f6f";
icon.style.fontSize = "30px";
nav.style.left = 0;
} else {
this.classList = "bi bi-grid-fill icon_menu";
icon.style.left = "2%";
icon.style.color = "#a66fff";
icon.style.fontSize = "40px";
nav.style.left = "-300px";
}
$('.back').toggle();
});
.main_menu {
position: absolute;
top: 0;
left: -300px;
bottom: 0;
z-index: 999;
background: #eee;
padding-right: 2rem;
transition: all 1s ease;
}
.icon_menu {
position: fixed;
top: 10%;
left: 2%;
font-size: 40px;
color: #a66fff;
cursor: pointer;
z-index: 99999;
transition: all 1s ease;
}
.main_menu ul {
list-style: none;
line-height: 60px;
font-size: 35px;
}
.main_menu ul li a {
color: #000000;
text-decoration: none;
padding-right: 15px;
padding-left: 40px;
margin-left: -60px;
margin-bottom: 10px;
}
.back {
width: 100%;
height: 100%;
position: fixed;
z-index: 9 !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #00000056;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<nav id="nav">
<span class="bi bi-grid-fill icon_menu"></span>
<aside class="main_menu">
<ul>
<li>
home
</li>
<li>
our articles
</li>
<li>about us
</li>
</ul>
</aside>
</nav>
</section>
<div class="back"></div>

How to remove a div after it has faded out (Vanilla JS)

I have a problem with a transition in JS. What i want is that once the div has opacity 0, js remove it automatically. The problem is that, i have to exit the div area, and then it removes it. That is because i have a mouseleave, but my question is. How can i delete that div without my mouse leaving the div area? Here's the CodePen link:
https://codepen.io/SpeedItaly/pen/PoGPGJZ
function style() {
h4 = document.getElementById("hover_me");
header = document.getElementById("header");
logo = document.getElementById("hover_me1");
logo.addEventListener("mouseover", (e) => {
logo.style.transition = "1200ms ease-in-out opacity"
logo.style.opacity = "0"
});
logo.addEventListener("mouseleave", (e) => {
header.removeChild(logo);
});
menu = document.getElementById("menu");
if (logo.style.opacity == 0) {
menu.style.transition = "1200ms ease-in-out opacity"
menu.style.opacity = "1"
}
}
style();
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
background: #f4f4f4;
font-size: 16px;
font-family: "Inter";
font-weight: 400;
color: #fff;
}
.header {
width: 100%;
height: 100vh;
background: #222831;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #222831;
z-index: 99;
cursor: default;
}
.logo>h4 {
font-size: 70px;
}
.menu {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
transform: translate(0%, -50%);
opacity: 0;
}
.menu>li {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
.menu>li>a {
text-decoration: none;
font-size: 25px;
text-transform: uppercase;
font-weight: 200;
color: #fff;
}
.menu>li>a:hover {
color: rgba(255, 255, 255, .35);
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<body>
<!-- Start Header -->
<header class="header" id="header">
<!-- Start Logo Container -->
<div class="logo" id="hover_me1">
<h4 class="text_white" id="hover_me">SpeedItaly</h4>
</div>
<!-- End Logo Container -->
<!-- Start Menu -->
<ul class="menu" id="menu">
<li><a class="text_white" href="home.html">Home</a></li>
<li><a class="text_white" href="#">About</a></li>
<li><a class="text_white" href="#">Content</a></li>
</ul>
<!-- End Menu-->
</header>
<!-- End Header -->

You can use the transitionend event instead.
function style() {
h4 = document.getElementById("hover_me");
header = document.getElementById("header");
logo = document.getElementById("hover_me1");
logo.addEventListener("mouseover", (e) => {
logo.style.transition = "1200ms ease-in-out opacity"
logo.style.opacity = "0"
});
logo.addEventListener("transitionend", (e) => {
header.removeChild(logo);
});
menu = document.getElementById("menu");
if (logo.style.opacity == 0) {
menu.style.transition = "1200ms ease-in-out opacity"
menu.style.opacity = "1"
}
}
style();
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
background: #f4f4f4;
font-size: 16px;
font-family: "Inter";
font-weight: 400;
color: #fff;
}
.header {
width: 100%;
height: 100vh;
background: #222831;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #222831;
z-index: 99;
cursor: default;
}
.logo>h4 {
font-size: 70px;
}
.menu {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
transform: translate(0%, -50%);
opacity: 0;
}
.menu>li {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
.menu>li>a {
text-decoration: none;
font-size: 25px;
text-transform: uppercase;
font-weight: 200;
color: #fff;
}
.menu>li>a:hover {
color: rgba(255, 255, 255, .35);
}
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body>
<!-- Start Header -->
<header class="header" id="header">
<!-- Start Logo Container -->
<div class="logo" id="hover_me1">
<h4 class="text_white" id="hover_me">SpeedItaly</h4>
</div>
<!-- End Logo Container -->
<!-- Start Menu -->
<ul class="menu" id="menu">
<li><a class="text_white" href="home.html">Home</a></li>
<li><a class="text_white" href="#">About</a></li>
<li><a class="text_white" href="#">Content</a></li>
</ul>
<!-- End Menu-->
</header>
<!-- End Header -->

Just use a setTimeout. Specifically, setTimeout(function() {header.removeChild(logo)},1200).
function style() {
h4 = document.getElementById("hover_me");
header = document.getElementById("header");
logo = document.getElementById("hover_me1");
logo.addEventListener("mouseover", (e) => {
logo.style.transition = "1200ms ease-in-out opacity"
logo.style.opacity = "0"
setTimeout(function() {header.removeChild(logo)},1200)
});
menu = document.getElementById("menu");
if (logo.style.opacity == 0) {
menu.style.transition = "1200ms ease-in-out opacity"
menu.style.opacity = "1"
}
}
style();
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
background: #f4f4f4;
font-size: 16px;
font-family: "Inter";
font-weight: 400;
color: #fff;
}
.header {
width: 100%;
height: 100vh;
background: #222831;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #222831;
z-index: 99;
cursor: default;
}
.logo>h4 {
font-size: 70px;
}
.menu {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
transform: translate(0%, -50%);
opacity: 0;
}
.menu>li {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
.menu>li>a {
text-decoration: none;
font-size: 25px;
text-transform: uppercase;
font-weight: 200;
color: #fff;
}
.menu>li>a:hover {
color: rgba(255, 255, 255, .35);
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<body>
<!-- Start Header -->
<header class="header" id="header">
<!-- Start Logo Container -->
<div class="logo" id="hover_me1">
<h4 class="text_white" id="hover_me">SpeedItaly</h4>
</div>
<!-- End Logo Container -->
<!-- Start Menu -->
<ul class="menu" id="menu">
<li><a class="text_white" href="home.html">Home</a></li>
<li><a class="text_white" href="#">About</a></li>
<li><a class="text_white" href="#">Content</a></li>
</ul>
<!-- End Menu-->
</header>
<!-- End Header -->

You can use the following code to receive your current browser's Transition Events:
const getTransitionEvents = () => {
let t,
el = document.createElement("fakeelement");
let transitions = {
transition: {
Start: "transitionstart",
Run: "transitionrun",
Cancel: "transitioncancel",
End: "transitionend"
},
OTransition: {
Start: "oTransitionStart",
Run: "oTransitionRun",
Cancel: "oTransitionCancel",
End: "oTransitionEnd"
},
MozTransition: {
Start: "transitionstart",
Run: "transitionrun",
Cancel: "transitioncancel",
End: "transitionend"
},
WebkitTransition: {
Start: "webkitTransitionStart",
Run: "webkitTransitionRun",
Cancel: "webkitTransitionCancel",
End: "webkitTransitionEnd"
}
};
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
};
After that you can just bind the return of this function to a variable
const transEvt = getTransitionEvents();
and bind eventListeners to it
document.addEventListener(transEvt.End, (evt) => {
// do some cool stuff when the Transition ends
});
I use this myself, in a #just-for-fun #work-in-progress pen called Simple Image Loop without duplicating slides where I rearrange the slides after the transform transition has ended.

You can listen for the transitionend CSS event, and remove the node in it.
Also, it is very recommended to declare your variables and move CSS declarations into the CSS code, where possible.
function style() {
const h4 = document.getElementById("hover_me");
const header = document.getElementById("header");
const logo = document.getElementById("hover_me1");
const menu = document.getElementById("menu")
logo.addEventListener("mouseover", (e) => {
logo.classList.add("hidden")
logo.addEventListener("transitionend", () => {
logo.remove()
menu.classList.remove("hidden")
})
});
}
style();
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
background: #f4f4f4;
font-size: 16px;
font-family: "Inter";
font-weight: 400;
color: #fff;
}
.header {
width: 100%;
height: 100vh;
background: #222831;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #222831;
z-index: 99;
cursor: default;
transition: 1200ms ease-in-out opacity;
}
.logo>h4 {
font-size: 70px;
}
.menu {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
transform: translate(0%, -50%);
transition: 1200ms ease-in-out opacity;
}
.menu>li {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
.menu>li>a {
text-decoration: none;
font-size: 25px;
text-transform: uppercase;
font-weight: 200;
color: #fff;
}
.menu>li>a:hover {
color: rgba(255, 255, 255, .35);
}
.hidden{
opacity: 0;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<body>
<!-- Start Header -->
<header class="header" id="header">
<!-- Start Logo Container -->
<div class="logo" id="hover_me1">
<h4 class="text_white" id="hover_me">SpeedItaly</h4>
</div>
<!-- End Logo Container -->
<!-- Start Menu -->
<ul class="menu hidden" id="menu">
<li><a class="text_white" href="home.html">Home</a></li>
<li><a class="text_white" href="#">About</a></li>
<li><a class="text_white" href="#">Content</a></li>
</ul>
<!-- End Menu-->
</header>
<!-- End Header -->

How can I fix the slide navigation

I working on this sliding menu. It can slide fine, but have problem to close it by clicking x.
let openNav = document.querySelector(".slideOpen");
let closeNav = document.querySelector(".slideClose");
document.addEventListener("click", () => {
openNav.style.width = "250px";
});
document.addEventListener("click", () => {
closeNav.style.width = "0";
});
.slideOpen { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; }
.slideOpen a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; }
.slideOpen a:hover { color: #f1f1f1; }
.slideOpen .slideClose { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; }
<div style="font-size:30px;cursor:pointer">☰ open</div>
<div class="slideOpen"> <ul>
<li> × </li>
<li> About </li>
<li> Services </li>
<li> Clients </li>
<li> Contact </li>
</ul> </div>

You need to add actionListeners on buttons(links) rather than on document.
let slide = document.querySelector(".slide");
let slideOpen = document.querySelector(".slideOpen");
let slideClose = document.querySelector(".slideClose");
slideOpen.addEventListener('click', function(event) {
slide.style.width = "250px";
});
slideClose.addEventListener("click", () => {
slide.style.width = "0";
});
.slide { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; }
.slide a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; }
.slide a:hover { color: #f1f1f1; }
.slide .slideClose { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; }
<div style="font-size:30px;cursor:pointer" class="slideOpen">☰ open</div>
<div class="slide"> <ul>
<li> × </li>
<li> About </li>
<li> Services </li>
<li> Clients </li>
<li> Contact </li>
</ul> </div>

You are making addEventListener to the whole document instead make to particular element (open and close)..
Changes:
Added a new class openMenu in the open menu element like,
<div style="font-size:30px;cursor:pointer" class="openMenu">☰ open</div>
Then added a new variable to store the element like,
let open = document.querySelector(".openMenu");
Then modified document.addEventListener with open and closeNav respectively like,
open.addEventListener("click", () => {
openNav.style.width = "250px";
});
closeNav.addEventListener("click", () => {
openNav.style.width = "0";
});
And the changed snippet looks like,
let openNav = document.querySelector(".slideOpen");
let open = document.querySelector(".openMenu");
let closeNav = document.querySelector(".slideClose");
open.addEventListener("click", () => {
openNav.style.width = "250px";
});
closeNav.addEventListener("click", () => {
openNav.style.width = "0";
});
.slideOpen { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; }
.slideOpen a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; }
.slideOpen a:hover { color: #f1f1f1; }
.slideOpen .slideClose { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; }
<div style="font-size:30px;cursor:pointer" class="openMenu">☰ open</div>
<div class="slideOpen"> <ul>
<li> × </li>
<li> About </li>
<li> Services </li>
<li> Clients </li>
<li> Contact </li>
</ul> </div>

How to close navigation bar when I click on other contents in the webpage

I created a navigation bar it works fine.
It consists of several tabs such as Home, about, services, contact.
But I want to close it when I click on the contents of the web page.
Code:
(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
var height = $(window).height();
var width = $(window).width();
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 50px;
line-height: 40px;
text-align: center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 1200px;
background-color: lightgrey;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars {
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<nav>
<a href="#" class="nav-toggle-btn"> <i class="fa fa-bars"></i>
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
How can I close my navigation bar, when I click on the other contents in the web page.
Any help will be appreciated.
Thank you in advance.

The simplest way is to set a "click" event on the "content" area so that whenever anything within it is clicked on, it causes the menu to be hidden again:
$(".content").click(function(e) {
bodyEl.removeClass('active-nav');
});
Demo:
$(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
$(".content").click(function(e) {
bodyEl.removeClass('active-nav');
});
var height = $(window).height();
var width = $(window).width();
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 50px;
line-height: 40px;
text-align: center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars {
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<nav>
<a href="#" class="nav-toggle-btn"> <i class="fa fa-bars"></i>
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
P.S. I rearranged the rest of your JavaScript slightly to all be within a "ready" block, I wasn't sure what the logic of it was previously.
P.P.S. Your demo contained jQuery twice. This is both unnecessary and can also lead to unpredictable issues. I've removed the older version in my demo above.

SERBIAN: Jednostavno samo dodaj ovo na kraju svoje skripte:
ENG: Just add this at the end of your script:
$('div').click(function(){
$('nav').removeClass("active-nav");
});

You only have to attach an onclick event handler to document.
var height = $(window).height();
var width = $(window).width();
$(function() {
var bodyEl = $('nav'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
$(document).on('click', function(e) {
if(!$(e.target).closest(bodyEl).length && bodyEl.hasClass('active-nav')) {
bodyEl.removeClass('active-nav');
}
});
});
$(window).resize(function() {
$("nav").removeClass("active-nav");
});
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav{
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width:50px;
line-height: 40px;
text-align:center;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
.fa-bars{
font-size:20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
</script>
<nav>
<i class="fa fa-bars"></i>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>

Javascript functions are not implementing [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 5 years ago.
My webpage should display a slideshow on page load but the script functions doesn't seem to be working. I have tried running simple scripts containing prompt() and confirm() functions and they are working fine but custom functions doesn't seem to work. Same is the case with my "modal.js" script which should display a modal box on button click. Please help me out
<!doctype html>
<html lang = "en">
<head>
<title> Ice Cream </title>
<link rel="stylesheet" href="main_ice.css" />
<script type = "text/javascript" src = "slideShow.js"> </script>
<script src = "modal.js"> </script>
<meta charset = "utf-8" />
</head>
<body>
<div id = "big_wrapper">
<header class= "top_header">
<hgroup>
<h1> ICE Funky </h1>
<h3> ice cream production </h3>
</hgroup>
</header>
<nav class= "nav_bar">
<ul>
<label><li name = "home"> Home </li>
<li> About Us </li>
<li> Products </li>
<li> Services </li>
<li> Contacts </li>
</label>
</ul>
</nav>
<div id = "slideshow">
<span class = "image_slide"><img src = "4072.jpg" width = "500px" height = "300px"/> </span>
<span class = "image_slide"><img src = "26551.jpg" width = "500px" height = "300px"/> </span>
<span class = "image_slide"><img src = "30225.jpg" width = "500px" height = "300px"/> </span>
<span class = "image_slide"><img src = "74223.jpg" width = "500px" height = "300px"/> </span>
<span class = "image_slide"><img src = "74285.jpg" width = "500px" height = "300px"/> </span>
</div>
<button id = "modalButton"> Modal </button>
<div id = "myModal">
<div id = "modal_title"> Main Title </div><br><br>
<div id = "modal_body"> Body </div>
</div>
</div>
</body>
</html>
!-----------CSS File ----------------!
*{
margin:0px;
padding:0px;
}
header, footer, nav, hgroup, aside, article, section{
display : block;
}
body{
width:100%;
display: -webkit-box;
-webkit-box-pack: center;
}
#big_wrapper{
max-width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
.top_header{
position: absolute;
margin: 20px 0px 0px 120px;
border: 2px solid black;
width: 180px;
padding: 25px;
}
.nav_bar{
margin-left: 350px;
margin-top: 85px;
text-align: center;
}
.nav_bar li{
position: relative;
list-style: none;
display: inline-block;
-webkit-box-flex: 1;
margin: 20px;
border: 2px solid white;
padding: 5px;
-webkit-transition: border-left 1s, border-top 3s, border-right 4s,
border-bottom 6s;
}
.nav_bar li:hover{
border-left: 2px solid black;
border-top: 2px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
}
#slideshow{
position: absolute;
margin-top: 50px;
margin-left: 400px;
width: 500px;
}
.image_slide{
position: absolute;
/*display: none;*/
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 150px;
width: auto;
margin-top: -22px;
padding: 16px;
color: yellow;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next{
/*left: 458px;*/
right: 0px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
#modalButton{
background: rgba(0,256,0,0.5);
padding: 5px;
margin-left: 40px;
margin-top: 40px;
color: chocolate;
}
#myModal{
position: fixed;
top:0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
background-color: rgba(0,0,0,0.4);
display: none;
}
#modal_title{
width: 95%;
height: 5%;
position: fixed;
bottom: 15%;
left: 30px;
background: rgba(0,256,0,0.4);
}
#modal_body{
width: 95%;
height: 10%;
position: fixed;
top: 85%;
left: 30px;
background: rgba(256,256,256,0.4);
}
!--------------JS File(slideShow.js)----------------!
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("image_slide");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
!---------------JS File(modal.js)------------------!
modalButton = getElementById("modalButton");
myModal = getElementById("myModal");
modalButton.onclick = function(){
prompt("hi");
myModal.style.display = "block";
}

First, as mentioned by ricky, you need to use document.getElementById("modalButton") instead of getElementById("modalButton").
Second, your scripts are evaluated before the markup is parsed. Either move the script tags out of your head to the end of the body tag, or alternatively wrap the contents of both files in event listeners for load:
window.addEventListener( 'load', function() {
// your code here
} );
For example modal.js should look like this:
window.addEventListener( 'load', function() {
var modalButton = document.getElementById("modalButton");
var myModal = document.getElementById("myModal");
modalButton.onclick = function(){
prompt("hi");
myModal.style.display = "block";
}
} );

You have to use document.getElementById() instead of getElementById() being used directly.
Make modifications to your modal.js file.
modalButton = document.getElementById("modalButton");
myModal = document.getElementById("myModal");
modalButton.onclick = function(){
prompt("hi");
myModal.style.display = "block";
}
Working fiddle - https://jsfiddle.net/arjunskumar47/L8Lvwywe/

Develop Reference

JavaScript is the programming language of the Web.

Making a Page Inaccessible With a Button? - javascript

Related

Professional menu with JavaScript and jQuery

How to remove a div after it has faded out (Vanilla JS)

How can I fix the slide navigation

How to close navigation bar when I click on other contents in the webpage

Javascript functions are not implementing [duplicate]

Categories

Resources