We Keep Coding

How to make a delay after not hover on submenu

I have a problem with menu delay. I can't add delay when I not hover on submenu. What can I change to delay the submenu for 1 second when I not hover on it. I have to delete this delay when I hover on main menu.
better explenation:
When you hover the main menu items, the delay of the first item keeps the menu item open, while the mouse is already on the second menu item. See gif below.
How will I be able to fix this? Keeping the delay, but when another menu is open, hiding the menu item instantly.
problem
structure of html (compressed for better view):
<div>
<ul class="menu_type_top">
<li>Hello<li/>
<li>hi
<ul>
<li>Hello</li>
<li>hi</li>
</ul>
<li/>
<li>ok<li/>
</ul>
</div>
Code in javascirpt to correct:
$('ul.menu_type_top > li').on('mouseover', function(e){
var ulObj = $(this).find("ul:first");
console.log(ulObj);
ulObj.show();
var menu_height = ulObj[0].clientHeight + 300;
$('ul.menu_type_top').css({ height: menu_height });//pokazanie podmenu bo warstwa jest w divie gdzie overflow: hidden
}).on('mouseout', function(e){
$(this).find("ul:first").hide();
$('ul.menu_type_top').css({ height: 40 });//powrót do normalnej wysokości menu
});
$('ul.menu_type_top li li').on('mouseover',function(e){
if($(this).has('ul').length) {
}
$('ul:first',this).show();
}).on('mouseout',function(e){
$('ul:first', this).hide();
});

Why does my jQuery open and close my pop up before clicking the body?

I have a pop up that opens up so users can reply to messages. now when a user clicks <a> tag it opens the popup, but it doesn't close if they hit anywhere in the body. I tried fixing this by using jquery but it keeps opening and then closing the pop up again immediately after clicking on the <a> tag.
My <a> tag:
<a class="msg-icon2" onclick="openReplyModal(<?php echo $msg_id ; ?>)">
<i class="fas fa-reply"></i>
</a>
My jquery:
var msg_id;
function openReplyModal(id) {
msg_id = id
$("#reply_modal" + msg_id).fadeIn();
jQuery(document).ready(function($) {
jQuery("body").click(function() {
$("#reply_modal" + msg_id).fadeOut();
});
});
}
How can I adjust my code so that when the user clicks the button for the first time it would open the popup and stay opened unless he clicks anywhere in the body?
here is the code i got from the answer below:
`function openReplyModal(id, event) {
$(".modal").hide(); // close other modal
msg_id = id
$("#reply_modal" + msg_id).fadeIn();
event.preventDefault();
event.stopPropagation();
}
jQuery(document).ready(function($) {
// click on modal doesn't hide itself
$("body").on("click", ".modal", function(e) {
e.stopPropagation();
});
// clicl anywhere else hides all modals
$(window).click(function() {
$(".modal").fadeOut();
});
});`

Give all your modals a common class, such as class="reply_modal". Then you can have a general click handler that fades them all out when you click on the body.
The reason that the modal closes immediately is that the click event bubbles out from the <a> to the body, so it closes the modal. I added event.stopPropagation() to the function so it won't bubble out.
Use $(window).click() to detect clicks anywhere in the window outside the element. See How do I detect a click outside an element?.
var msg_id;
function openReplyModal(id, event) {
$(".reply_modal").hide(); // close other modal
msg_id = id
$("#reply_modal" + msg_id).fadeIn();
event.preventDefault();
event.stopPropagation();
}
jQuery(document).ready(function($) {
// click on modal doesn't hide itself
$("body").on("click", ".reply_modal", function(e) {
e.stopPropagation();
});
// clicl anywhere else hides all modals
$(window).click(function() {
$(".reply_modal").fadeOut();
});
});
.reply_modal {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="msg-icon2" onclick="openReplyModal(1, event)" href="#"> <i class="fas fa-reply">open 1</i></a>
<a class="msg-icon2" onclick="openReplyModal(2, event)" href="#"> <i class="fas fa-reply">open 2</i></a>
<div id="reply_modal1" class="reply_modal">This is modal 1<br>
<input></div>
<div id="reply_modal2" class="reply_modal">This is modal 2<br>
<input></div>

jQuery(document).ready(function ($) {
function openReplyModal(id) {
msg_id = id
$("#reply_modal" + msg_id).addClass('model-open').fadeIn();
}
$('body').click(function (e) {
$('.model-open').removeClass('open').fadeOut();
});
});

Toggle menu but also allows click inside without closing

Firstly apologies for the random title, I really can't think of another way to word it succinctly.
This is my issue.
I have a couple of nav icons, that when clicked toggle menu displays, just like you see everywhere: facebook, etc.
When you click outside of the div it hides the menu.
It works but I have two problems.
Clicking outside works to close the open div, but clicking on the icon that triggers the toggle doesn't close it, it just re-toggles it instantly.
I would like to be able to click inside of the menus without them closing, which they are currently doing onclick.
The html looks something like this, where the user-menu is the click-able icon that toggles the div contained within.
HTML
<nav>
<div class="user-menu">
<div id="user-dropdown">MENU CONTENTS HERE</div>
</div>
</nav>
jQuery
$('.user-menu').click(function () {
$('#user-dropdown').fadeToggle();
});
$(document).mouseup(function(e) {
var container = $("#user-dropdown");
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.hide();
}
});
FIDDLE
https://jsfiddle.net/vo8a1r0p/
EDIT - ANSWER
Using a mixture of Bhuwan's answer and a stopPropagation() it's now working.
Working jQUERY
$(document).on("click", function(e) {
if ($(e.target).hasClass("user-menu")) {
$('#user-dropdown').fadeToggle();
} else {
if ($(e.target).hasClass("dropdown-menu")) {
$('#user-dropdown').show();
} else {
$('#user-dropdown').fadeOut();
}
}
});
$("#user-dropdown").click(function(e){
e.stopPropagation();
});
Working FIDDLE
https://jsfiddle.net/ne4yfbjp/

You can try this
$(document).on("click", function(e) {
if ($(e.target).hasClass("user-menu")) {
$('#user-dropdown').fadeToggle();
} else {
if ($(e.target).closest("#user-dropdown").hasClass("dropdown-menu")) {
$('#user-dropdown').show();
} else {
$('#user-dropdown').fadeOut();
}
}
});
.dropdown-menu {
display: none;
background: gray;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div>
<button class="user-menu">Menu</button>
<div id="user-dropdown" class="dropdown-menu">
<div class="username">
Some User
</div>
<ul>
<li>Link1</li>
<li>Link1</li>
</ul>
</div>
</div>
</nav>

How do I make a .hover div stay open while the mouseover is still on the parent?

First things first, a fiddle: http://jsfiddle.net/d7wfv8w8/
I have a navbar with a logo, search form and a Categories link. When somebody moves over it with the mouse, it should open the wrapper-categories div, which is display: none; by default.
I got it working, except the div is closing when you then move the mouse over the div that opened. I thought I could get it to stay open if I used .navbar .toggle to tell it that the parent is .navbar and it should stay open as long as the mouse is anywhere over that parent div.
How can I achieve this?
Here is my HTML:
<div class="navbar">
<div class="wrapper-header">
<ul>
<li class="">Logo Here</li>
<li class="">Search Here</li>
<li class="">Categories</li>
</ul>
</div>
<div class="wrapper-categories">
Categories Here
</div>
</div>
And the jQuery:
$(".navbar .toggle").hover(function (event){
event.preventDefault();
$(".wrapper-categories").slideToggle("fast");
});

You can achieve this by binding the hover function to the element wrapping both wrapper-header and wrapper-catagories. This will cause the hoverOut to only be called when it leaves the wrapper for both elements. Keeping both of your required divs open.
Fiddle: http://jsfiddle.net/d7wfv8w8/5/

Late to the party but change your class' to ID's and give this a go. Works for me.
$(document).ready(function(){
$( "#toggle" ).hover(
function() {
$( "#wrapper-categories" ).slideDown({
left: "+=50",
height: "toggle"
}, 500, function() {
// Animation complete.
});
}
);
var inArr = {toggle:false, wrapper-categories:false};
$('#toggle, #wrapper-categories').mouseover(function(){
inArr [$(this).attr('id')] = true;
});
$('#toggle, #wrapper-categories').mouseout(function(){
inArr [$(this).attr('id')] = false;
setTimeout(function(){
if(!inArr.toggle && !inArr.wrapper-categories) {
$('#navArea').slideUp(500);
}
},100);
});
});

Change class onclick anyplace on document to close a menu?

I use this code which opens and closes a menu. How can I have it close when someone clicks anyplace on the screen?
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";
} else {
myLayer.style.display="none";
}
}
The HTML
<div style="float:left;">
<a href="#" class="button" onclick="javascript:showElement('v-menu')">
<span>Monitoring</span></a>
<ul id="v-menu" class="v-menu" style="display:none;" >
<li>Start</li>
<li>Stop</li>
</div>

You will need to do two things to achieve this:
Bind a click event for the whole document, and hide the menu if it is shown.
document.addEventListener("click", function(event) {
var menu = document.getElementById('v-menu');
if (event.target !== menu && menu.style.display == 'block')
menu.style.display = "none";
});
Stop the click event propagation when the menu is clicked, so the event does not bubble up to the document.
<a href="javascript:void(0)" class="button"
onclick="showElement('v-menu'); event.stopPropagation()">
See this in action: http://jsfiddle.net/william/Pfv8N/.

You can attach an event on document.body and in the handler you can write your code to
hide the menu like this
document.body.addEventListener("click", function(){
//conditions to check if click is not on ur menu
showElement();
}, false);