I have found a couple topics regarding to this issue, but none of them unfortunately worked out for me.
I am using this jQuery method like this:
//jQuery
$('.menu_user').click(function(){
$(".top_menu").toggle();
});
// HTML
<div class="menu_user">MENU</div>
<nav class="top_menu">
...
</nav>
Basically, when I click on the MENU div, the menu is rolled down, when I click on it again, then the menu is rolled up = hidden.
The problem is that when the menu is rolled down and I click outside the Menu div, the menu stays displayed - and I would like to hide it.
I went through some tutorials, but I didn't find a solution that would solve this issue.
I'll be glad for every help regarding to this issue.
Thanks!
You can do a click event, and inside it check if the click was inside the menu_user div.
If not, then you can hide the dropdown.
$("body > div").click(function() {
if ($(this).attr("class") != "menu_user") {
$(".top_menu").hide();
}
});
You could use
$(document).on( "click", function() {
if ($('.top_menu:hover').length === 0) {
//hide the stuff
//roll up menu
$(".top_menu").hide();
} else if ($('.menu_user:hover').length === 0) {
$(".top_menu").toggle();
}
});
so that when the menu is rolled down and the user clicked outside .top_menu it will roll up .top_menu
Remember that the above code will fire every time a user clicks on the page.
Related
I have a button cart on opencart.
I have this code:
/* Ajax Cart */
$('#cart > .heading a').live('click', function() {
$('#cart').addClass('active');
$('#cart').load('index.php?route=module/cart #cart > *');
$('#cart').live('mouseleave', function() {
$(this).removeClass('active');
});
});
On desktop work well, when I click on button open cart window, when I leave mouse it dissapear.
But on mobile when I click, it open cart window, but dont dissapear anymore.
So on mobile I would like to dissapear when I click in any place outside that cart.
Something like that (but I know it doesnt work):
$('#cart').live('clickoutside', function() {
$(this).removeClass('active');
});
Hope you can understand me. Thank you!
This is a very common problem. You'll find it easily been dealt with on dropdown menus.
I cannot test the code at the moment but I'm pretty sure this will work for you:
$(document).on("click", function() {
if ($(this).closest("#cart").length === 0) {
$('#cart').removeClass("active");
}
});
Let me explain why this works. On every click on the page, check if the click's target is inside #cart (i.e. check if any of the ancestor matches #cart selector).
If it's not, remove the cart's active class. This will allow clicks inside the cart and not close it.
Here's the documentation for it. jQuery.closest
I have a dropdown menu that on click needs to trigger an overlayer to bring the focus on the dropdown menu.
I have 2 dropdown menus, for this reason i can't use a normal toggleClass(), so I found a solution and I do an if condition to find if the overlay is already showed
everything works fine, but I have a problem, if the user double click on the li.dropdown, this solution doesn't work anymore :(
how can I hide the overlayer if the user double click on the li.dropdown?
this is my codepen > https://codepen.io/mp1985/pen/KrBOdB
$('li.dropdown').click(function() {
if (!$('.full-overlayer').hasClass('show')){
$(".full-overlayer").toggleClass("show");
}
});
$('.full-overlayer, .dropdown-menu a').click(function() {
$('.full-overlayer').removeClass('show');
});
I am not sure if this was the best solution to approach to this task.
any suggestion or advice?
maybe I found a solution that works.
I added another if condition to check if this has class "open"
if ($(this).hasClass('open')) {
$(".full-overlayer").removeClass("show");
}
I am testing now, but it seems work, or at least I hope
here the codepen if somebody need for the future > https://codepen.io/mp1985/pen/kXjOAN
WORKING CODEPEN -> https://codepen.io/anon/pen/grdgva]
$('li.dropdown').on('click',function() {
if (!$(this).hasClass('open'))
{
$(".full-overlayer").addClass("show");
} else
{
$(".full-overlayer").removeClass("show");
}
});
$('.full-overlayer, .dropdown-menu a').click(function() {
$('.full-overlayer').removeClass('show');
});
Maybe it helps...
I tried to find solution to close bootstrap menu when clicking outside of it(in mobile window size), but cant get it to work, I get it to work when clicking one of the 'a' links by this code:
// menu buttons collapses when clicking a link
$('document').ready(function()
{
if ($('a').on('click', function()
{
$('.collapse, #mainContainer').removeClass('in');
$('.navbar-toggle').toggleClass('collapsed'); // button
}));
});
but how to close menu by clicking outside the menu navbar?
here's my page that shows the problem
iwebdesign.se
and yes i tried this already, not working:
similar question
Assuming you want to do something different when clicking outside of the menu (i.e. collapse the menu) than what happens when you click inside the menu, you probably want something like this to determine if you're clicking inside or outside of the menu:
$('body').click(function(event){
// check if the clicked element is a descendent of navigation
if ($(event.target).closest('.navigation').length) {
return; //do nothing if event target is within the navigation
} else {
// do something if the event target is outside the navigation
// code for collapsing menu here...
}
});
https://jsfiddle.net/L3qg4pa8/5/ shows the concept, roughly.
Of course, you will need to replace '.navigation' in the .closest() statement with the appropriate selector for the container of your navigation.
$(document).on('click',function(){
$('.collapse').collapse('hide');
});
Just copy the code and past your custome script or index.html
thank's Remy
click outside to hide bootstrap toggle menu close(hide) it
Here the answer :
(document).on('click',function(){
$('.collapse').collapse('hide');
})
Hope it's help :)
Remy
I am trying to create a customized bootstrap dropdown menu that opens and closes on hover (which I have working), but also stays open if the search bar is focused in the Events dropdown menu until it loses focus or the users clicks away from the dropdown.
Here is my js code:
$('ul.nav li.dropdown').hover(function() {
$(this).closest('.dropdown-menu').show(); $(this).addClass('open'); },
function() {
$("#search-query").focusin(function() {
$('.events').addClass('search-active');
});
if ($('.events').hasClass('search-active')) {
return;
} else {
$(this).closest('.dropdown-menu').hide(); $(this).removeClass('open');
}
});
Here is a codepen so you can see the rest of my code: http://codepen.io/webinsation/pen/bfDsB
I have tried several different ways to solve this using jquery’s is(':focus') selector with no results.
I appreciate any help or ideas you may have.
Thanks,
– Caleb
You can use :focus to find if the search box has focus in the second hover function, without any need to give things additional events. .size() will return 1 if it has focus and 0 otherwise, and then the ! casts those to true and false, respectively, before negating. Then in the first hover function, check to make sure there are no currently open menus before opening.
$('ul.nav li.dropdown').hover(function() {
if (!$(".dropdown-menu:visible").size()) {
$(this).closest('.dropdown-menu').show(); $(this).addClass('open');
}
},
function() {
if (!$(".navbar-search input:focus").size()) {
$(this).closest('.dropdown-menu').hide(); $(this).removeClass('open');
}
});
CodePen demo
I'll have my try.
I've used the hover() function and it's callback.
function () {
if (!$("#search-query").is(':focus')){
$(this).removeClass('open');
} else if ( !$( '.events' ).is( ':hover' ) ) {
$("#search-query").blur();
$('.dropdown-menu').hide();
}
});
on hover it's pretty much the same, You can set it back to closest as it was before.
On the callback (no hover) I check if not the .events gets hovered (so it'll show each of the other menu items drop down menus and also hiding the .events menu when hover removed. (you can set it to click if you want).
Here is a Fiddle, Hope it assists.
So I am trying to create a drop down menu using .hover() and .toggle(). While Have managed to get the menu to appear when the user rolls over the link, it disappears when the user moves off the link to select an item from the menu. Is there a method or technique for keeping the menu toggled even when the user isn't still hovering over the link?
Here is the JS:
<script type="text/javascript">
$(document).ready(function() {
$("#menu_link").hover(function () {
$("#the_menu").toggle();
});
});
</script>
Put the menu element inside the link.
The solution can vary greatly depending on the HTML markup you're using. But a general solution to these kinds of things is to let the body element detect "mouseenters" and detect which element the event originated from. If it's not either #menu_link or #the_menu, then hide the menu.
$("body").mouseenter(function (e) {
var eventParents = $(e.target()).parents();
if (eventParents.index($("#menu_link")) == -1 &&
eventParents.index($("#the_menu")) == -1) {
$("#the_menu").hide();
}
});
$("#menu_link").mouseenter(function () {
$("#the_menu").show();
});
This gives you flexibility in, for example, placing the menu link in a different container div to the menu itself.