Menu dropdown doesn't collapse on mouse out - javascript

I'm building a site, located here, in Foundation 3 and I noticed that the dropdowns for the top-bar menu only collapse when you click somewhere in the body or move the cursor to another place in the menu. If you exit the menu by moving the cursor into the body from a dropdown, it just stays open. Is there a way to make it collapse on mouse out?
Unfortunately I do not know what specific code in the framework controls the functionality of the dropdown collapse. Any help is greatly appreciated!!

If you place the following code right at the bottom of your page, just before the </body> tag
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('.has-dropdown').on('mouseout', function () {
$(this).find('.dropdown').hide()
});
$('.has-dropdown').on('mousemove', function () {
$(this).find('.dropdown').show()
});
});
</script>

Related

How to disallow click function when current class is inactive with JavaScript?

When in mobile view, the hamburger menu appears and the user clicks the icon it opens, when you click the close icon. its closes.
I'm attempting to allow users to click outside of the menu to close the menu. Unfortunately the JS code provided above, Allows users to click Anywhere on the site, to Open & close the menu. I Don't want this, I just want the menu to be closed when a user clicks outside of it.
How can I achieve this? Any help is appreciated.
document.querySelector('#bg-close').addEventListener('click', function() {
document.querySelector('.nav').classList.toggle('nav-container')
})
The issue I'm attempting to solve is on my website
Summary:
Hamburger menu is being activated with a click anywhere on the site.
You can implement something like below:
It uses an if statement to see if the .nav-open class is active, in case is not there, nothing will happen. In opposite case it will be removed.
$('#bg-close').on('click', function() {
let nav = $('#navElement-id');
if(nav.attr('class') == 'nav-container nav-open'){
nav.attr('class','nav-container');
}
});
*{padding:0;margin:0}
#bg-close{height:100vh;width:100vw;background-color:blue}
.nav-container{color:blue; padding:10px;position:absolute;top:10px; left:0;}
.nav-open{color:black!important;background-color:grey;width:300px;height:200px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bg-close">
</div>
<div id="navElement-id" class="nav-container nav-open">Click on the blue</div>

Bootstrap modal over another modal Scrolling problem

So I have created a modal in bootstrap in inside this first modal a place a button for opening a second modal. It works perfectly . But when i close the 2nd modal the first modal scroll doesn't work. Rather if i scroll then the main body scrolled. So How can i solve this.
Add to your jQuery Code
<script>
$('#id_ofyou_secondary_modal').on('hidden.bs.modal', function (e) {
$('body').addClass('modal-open');
});
</script>

How to close off-canvas menu by clicking on window inside canvas?

here's my codepen http://codepen.io/anon/pen/GZWPrj
I know it's been answered few times, but it's too difficult for me to translate it to my code.
So I have a second off-canvas menu which is working as intended.
One thing I want to add is the ability to close this menu, by clicking anywhere outside the off-canvas menu - so clicking inside the canvas.
I found a good working example like
$(window).on("click", function(e) {
if (
$(".wrapper").hasClass("nav-open") &&
!$(e.target).parents(".side-nav").hasClass("side-nav") &&
!$(e.target).hasClass("toggle")
) {
$(".wrapper").removeClass("nav-open");
}
});
here Close off-canvas menu on window click but I'm too dumb to figure out how to implement it to my version of code.
Your html structure is different to the linked example. Below is some code that will work for your example:
$(window).on("click", function(e) {
if (!$(e.target).hasClass('menu-link') && !$(e.target).closest('.nav-stacked').hasClass('active')) {
//Revert the menu
$('#menu').removeClass('active');
//Revert the main content
$('.container').removeClass('active');
}
});
Updated Codepen

Drop Down Popup Issue

I have an issue with jQuery Popup Drop down. My Issue is When I click the drop down its Opening . Under the Drop Down there are parent and child lists . But when I click on any of the child list its sliding upwards. Again when i try to open the Drop down for the First time is not getting slide down. But second time its getting Slide down. Can anyone Help me out plz ? Here is My Code :
<script>
function test()
{
jQuery("div[class^='dropDownButton']").slideUp();
}
function test1()
{
jQuery("div[class^='dropDownButton']").slideDown();
}

Toggle DIV with JQuery

I have a FAQ area on my page that has all of the questions in a list and when a user clicks on a title, a DIV with the answer will expand into view. However, I'm having trouble when it comes to closing the answer DIV layer. One of two things happen...
This one will simply open and close each DIV layer individually therefore multiple answers can be open at once. I want only one open, when a user either clicks the same title or another title, the currently open layer should collapse.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".faq_answer").hide();
jQuery(".faq_heading").click( function() {
jQuery(this).next(".faq_answer").slideToggle(500);
});
});
</script>
This one will collapse whatever layer is currently open when another title is clicked (which is good). However, when the SAME title is clicked it closes it and then reopens it.
<script type="text/javascript">
jQuery(document).ready( function() {
jQuery(".faq_answer").hide();
jQuery(".faq_heading").click( function() {
jQuery(".faq_answer").hide(500);
jQuery(this).next(".faq_answer").slideToggle(500);
});
});
</script>
Inside your click handler, instead of this:
jQuery(".faq_answer").hide(500);
Try this:
jQuery(".faq_heading").not(this).next(".faq_answer").hide(500);

Categories