We Keep Coding

Open child div on hover parent and close other child divs ( w/ Javascript)

When I open a child div on hover with Javascript it works, also when I hover over the next parent div that child div opens but when I go back to the first parent the second one stays open (on top) and doesn't fade-out.
What I would like is that the other child div('s) close when hovering to a new one. Maybe good to know is that I only want the other child div(s) to close when hovering to a new parent with a child div not when im just hovering out of the current parent.
Does anyone know the trick?
$('li.menu-item-has-children').hover(function () {
$('ul.dropdown-menu-main', this).fadeIn('slow');
});
ul, ul li {
list-style:none;
padding:0;
margin:0;
}
li {
display: inline-block;
position: relative;
margin-right:20px !important;
}
ul.dropdown-menu-main {
display:none;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100vh;
background:black;
z-index:-1;
padding:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="menu-item-has-children">
<a href="#">Main 1</div>
<ul class="dropdown-menu-main">
<li>Sub 1</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#">Main 2</div>
<ul class="dropdown-menu-main">
<li>Sub 2</li>
</ul>
</li>
</ul>

I found the solution when 'parent()' and 'children()' are not 'this'.
$('li.menu-item-has-children').hover(function () {
$('ul.dropdown-menu-main', this).fadeIn('slow');
$(this).parent().children().not(this).find('ul.dropdown-menu-main').fadeOut('fast');
});
ul, ul li {
list-style:none;
padding:0;
margin:0;
}
li {
display: inline-block;
position: relative;
margin-right:20px !important;
}
ul.dropdown-menu-main {
display:none;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100vh;
background:black;
z-index:-1;
padding:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="menu-item-has-children">
<a href="#">Main 1</div>
<ul class="dropdown-menu-main">
<li>Sub 1</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#">Main 2</div>
<ul class="dropdown-menu-main">
<li>Sub 2</li>
</ul>
</li>
</ul>

Sorry have just re-read your question and realised you wanted the menu to stay active. I've created a demonstration which does this by adding an .active class and toggling the submenus are you initially wanted using fadeIn and fadeOut. This will also allow you to attribute css styles to the dropdown if you would rather use that rather than jquery.
// Toggle function on hover, ignore if already active
$(".menu-item-has-children:not('.active')").hover( function() {
// Remove active class from all menus
$(".menu-item-has-children.active").toggleClass();
// Add toggle class to this menu
$(this).toggleClass("active");
// Fade out existing dropdown menus
$(".dropdown-menu-main").fadeOut('slow');
// Fade in this child dropdown menu
$(this).find(".dropdown-menu-main").fadeIn('slow');
});
The second example I will leave up for others, it shows how to do a more traditional dropdown where it fades out once the hover leaves the parent. You can use the exit function as well as the entry function of hover, the first function you provide is ran on mouseenter and the second on mouseleave.
Jquery .hover()
EXAMPLE WITH PERSISTENT DROPDOWNS
// Toggle function on hover, ignore if already active
$(".menu-item-has-children:not('.active')").hover( function() {
// Remove active class from all menus
$(".menu-item-has-children.active").toggleClass();
// Add toggle class to this menu
$(this).toggleClass("active");
// Fade out existing dropdown menus
$(".dropdown-menu-main").fadeOut('slow');
// Fade in this child dropdown menu
$(this).find(".dropdown-menu-main").fadeIn('slow');
});
ul, ul li {
list-style:none;
padding:0;
margin:0;
}
li {
display: inline-block;
position: relative;
margin-right:20px !important;
}
ul.dropdown-menu-main {
display:none;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100vh;
background:black;
z-index:-1;
padding:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="menu-item-has-children">
<a href="#">Main 1</div>
<ul class="dropdown-menu-main">
<li>Sub 1</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#">Main 2</div>
<ul class="dropdown-menu-main">
<li>Sub 2</li>
</ul>
</li>
</ul>
EXAMPLE WITH TRADITIONAL DROPDOWNS
These collapse when the hovering over the parent ends.
// Hover function
$('li.menu-item-has-children').hover(
// Hover in function
function() {
$('ul.dropdown-menu-main', this).fadeIn('slow');
},
// Hover exit function
function() {
$('ul.dropdown-menu-main', this).fadeOut('slow');
}
);
ul,
ul li {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
position: relative;
margin-right: 20px !important;
}
ul.dropdown-menu-main {
display: none;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100vh;
background: black;
z-index: -1;
padding: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="menu-item-has-children">
<a href="#">Main 1</div>
<ul class="dropdown-menu-main">
<li>Sub 1</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#">Main 2</div>
<ul class="dropdown-menu-main">
<li>Sub 2</li>
</ul>
</li>
</ul>

How to replace hover for mobile device

I tried to use :active for the mobile device but it doesn't seem to work. Can I do this with css or do I need to create mouseover listeners in javascript?
#major{
display:flex;
justify-content:space-around;
list-style-type:none;
}
#minor1,#minor2{
display:none;
}
#about:hover, #take:hover{
background-color:#538231;
color:white;
}
#take:hover #minor2, #take:active #minor2 {
display:flex;
position:absolute;
justify-content:start;
left:0 ;
list-style-type:none;
background-color:#538231;
color:white;
width:100%;
}
#about:hover #minor1, #about:active #minor1{
display:flex;
position:absolute;
justify-content:start;
left:0;
list-style-type:none;
background-color:#538231;
color:white;
width:100%;
}
#navbar{
position:relative;
font-size:3.5vw;
color:#538231;
background-color:#b3d7f7;
}
li{
margin:0!important;
}
#minor1 li{
margin-left:3vw!important;
}
#minor2 li{
margin-left:1vw!important;
margin-right:5vw!important;
}
<div id="navbar">
<ul id="major">
<li>HOME</li>
<li id="about">ABOUT US
<ul id="minor1">
<li>OUR STORY</li>
<li>OUR WORK</li>
<li>SWAG LEADERS</li>
<li>IN THE NEWS</li>
</ul>
</li>
<li>CALENDAR</li>
<li id="take">TAKE ACTION
<ul id="minor2">
<li>GET INVOLVED</li>
<li>DONATE</li>
</ul>
</li>
<li>RESOURCES</li>
</ul>
</div>

If I have to go on only pure HTML and CSS, I have two options for this.
First is to put an attribute tabindex="0" on li tag then add :focus selector on the css. But the problem with this is that you have to click somewhere else to display none the sub-menus.
Second is to have a checkbox to accommodate the click/unclick event. I just set an example for mobile view, #media query of max-width: 800px. So please resize the browser when you check this.
Please check my code below:
#major{
display:flex;
justify-content:space-around;
list-style-type:none;
}
#minor1,#minor2{
display:none;
}
#about:hover, #take:hover{
background-color:#538231;
color:white;
}
#take:hover #minor2, #take:active #minor2 {
display:flex;
position:absolute;
justify-content:start;
left:0 ;
list-style-type:none;
background-color:#538231;
color:white;
width:100%;
}
#about:hover #minor1, #about:active #minor1{
display:flex;
position:absolute;
justify-content:start;
left:0;
list-style-type:none;
background-color:#538231;
color:white;
width:100%;
}
#navbar{
position:relative;
font-size:3.5vw;
color:#538231;
background-color:#b3d7f7;
}
li{
margin:0!important;
}
#minor1 li{
margin-left:3vw!important;
}
#minor2 li{
margin-left:1vw!important;
margin-right:5vw!important;
}
input[type="checkbox"] {
position: absolute;
opacity: 0;
}
#media only screen and (max-width: 800px) {
#about input[type="checkbox"]:checked ~ label, #take input[type="checkbox"]:checked ~ label {
background-color:#538231;
color:white;
}
#about input[type="checkbox"]:checked ~ ul, #take input[type="checkbox"]:checked ~ ul {
display:flex;
position:absolute;
justify-content:start;
left:0;
list-style-type:none;
background-color:#538231;
color:white;
width:100%;
}
}
<div id="navbar">
<ul id="major">
<li>HOME</li>
<li id="about">
<input type="checkbox" id="check">
<label for="check">ABOUT US</label>
<ul id="minor1">
<li>OUR STORY</li>
<li>OUR WORK</li>
<li>SWAG LEADERS</li>
<li>IN THE NEWS</li>
</ul>
</li>
<li>CALENDAR</li>
<li id="take">
<input type="checkbox" id="check2">
<label for="check2">TAKE ACTION</label>
<ul id="minor2">
<li>GET INVOLVED</li>
<li>DONATE</li>
</ul>
</li>
<li>RESOURCES</li>
</ul>
</div>

How can I scroll to an element inside a scrollable div?

I have a parent container which has two child elements. The left element is a list of items returned from a database query. The parent container has a fixed height, so any items returned in the left panel are scrollable within that left panel, not the body.
When navigating to this page, I would like for the left panel to be positioned at the point of a matching element ID. This ID i will handle through Angular's routing subscriptions, but for demo purposes I have hard coded it here.
I have tried the code below (primarily the JS) with no luck. Any assistance would be greatly appreciated.
var list = document.getElementById("list");
var targetLi = document.getElementById('myID');
list.scrollTop = (targetLi.offsetTop - 50);
#wrapper {
width:1280px;
height:600px;
border:1px solid #d9d9d9;
border-radius:5px;
display:flex;
margin:20px auto;
}
#list {
width:200px;
height:100%;
border-right:1px solid #d9d9d9;
display:flex;
overflow:hidden;
}
#right span {
color:#999;
font-size:12px;
font-family:helvetica;
}
ul {
width:100%;
margin:0;
padding:0;
list-style:none;
overflow-y: scroll;
}
li {
width:100%;
padding:20px 10px;
box-sizing:border-box;
border-bottom:1px solid #d9d9d9;
display:block;
font-family:helvetica;
color:#666;
}
<div id="wrapper">
<div id="list">
<ul>
<li>
Item
</li>
<li>
Item
</li>
<li>
Item
</li> <li>
Item
</li> <li>
Item
</li>
<li>
Item
</li>
<li>
Item
</li>
<li>
Item
</li>
<li>
Item
</li>
<li>
Item
</li>
<li>
Item
</li>
<li>
Item
</li>
<li>
Item
</li>
<li>
Item
</li>
<li>
Item
</li>
<li id="myID">
Item with ID
</li>
</ul>
</div>
<div id="right">
<button id="button">Demo purposes button</button>
<span> Note: this would instead be called in 'ngAfterViewInit' or after the firestore query has completed.
</div>
</div>

The best (and AFAIK only) option that will work across all browsers is to implement a hidden input element (like a checkbox for example) and set the focus to that element. This way the browser will scroll the container so that the focused input is visible. The trick is not to set the styling to display: none but only make the element optically invisible, for example:
opacity: 0;
width: 0;
height: 0;
display: block;

jquery use .stopPropagation() on hover menu

How to use event .stopPropagation() (or something else) in the following situation.
I have a standard menu with submenu. In the submenu background, I have background image which I need to overlay adding pseuso-element (background:green) on the parent. Because with jquery I cant control css pseudo-elements (I need control opacity), I add another class to my parent.
Everything works as I need, but adding / removing the class on parent makes the image background blink.
jsfiddle
my site live (top menu is my problem)
HTML:
<ul class="top-menu">
<li>
link 1
<div class="submenu">
<ul>
<li>sublink 1</li>
<li>sublink 2</li>
<li>sublink 3</li>
<li>sublink 4</li>
<li>sublink 5</li>
</ul>
</div>
</li>
<li>link 2</li>
<li>link 3</li>
</ul>
jquery
$(".submenu a").mouseover(function(e){
$(".submenu").addClass("myclass");
}).mouseout(function(e){
var cover = $(".submenu");
cover.data('timer', setTimeout(function(){
cover.removeClass("myclass");
}, 2000)
);
e.stopPropagation();
});
css
*{
box-sizing:border-box;
}
ul.top-menu {
display:flex;
list-style:none;
text-transform:uppercase;
width:100%;
justify-content:center;
background:white;
position:relative;
}
ul.top-menu li a {
color:black;
padding:10px;
text-decoration:none;
display:block;
}
.submenu {
position:absolute;
background:red url("http://www.metalclays.com/content/images/thumbs/0002871_texture-tile-fireworks_100.jpeg");
background-position:right top;
background-size:200px auto;
background-repeat:no-repeat;
width:100%;
top:100%;
left:0;
z-index:0;
}
.submenu:after {
content:"";
background:green;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
opacity:0;
z-index:-1;
}
.submenu.myclass:after {
opacity:1;
}
.submenu ul {
list-style:none;
}
.submenu a {
color:white;
display:block;
}

have you tried this?
$(".submenu a").mouseover(function(e){
$(".submenu").addClass("myclass");
}).mouseout(function(e){
e.preventDefault();
$(".submenu").removeClass("myclass");
});

but adding / removing the class on parent makes the image background blink
This happens because on mouseover you add and add the class. Change from:
$(".submenu a").mouseover(function(e){
$(".submenu").addClass("myclass");
})
to:
$(".submenu a").mouseover(function(e){
if ($(".submenu.myclass").length == 0) {
$(".submenu").addClass("myclass");
}
})
The updated fiddle.

CSS - Need help figuring out where I went wrong with my dropdown menu nav

Hi I posted two days ago and got some feedback but am still having issue getting my drop down nav working. Any feedback on how I can get my drop down nav working or if there is a cleaner, simpler way to execute this?
Here is my code as it stands now with the fixes from the previous post implemented.
JSfiddle as well.
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="template_ss.css"/>
<title></title>
</div>
</head>
<body>
<!--------------------------header--------------------------->
<div id="headerDiv">
<div id="titleDiv">
<p id= "titleText"><span>Ti</span>t<span>le</span></p>
</div>
<div class="navDiv">
<ul class="navUL">
<li>Home</li>
<li>
Top
<ul class="dropdown">
<li>Menu</li>
<li>Plus</li>
<li>Constant</li>
</ul>
</li>
<li>
Browse
<ul class="dropdown">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
Random
<ul class="dropdown">
<li>blank</li>
<li>none</li>
<li>all</li>
</ul>
</li>
<li>
Profile
<ul class="dropdown">
<li>My profile</li>
<li>Edit profile</li>
</ul>
</li>
<li>
How it works
</li>
</ul>
</div>
<div class="searchDiv">
<form>
<input type="text" placeholder="blah..." required>
<input type="button" value="Search">
</form>
</div>
<!---------------------------body--------------------------->
<div class="bodyDiv">
</div>
</body>
</html>
CSS:
/*-------------------header----------------------*/
body{
margin:0px;
}
#headerDiv{
position: fixed;
height:12%;
width:100%;
background-image:url("header.png");
background-repeat:repeat-x;
text-align: center;
}
#titleDiv{
width: auto;
margin: auto 0;
}
#titleText{
color:white;
font-size:130%;
text-allign:center;
font-family:verdana,san serif;
}
span:first-child{
color:red;
}
span{
color:blue;
}
.navDiv{
display:inline-block;
z-index:10;
}
.navUL{
position:relative;
display:inline-block;
list-style-type:none;
margin: auto 0;
padding:0;
border-top:1 solid;
border-right:1 solid;
border-left:1 solid;
width:100%;
}
.navUL:after{
content:"";
display:table;
}
.navUL li{
padding: .2em 2em;
margin:2em,2em,2em,2em;
color: #fff;
background-color: #036;
display:inline-block;
text-align:center;
position:relative;
}
.navUL li:hover{
background-color:#07427c;
}
.navUL li a{
color:#fff;
}
.navUL li p{
margin:0;
}
.dropdown{
position:absolute;
display:none;
background-color:#036;
padding:0
left:0;
}
.navUL ul li:hover > ul{
display:inline;
}
.navUL>ul>li:after{
content:"\25BC";
font-size:.5em;
display:inline;
position:relative;
}
.searchDiv{
display:inline-block;
}
/*------------------body--------------------*/
.bodyDiv{
text-align:center;
float:left;
background-color:grey;
height:80%;
width:70%;
position:relative;
top:80%;
left:50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

I can't be sure exactly what you're looking for, since neither of your two posts specified what your question was, but from looking at your jsfiddle, I saw two noticeable fixes that were needed. First, your html body was floating up into your nav. You need to clear those floats. Secondly, your css for displaying the dropdown was invalid. You were setting a rule on .navUL ul li:hover > ul. Since .navUL is the class of the unordered list, it has no child ul. The proper path would be ul.navUL li:hover ul.
Here is an update of your jsfiddle