I have a div which opens when I click a menu button, I am trying to close it if the user clicks anywhere after it is open. The issue I am having is that with my code the show div and the close div when a user clicks I guess are firing at the same time for some reason. The code for the click event is below. How can I make it so they do not fire at the same time and when I open the div that does not fire the click function. Thanks!
//if user clicks and menu is open then hide menu div
$(document).click(function() {
if($("menu").hasClass("menu_closed") == false ) {
//will hide the menu div
closeMenu();
}
}
I think what you want actually is to stop propagation in the other click handler, something like:
$("your_menu_selector").bind("click", function(e){
//your code to open the menu
e.stopPropagation();
return false;
})
You might want to consider adding the event handler to close the menu in the handler that opens the menu. Have it execute only once using the one method. In the handler that opens the menu, simply check to see if it is open already and do a no-op if it is.
$('.openButton').click( function() {
var $menu = $('#menu').
if ($menu.hasClass('menu_closed')) {
$menu.removeClass('menu_closed').addClass('menu_open');
$(document).one( function() {
$menu.removeClass('menu_open').addClass('menu_closed');
});
}
});
Related
I have this code for toggling menus on my site. It will open a menu on click, close others open when you click another and close them all if you click outside.
The issue is, I'm now using this for my search bar to appear too, but if you click inside the search box it vanishes - woops. Would it be possible to amend the hiding code to detect if the user wasn't clicking inside a specific area of the code?
// navbar toggle menu
$(document).on('click', ".toggle-nav > a", function(event) {
event.preventDefault();
event.stopPropagation();
var $toggle = $(this).closest('.toggle-nav').children('.toggle-content');
if ($toggle.hasClass('toggle-active'))
{
$($toggle).removeClass('toggle-active');
}
else
{
$(".toggle-content").removeClass('toggle-active');
$($toggle).addClass('toggle-active');
}
});
// hide the toggle-nav if you click outside of it
$(document).on("click", function ()
{
$(".toggle-content").removeClass('toggle-active');
});
Instead of using click, this uses mouseup. If the target is, for example #search-bar, it won't remove toggle-active from toggle-content elements.
$(document).mouseup(function(e) {
if (!$(e.target).is('#search-bar')) {
$(".toggle-content").removeClass('toggle-active');
}
});
You can see it in action with this jsFiddle.
Hopefully this helps.
Building a mobile menu and would like when the user clicks on the document, not the menu to close the menu if its open.
Problem is that when the first click is fired to open the mobile it automatically closes. I'm struggling to get this bit to work.
The code recognises the click so the window is detecting the right action. I'm just missing one final step I think.
Code is:
$('.mobile-menu-button').click(function(e) {
e.preventDefault();
$('.mobile-menu').slideToggle('slow');
});
// close on off click
$(window).click(function(e){
e.preventDefault();
e.stopPropagation();
if($('.mobile-menu').css("display") == 'block') {
$('.mobile-menu').slideToggle();
console.log('click');
}
});
Thanks
You can use event delegation. When you click on '.mobile-menu', you open it or close it, when you click somewhere else you only close it.
$(window).on('click', function(e){
e.preventDefault();
if ($(e.target).hasClass('mobile-menu-button')) {
$('.mobile-menu').slideToggle('slow');
} else {
$('.mobile-menu').css('display') === 'block' && $('.mobile-menu').slideUp();
}
});
a basic example on this fiddle: https://jsfiddle.net/6e7atrmn/2/
I have a simple button that toggles a menu onclick
If the menu is expanded/visible I hide it when clicking anywhere on the page (a part from the menu itself).
var menuBtn = $(".btn-menu"),
menuContainer = $(".menu"),
menuChildren = $(".menu").find("*");
menuBtn.on("click", function() {
menuContainer.toggle();
});
$(window).mouseup(function(e){
if(!menuContainer.is(e.target) && !menuChildren.is(e.target)){
menuContainer.hide();
}
});
When applying that function on mouseup, my toggle function no longer works. Menu will always stay open if clicking multiple times on the button (whereas it should hide & show).
jsfiddle here
Any idea how I could fix this?
mouseup event was fired before click.
try this
$(window).mouseup(function(e){
if(!menuContainer.is(e.target) && !menuChildren.is(e.target) && !menuBtn.is(e.target)){
menuContainer.hide();
}
});
fiddle js
I have a sliding JS menu that opens when you click the noty_menu link, then closes when you click that link again. Is there a way to set it so that the menu closes when you click ANYWHERE on the page?
Here's the relevant code:
$('.noty_menu').click(function () {
$('ul.the_menu').slideToggle('medium');
});
You could catch a click on the body:
$('body').click(function() {
/* close menu */
});
But then in your menu click you have to prevent propagation of the click up to body. Otherwise the menu will open, the click will propagate up, and the menu will immediately close. return false; should suffice here:
$('.noty_menu').click(function () {
$('ul.the_menu').slideToggle('medium');
return false;
});
(You could also read in the event argument to the handler function like function(ev) { ... } and call ev.stopPropagation()).
You may also want to prevent clicks inside the menu from closing it:
$('ul.the_menu').click(function () {
return false;
});
Note that this solution comes with a caveat that any other click event that stops propagation will also prevent the menu close.
u can use
$('body').click(function(){
//ur code
});
to do this
You can check the entire document, however that includes clicks on the menu (if you have any spacing, this could annoy the user) by something like this:
var menu=$('ul.the_menu');
$(document).on('click',function(){
if(menu.height>0) {
menu.slideToggle('medium');
}
});
I have a popup where i basically just dim the body giving it the lights out effect. I have a click handeler where if the body is clicked it will close the popup but my issue is the click handler stops all clicks even before the popup is opened. Does anyone know how i could do this so that clicking on a link before the popup is opened would go to the link but clicking one after the popup was opened would do my function and not click the link?
Heres what i use right now:
$(document).ready(function() {
$("body").click(function(){
var element=document.getElementById("game");
//yes i could use the jquery method for all of these but this works
element.width="650";
element.height="500";
element.style.position="relative";
$("body").fadeTo(3000,1.0);
}
return false;
})
});
You can actually add your "body" click handeler only after clicking your link/opening the popup. Then after clicking the "body" you may remove it again and restore the click handler for your link. "bind()" and "unbind()" will be handy.
K
Where's the jQuery? When you use jQuery, you use jQuery...
When you click on the body, you can check whether #game is visible or not and work with that:
$(document).ready(function() {
$('body').click(function(e){
if (!$('#game').is(':visible')) {
$('#game').width('650px');
$('#game').height('500px');
$('#game').css('position', 'relative');
$('body').fadeTo(3000, 1.0);
e.preventDefault();
return false;
}
});
});