Multiple modals, work but do not close - javascript

I would like to ask for assistance. So I have multiple modals linked to different buttons. They open fine and display correctly, but do not close at all unless the page is refreshed.
Here is the code:
<div class="columns">
<ul class="price">
<li class="header">Hard Drive Format</li>
<li class="grey">£10</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey"><button
onclick="document.getElementById('Modal1').style.display='block'">Sign
Up</button></a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Hardware Repairs</li>
<li class="grey">£50 and up</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey"><button
onclick="document.getElementById('Modal2').style.display='block'">Sign
Up</button></a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Hard Drive Format</li>
<li class="grey">£10</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey"><button
onclick="document.getElementById('Modal3').style.display='block'">Sign
Up</button></li>
</ul>
</div>
<!-- The Modal -->
<div id="Modal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>1</p>
</div>
</div>
<!-- The Modal -->
<div id="Modal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>2</p>
</div>
</div>
<!-- The Modal -->
<div id="Modal3" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>3</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('Modal1');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
// Get the modal
var modal = document.getElementById('Modal2');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
// Get the modal
var modal = document.getElementById('Modal3');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
And here is the CSS
/* Create three columns of equal width */
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
/* Style the list */
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
/* Add shadows on hover */
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
/* Pricing header */
.price .header {
background-color: #111;
color: white;
font-size: 25px;
}
/* List items */
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
/* Grey list item */
.price .grey {
background-color: #eee;
font-size: 20px;
}
/* The "Sign Up" button */
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
/* Change the width of the three columns to 100%
(to stack horizontally on small screens) */
#media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

If using bootstrap, you don't need to do this
.style.display='block'
This defeats the whole purpose of you using a framework in the first place. The bootstrap(framework) already handles this for you. All you need to do is give appropriate attributes to your elements so bootstrap recognizes them and does the task.
In your case, to make a modal work. All you need is the data-toggle="modal" and data-target="#Modal1" attributes to the trigger element(your button). These tells the framework to open a modal by the id Modal1 on click of this element.
<li class="grey">
<button data-toggle="modal" data-target="#Modal1">Sign Up</button>
</li>
Then to close the modal, you need to give the data-dismiss="modal" on your "x" span element(you don't need the class="close" in this case).
<span data-dismiss="modal">×</span>
Alternatively, you could also use javascript to close the modal like so(you don't need the data-dismiss="modal" in this case)
$(".close").on('click', function() {
$('#Modal1').modal('hide');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="columns">
<ul class="price">
<li class="header">Hard Drive Format</li>
<li class="grey">£10</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey">
<button data-toggle="modal" data-target="#Modal1">Sign Up</button>
</li>
</ul>
</div>
<div id="Modal1" class="modal" data-dismiss="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close" data-dismiss="modal">×</span>
<p>1</p>
</div>
</div>

TRY this code
HTML
<div class="columns">
<ul class="price">
<li class="header">Hard Drive Format</li>
<li class="grey">£10</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey"><button data-toggle="modal" data-target="#Modal1">Sign
Up</button></a>
</li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Hardware Repairs</li>
<li class="grey">£50 and up</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey"><button data-toggle="modal" data-target="#Modal2">Sign Up</button></a>
</li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Hard Drive Format</li>
<li class="grey">£10</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey"><button data-toggle="modal" data-target="#Modal3">Sign Up</button></li>
</ul>
</div>
<!-- The Modal -->
<div id="Modal1" class="modal fade">
<!-- Modal content -->
<div class="modal-content">
<span class="close" data-dismiss="modal">×</span>
<p>1</p>
</div>
</div>
<!-- The Modal -->
<div id="Modal2" class="modal fade">
<!-- Modal content -->
<div class="modal-content">
<span class="close" data-dismiss="modal">×</span>
<p>2</p>
</div>
</div>
<!-- The Modal -->
<div id="Modal3" class="modal fade">
<!-- Modal content -->
<div class="modal-content">
<span class="close" data-dismiss="modal">×</span>
<p>3</p>
</div>
</div>
CSS
/* Create three columns of equal width */
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
/* Style the list */
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
/* Add shadows on hover */
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
/* Pricing header */
.price .header {
background-color: #111;
color: white;
font-size: 25px;
}
/* List items */
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
/* Grey list item */
.price .grey {
background-color: #eee;
font-size: 20px;
}
/* The "Sign Up" button */
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
/* Change the width of the three columns to 100%
(to stack horizontally on small screens) */
#media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
remove your JS File and give a try
Hope this helps.

Use the following code:
$('.modal').modal('hide');

Related

HTML color of active tab

I am creating a web based app, and I am using Spring and Angular.
I am writing the front end in the Angular folder, and I have this HTML code to be on every page(app.component.html) - it is a menu:
<div class="topnav">
<!-- Centered link -->
<div class="topnav-centered">
</div>
<div class="topnav-right">
<a routerLink="/home" >Home</a>
<a routerLink="/login" >Login</a>
<a routerLink="/register" >Register</a>
</div>
</div>
And I have this as css so it is centered and looking all nice.
.topnav {
position: relative;
background-color: #333;
overflow: hidden;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav-right {
float: right;
}
How do I get it to change the color of the buttons(Home, Login, Register) when I am in the current page? (for ex. when I'm in Home page the button will be green, when in Login - it will be green)
You can use routerLinkActive which will add a CSS class to the element when the route is active.
<div class="topnav">
<!-- Centered link -->
<div class="topnav-centered">
</div>
<div class="topnav-right">
<a routerLink="/home" routerLinkActive="active-link">Home</a>
<a routerLink="/login" routerLinkActive="active-link">Login</a>
<a routerLink="/register" routerLinkActive="active-link">Register</a>
</div>
</div>
.topnav-right a.active-link {
color: #ff0000;
}

how to add active class on click and prevent the submenu from sliding up

I am trying to add/ remove active class and prevent my submenu from sliding up when active. If i click on specific tab, it should be active until i switch to another tab. Have tried with addclass/ removeclass, but no change in html onclick. Could anyone suggest how to achieve this.
when submenu 'akun belanja' is active
when i click any of the submenu it will remove the active status and slide up ,like this:
clicked 'daftar akun belanja'
my sidebar:
<nav id="sidebar">
<div class="sidebar-header">
<div class="p-b-13">
<img src="{{url('/asset/login/images/itk.png')}}" alt="itk" class="center">
</div>
<h6 align="center">Sistem Informasi</h6>
<h3 class="h3_sidebar" align="center" style="color:#0067B2">MANAJEMEN</h3>
</div>
<ul class="list-unstyled components">
<li>
SPJ dan LPJ <i class="fa fa-caret-down float-right mr-2"></i>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Surat Pertanggung Jawaban
</li>
<li>
Laporan Pertanggung Jawaban
</li>
</ul>
</li>
<li>
Akun Belanja <i class="fa fa-caret-down float-right mr-2"></i>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Daftar Akun Belanja
</li>
<li>
Panduan Akun Belanja
</li>
</ul>
</li>
<li>
Help
</li>
<li>
Contact
</li>
</ul>
</nav>
js:
<script>
$(document).ready(function () {
$(".ul .a").on("click", function () {
$(".ul").find(".active").removeClass("active");
$(this).addClass("active");
});
});
</script>
There are a few things here:
your CSS is missing in the code, so I have to make a few assumptions
when you navigate in jQuery, you use .ul where you should use ul. Similar for .a and a.
I have documented in the source itself.
$(document).ready(function() {
$("ul li > a").on("click", function() {
$("ul").find(".active").removeClass("active");
$(this).addClass("active");
$("ul").find("ul").css("display", "none"); /* close submenu */
$(this).next("ul").css("display", "block"); /*display submenu */
});
});
/* default link color */
a {
color: purple;
}
/* color for active link */
a.active {
color: red;
}
/* hide submenu's by default */
ul>li>ul {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="sidebar">
<div class="sidebar-header">
<div class="p-b-13">
<img src="" alt="itk" class="center">
</div>
<h6 align="center">Sistem Informasi</h6>
<h3 class="h3_sidebar" align="center" style="color:#0067B2">MANAJEMEN</h3>
</div>
<ul class="list-unstyled components">
<li>
SPJ dan LPJ <i class="fa fa-caret-down float-right mr-2"></i>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Surat Pertanggung Jawaban
</li>
<li>
Laporan Pertanggung Jawaban
</li>
</ul>
</li>
<li>
Akun Belanja <i class="fa fa-caret-down float-right mr-2"></i>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Daftar Akun Belanja
</li>
<li>
Panduan Akun Belanja
</li>
</ul>
</li>
<li>
Help
</li>
<li>
Contact
</li>
</ul>
</nav>
Fixing of your jQuery function:
Update all .ul to ul AND .a to a becuase it is not class, it is TAG.
<script>
$(document).ready(function () {
$("ul a").on("click", function () {
$("ul").find(".active").removeClass("active");
$(this).addClass("active");
});
});
</script>
Working sample is as below
If you are going to use a perfect sample side navigation with dropdown feature, Plesae refer to the code below. It should works. It is in JavaScript. You can merge with jQuery if you want.
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This should avoid conflict. */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: "Lato", sans-serif;
}
/* Fixed sidenav, full height */
.sidenav {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
}
/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
color: #f1f1f1;
}
/* Main content */
.main {
margin-left: 200px; /* Same as the width of the sidenav */
font-size: 20px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
/* Add an active class to the active dropdown button */
.active {
background-color: orange;
color: white;
}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
/* Optional: Style the caret down icon */
.fa-caret-down {
float: right;
padding-right: 8px;
}
/* Some media queries for responsiveness */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div class="sidenav">
About
Services
Clients
Contact
<button class="dropdown-btn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
Link 1
Link 2
Link 3
</div>
Search
</div>
<div class="main">
<h2>Sidebar Dropdown</h2>
<p>Click on the dropdown button to open the dropdown menu inside the side navigation.</p>
<p>This sidebar is of full height (100%) and always shown.</p>
<p>Some random text..</p>
</div>
</body>
</html>

Assistance on creating dynamic menu pop ups -js

What I'm trying to do
Alright so I basically want the div with the class js-op to pop up under each of the icons that are clicked on my side bar. Right now all I have is whenever a user clicks on the icons a popup well pops up.
What I'm trying to do
Ok so I ran though all the icons using a for loop, so that its being watched for any clicked actions. Im new to javascript so I think this is a huge accomplishment! Now Im a bit stuck, basically now I just want javascript to add the class .js-display found on the last line (.css) to the class js-op, respectfully. Meaning under each icon there is a div that has that class. (It is set to display:none) When that icon is clicked that div right under it will get the .js-display so that it becomes visible. I am essentially creating dynamic popup menus.
Extra
Im gonna end up asking later
Ok so this icon is clicked right? A panel displays, but the user decides to click on another icon. Is it possible to have the first panel that was displayed first, disappear?
Thank you
Again thank you!
Now if Im not suppose to have the extra thing in here please tell me, before down voting( I heard stack can be a little harsh) Im not sure, I feel like its still relevant to the main question.
js
var pop_action = document.getElementById("js-uX-pop_up").getElementsByClassName("uX-nv-spn ");
var pop_panel = document.getElementsByClassName("js-op");
for(e_op = 0; e_op < pop_action.length; e_op++ ){
pop_action[e_op].addEventListener("click", activate_eop);
}
function activate_eop(){
alert("hello");
}
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="..\XSystem.css">
<meta charset="utf-8" />
<title>Xlaeo</title>
</head>
<body>
<!-- section that holds mains -->
<div class="xU-wper xU-flex-1-1">
<!-- section holds two sends -->
<section class="xU-flex uX-maon-wper">
<!-- BEGIN LEFT: bar -->
<section class="uX-maon-sc xU-white">
<div class="uX-fluid ">
<span class="uX-bar-modules-wper">
<!-- modules for side bar -->
<!-- BEGIN Image company -->
<div class="uX-company-img">
<span>
<img src="http://icons.iconarchive.com/icons/icons-land/vista-hardware-devices/96/Motherboard-icon.png"/>
</span>
</div>
<!-- end image -->
<!-- BEGIN side bar list-->
<div class="uX-list-modules uX-them-pd">
<span class="uX-side-nav " id="js-uX-pop_up" role="navigation">
<li >
<span class="uX-nv-spn">
<a>
<i class="fab fa-d-and-d"></i>
</a>
</span>
<!-- POPUP -->
<div class="js-op" style="display:none">
<section>
pop up
</section>
</div>
</li>
<li >
<span class="uX-nv-spn">
<i class="fab fa-mandalorian"></i>
</span>
<!-- POPUP -->
<div class="js-op" style="display:none">
<section>
pop up2
</section>
</div>
</li>
<li>
<span class="uX-nv-spn">
<i class="fab fa-snapchat-ghost"></i>
</span>
<!-- POPUP -->
<div class="" style="display:none">
<section>
pop up
</section>
</div>
</li>
<li >
<span class="uX-nv-spn ">
<i class="fas fa-handshake"></i>
</span>
<!-- POPUP -->
<div class="" style="display:none">
<section>
pop up
</section>
</div>
</li>
<li>
<span class="uX-nv-spn">
<i class="fab fa-java"></i>
</span>
<!-- POPUP -->
<div class="uX_popU" style="display:none">
<section>
pop up
</section>
</div>
</li>
</span>
</div>
<!-- end side bar list-->
<!-- profile image -->
<div class="">
<a>
<span class="uX-items-center">
<div class="uX_profile-img-wper">
<img src="https://cdn.imaginetricks.com/wp-content/uploads/2017/08/Wonderful-Cute-Girls-Profile-Picture.jpg"/>
</div>
<span>Emma</span>
</span>
</a>
</div>
<!-- end proifle image -->
</span>
</div>
</section>
<!-- END LEFT: bar -->
<!-- BEGIN RIGHT: bar -->
<section class="uX-maon-sc uX-maon-sc2">
content
</section>
<!-- END RIGHT: bar -->
</section>
</div>
<script type="text/javascript" src="../Js-script/mod-up.js"></script>
</body>
</html>
Css
.xU-flex-1-1, .uX-bar-modules-wper, .uX-fluid, .uX-list-modules, .uX-side-nav li, html,
body, .uX-maon-sc, .uX-items-center, .uX-side-nav {
display: flex;
flex-flow: column; }
.xU-flex, .uX-side-nav {
display: flex; }
.xU-flex-1-1, .uX-bar-modules-wper, .uX-fluid, .uX-list-modules, .uX-side-nav li {
flex: 1 1 auto; }
.uX-side-nav li {
justify-content: center; }
.uX_profile-img-wper {
border-radius: 100%;
overflow: hidden; }
.xU-font, .uX-side-nav .uX-nv-spn {
font-size: 1.4rem;
color: #c62f09; }
.uX-side-nav .uX-nv-spn:hover {
background: lightgray; }
.uX-side-nav .uX-nv-spn:hover {
border-radius: 100%; }
.uX-side-nav .uX-nv-spn {
height: 2.2rem;
width: 2.2rem;
display: flex;
justify-content: center;
align-items: center; }
body {
background: #f4f4f4; }
body li {
list-style-type: none; }
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; }
.xU-white {
background: white; }
img {
width: 100%;
height: 100%; }
.uX-maon-wper, .uX-maon-sc2 {
flex: 1 1 auto; }
.uX_profile-img-wper {
height: 4rem;
width: 4rem; }
.uX-items-center {
align-items: center; }
.uX-bar-modules-wper .uX-company-img {
width: 4.5rem;
border-bottom: 1px solid lightgray; }
.uX-bar-modules-wper .uX-list-modules {
padding: 0.4rem; }
.uX-side-nav {
align-items: center;
flex: 1 1 auto; }
.uX-side-nav li {
height: 100%; }
.uX-side-nav .uX-nv-spn {
padding: 0.4rem;
border-radius: 100%; }
.uX-list-modules {
border-right: 1px solid #c62f09; }
.js-display {
display: block; }
/*# sourceMappingURL=XSystem.css.map */
Your code is missing 'js-op' classes on all of the elements. Also, inline styles always override class/id styles, therefore you need to change
.js-display {display: block;}
to
.js-display {display: block !important;}
or it won't work.
You also didn't provide any JS here, so I had to just make it up, but you get the idea. This should do it:
document.querySelectorAll('.uX-side-nav li').forEach((el)=>{
el.addEventListener('click', (e)=>{
document.querySelectorAll('.js-op').forEach((x)=>{x.classList.remove('js-display');});
e.target.closest('li').querySelector('.js-op').classList.add('js-display');
});
});
.xU-flex-1-1, .uX-bar-modules-wper, .uX-fluid, .uX-list-modules, .uX-side-nav li, html,
body, .uX-maon-sc, .uX-items-center, .uX-side-nav {
display: flex;
flex-flow: column; }
.xU-flex, .uX-side-nav {
display: flex; }
.xU-flex-1-1, .uX-bar-modules-wper, .uX-fluid, .uX-list-modules, .uX-side-nav li {
flex: 1 1 auto; }
.uX-side-nav li {
justify-content: center; }
.uX_profile-img-wper {
border-radius: 100%;
overflow: hidden; }
.xU-font, .uX-side-nav .uX-nv-spn {
font-size: 1.4rem;
color: #c62f09; }
.uX-side-nav .uX-nv-spn:hover {
background: lightgray; }
.uX-side-nav .uX-nv-spn:hover {
border-radius: 100%; }
.uX-side-nav .uX-nv-spn {
height: 2.2rem;
width: 2.2rem;
display: flex;
justify-content: center;
align-items: center; }
body {
background: #f4f4f4; }
body li {
list-style-type: none; }
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; }
.xU-white {
background: white; }
img {
width: 100%;
height: 100%; }
.uX-maon-wper, .uX-maon-sc2 {
flex: 1 1 auto; }
.uX_profile-img-wper {
height: 4rem;
width: 4rem; }
.uX-items-center {
align-items: center; }
.uX-bar-modules-wper .uX-company-img {
width: 4.5rem;
border-bottom: 1px solid lightgray; }
.uX-bar-modules-wper .uX-list-modules {
padding: 0.4rem; }
.uX-side-nav {
align-items: center;
flex: 1 1 auto; }
.uX-side-nav li {
height: 100%; }
.uX-side-nav .uX-nv-spn {
padding: 0.4rem;
border-radius: 100%; }
.uX-list-modules {
border-right: 1px solid #c62f09; }
.js-display {
display: block !important; }
/*# sourceMappingURL=XSystem.css.map */
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="..\XSystem.css">
<meta charset="utf-8" />
<title>Xlaeo</title>
</head>
<body>
<!-- section that holds mains -->
<div class="xU-wper xU-flex-1-1">
<!-- section holds two sends -->
<section class="xU-flex uX-maon-wper">
<!-- BEGIN LEFT: bar -->
<section class="uX-maon-sc xU-white">
<div class="uX-fluid ">
<span class="uX-bar-modules-wper">
<!-- modules for side bar -->
<!-- BEGIN Image company -->
<div class="uX-company-img">
<span>
<img src="http://icons.iconarchive.com/icons/icons-land/vista-hardware-devices/96/Motherboard-icon.png"/>
</span>
</div>
<!-- end image -->
<!-- BEGIN side bar list-->
<div class="uX-list-modules uX-them-pd">
<span class="uX-side-nav " id="js-uX-pop_up" role="navigation">
<li>
<span class="uX-nv-spn">
<i class="fab fa-d-and-d"></i>
</span>
<div class="js-op" style="display:none">
<section>
pop up1
</section>
</div>
</li>
<li>
<span class="uX-nv-spn">
<i class="fab fa-mandalorian"></i>
</span>
<div class="js-op" style="display:none">
<section>
pop up2
</section>
</div>
</li>
<li>
<span class="uX-nv-spn">
<i class="fab fa-snapchat-ghost"></i>
</span>
<div class="js-op" style="display:none">
<section>
pop up3
</section>
</div>
</li>
<li>
<span class="uX-nv-spn ">
<i class="fas fa-handshake"></i>
</span>
<div class="js-op" style="display:none">
<section>
pop up4
</section>
</div>
</li>
<li>
<span class="uX-nv-spn">
<i class="fab fa-java"></i>
</span>
<div class="js-op" style="display:none">
<section>
pop up5
</section>
</div>
</li>
</span>
</div>
<!-- end side bar list-->
<!-- profile image -->
<div class="">
<a>
<span class="uX-items-center">
<div class="uX_profile-img-wper">
<img src="https://cdn.imaginetricks.com/wp-content/uploads/2017/08/Wonderful-Cute-Girls-Profile-Picture.jpg"/>
</div>
<span>Emma</span>
</span>
</a>
</div>
<!-- end proifle image -->
</span>
</div>
</section>
<!-- END LEFT: bar -->
<!-- BEGIN RIGHT: bar -->
<section class="uX-maon-sc uX-maon-sc2">
content
</section>
<!-- END RIGHT: bar -->
</section>
</div>
<script type="text/javascript" src="../Js-script/mod-up.js"></script>
</body>
</html>

.addClass when #mainNav :visible

Desired:
When menu button is clicked and navigation(#mainNav) slides in, check to see if visible. If so, .addClass .is-open to .nav-item. When navigation (#mainNav) is closed, .removeClass .is-open from .nav-item.
Issue:
Class is not being added to .nav-item when navigation is visible(Slides).
HTML
<header>
<!-- Logo and Burger -->
<div class="brand-wrap">
<div class="trigger-wrapper">
<button id="burger">
<div class="nav-trigger-line"></div>
<div class="nav-trigger-line"></div>
<div class="nav-trigger-line"></div>
</button>
</div>
</div>
<!-- End of Logo and Burger -->
<!-- Navigation -->
<nav id="mainNav" class="navbar main-nav">
<div class="nav-container">
<ul class="nav flex-column">
<li class="nav-item">
<span class="nav-number">01.</span><br>Our Company
</li>
<li class="nav-item">
<span class="nav-number">02.</span><br>Our People
</li>
<li class="nav-item">
<a href="services.html" class="nav-link">
<span class="nav-number">03.</span>
<br>Services</a>
</li>
<li class="nav-item">
<span class="nav-number">04.</span><br>Careers
</li>
<li class="nav-item">
<span class="nav-number">05.</span><br>Contact Us
</li>
</ul>
</div>
</nav>
<!-- End of Navigation -->
</header>
CSS
.brand-wrap {
position: fixed;
top: 20px;
right: 20px;
z-index: 999;
}
#burger {
float: right;
margin: 0;
}
.trigger-wrapper {
position: absolute;
right: 5px;
}
.main-nav a {
text-decoration: none;
}
.main-nav {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(35, 31, 32, 1);
}
.nav-container {
margin-top: 80px;
}
.nav-link {
color: #fff;
font-size: 1.5em;
font-weight: 800;
padding: .25em 1em;
}
.nav-link:hover {
color: #82bc00;
}
.nav-number {
font-size: .5em;
font-weight: 600;
}
.nav-trigger-line {
height: 3px;
width: 30px;
background-color: #fff;
margin: 6px auto;
}
JS
// Menu click function
$('#burger').click(function() {
$('#mainNav').toggle();
});
// Check if Nav is visible
if ($('#mainNav').is(':visible')) {
$(".nav-container .nav .nav-item").addClass("is-open");
} else {
$(".nav-container .nav .nav-item").removeClass("is-open");
}
jsfiddle: https://jsfiddle.net/WeebleWobb/auszo29m/2/
You need to send it inside the event handler:
// Menu click function
$('#burger').click(function() {
$('#mainNav').toggle(function () {
// Check if Nav is visible
if ($('#mainNav').is(':visible')) {
$(".nav-container .nav .nav-item").addClass("is-open");
} else {
$(".nav-container .nav .nav-item").removeClass("is-open");
}
});
});
The best thing you can do is, you should put it inside the callback function like above.

display a div on hover of an item such that items inside div should be clickable

$().ready(function() {
// Case : 1
$("li.products").hover(function() {
$(this).parents(".cotnainer-fluid").next().toggleClass("show");
//$("#category-list").css("opacity","1 !important");
});
})
div.banner {
width: 100%;
height: 379px;
}
div.banner>.row {
padding: 0 35px;
}
/* .menu{
background: transparent;
opacity: 0.5;
} */
.menu {
margin-right: 0;
margin-left: 0;
}
#menu-items {
background: #121212;
opacity: 0.7;
}
#menu-items {
padding: 22px;
margin: 0 25px;
text-align: center;
border-radius: 0 0 4px 4px;
}
ul#menu-items li {
list-style: none;
display: inline;
color: #939598;
font: normal 12px/16px Gotham-Medium;
}
ul#menu-items li a {
padding-bottom: 20px;
}
ul#menu-items li>a:hover {
color: #fff;
border-bottom: 4px solid #76bd1c;
}
li.item {
padding: 25px;
}
li.search {
margin-left: 145px;
}
#category-list {
width: 900px;
height: 180px;
margin: 0 auto;
/*
margin-top: -380px;
*/
background-color: #f7f6f5;
position: relative;
top: -380px;
z-index: -1;
display: none;
}
.show {
display: block;
}
/* li.products:hover #category-list{
display: block;
} */
#category-list ul li {
list-style: none;
display: inline-block;
}
.category-menu {
padding-top: 80px;
}
.category-menu {
font: normal 12px/16px Gotham-Medium;
color: #603913;
}
#category-menu-items {
margin-top: 5px;
}
#category-menu-items li {
text-align: center;
}
.padding-left60 {
padding-left: 60px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<srcipt src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<div class="cotnainer-fluid" style="margin-top: 40px;">
<div class="banner">
<div class="row menu">
<ul id="menu-items">
<li class="item">HOME
</li>
<li class="item">ABOUT US
</li>
<li class="item products dropdown">PRODUCTS
</li>
<li class="item">STORE
</li>
<li class="item">CONTACT
</li>
<li class="item">LOGIN
</li>
<li class="item search"><i class="search-icon-header" style="font-size: 16px;"></i>
</li>
<li class="item basket"><i class="glyphicon glyphicon-shopping-cart" style="font-size: 16px;"></i>
</li>
</ul>
</div>
<h1 class="page-title">Some Title</h1>
</div>
</div>
<!-- End Nav items -->
<div id="category-list">
<div class="row category-menu">
<ul id="category-menu-items">
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-biopesticides.png" alt="">
</p>
<p>BIOPESTIDES</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-nutrients.png" alt="">
</p>
<p>NUTRIENTS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-biofertilizers.png" alt="">
</p>
<p>BIOFERTILIZERS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-seeds.png" alt="">
</p>
<p>SEEDS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-garden_Acc.png" alt="">
</p>
<p>GARDEN ACCESSORIES</p>
</a>
</li>
</ul>
</div>
</div>
I have a list of items in navbar, now on hovering on one of the list items i want to display a hidden div which contains another list of items which should be clickable.
In the above code, When I hover on PRODUCTS link; a div shows up. Now, I want to click on items in this div!!!!
I guess I need to check for hasClass('show'), and if so then i should be able to hover and click on the div items.
Any suggestions or help on how to move forward with this?
Priority of ID selector is higher than class selector.
Ref.
//Make sure this style is overwrite the style of #category-list
#category-list.show{
display: block;
}
Replace the style with the below one and try and adjust the position using top of category list
<style>
#category-list {
width: 900px;
height: 180px;
margin: 0 auto;
background-color: #f7f6f5;
position: absolute;
/*top: -380px;*/
z-index: -1;
display: none;
}
#category-list ul li {
list-style: none;
display: inline-block;
}
.show {
display: block !important;
}
Did some work in that jsfiddle.
// Show sub-menu with jQuery
$("ul#menu-items li.products a, ul#menu-items li.products").hover(function(){
console.log("show sub menu");
$("#category-list").show();
});
// Hide sub-menu with jQuery
$("body *").not("#menu-items, li.products, li.products a, #category-list, #category-list *, #category-menu-items, div.categories").hover(function(){
console.log($(this)); // Log the elements that triggers hide of sub menu
$("#category-list").hide();
});
Don't know the pure CSS sub-menu technique yet.
https://jsfiddle.net/mantisse_fr/p1eupdo3/1/

Categories