$(document).ready(function () {
openNav();
$("#main span").click(function (e) {
// $( "#main .opener" ).on( "click", notify );
openNav();
e.stopPropagation();
});
});
//This line helpfully tells you exactly which dom element was clicked!
// $( "*", document.body ).click(function( event ) {
//This line produces same result as "body": neither permit clicking too far below the last element on the page, in this case the #MainDiv
$(document.body ).click(function( event ) {
event.stopPropagation();
var domElement = $( this ).get( 0 );
closeNav();
alert(domElement.nodeName);
});
//slightly different version below
//Seems we don't need document.ready
/*
$(document).ready(function () {
$("body").click(function () {
// $( "#main .opener" ).on( "click", notify );
closeNav();
//console.log( $( this ).text() );
// alert('hello');
// e.stopPropagation();
});
// closeNav();
// this stops the event from bubbling up to the body
});
*/
function openNav() {
//event.stopPropagation(); // this stops the event from bubbling up to the body
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
// event.stopPropagation(); // this stops the event from bubbling up to the body
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
//e.stopPropagation(); // this stops the event from bubbling up to the body
};body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.sidenav {
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;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jquery testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
<span class="opener" style="font-size:30px;cursor:pointer">☰ open</span>
</div>
<script src="myclick.js"></script>
</body>
</html>I'm trying to attach a click event to the body that fires a preexisting sidebar close function aptly called CloseNav() without breaking the OpenNav() sidebar function which opens the sidebar. I copied the code from here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_push_opacity
I tried making it on Codepen: https://codepen.io/CodusMusicus/pen/aqLwQQ The sidebar with opacity works. Attempts to add a body close function break everything.
I made a Fiddle THAT WORKS but only once! It opens on page load and closes with a body click. But then it breaks. https://jsfiddle.net/359ns4uv/4/
I've tried to stop bubbling of events using e.stopPropagation(); but no luck.
Thank you! Code below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jquery testing</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.sidenav {
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;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
<script>
$('body:not(#main, #mySidenav, .sidenav)').click(function() {
// do something here like:
// alert('hey! The body click is working!!!');
closeNav();
});
</script>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.body.style.backgroundColor = "white";
};
</script>
</body>
</html>
