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.
Related
I've exhausted most of the options I found here on Stack... I've created a full width (horizontal) dropdown menu using Bootstrap 3. The nav contains multiple dropdowns within itself and they are activated (displayed) by the mouseenter event:
$('.dropdown').mouseenter(function(){
if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
if(!$(this).hasClass('open')) { // Keeps it open when hover it again
$('.dropdown-toggle', this).trigger('click');
}
}
});
I've tried disabling the "outside" click by using:
$('#myDropdown').on('hide.bs.dropdown', function () {
return false;
});
which works, however, it also disables the "mouseenter" event.... How can I resolve this issue? Any feedback would be great! Thanks!
you meant like this? http://codepen.io/saeedsalam/full/ZpgzQv/
i have added following code in addition with yours -
$(document).on('click','.dropdown.open a', function(){
$(this).parent().removeClass('open');
});
hope that helps!
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 am creating a menu with two dropdowns. I need the dropdowns to open when the menu item is hovered over, but close if the other menu item is hovered over.
The problem I am having is getting the first dropdown to close if I hover over the second menu item.
Please see my fiddle here: http://www.bootply.com/uEKWCdNj4C
I've looked through other questions, and this one seems to possibly be of use, but I'm having trouble applying it to my situation: Vertical Menu to stay open on hover then close when another is hovered
So I apologize if this is a duplicate...any help would be appreciated. Thanks!
You can call slideup on the open ul before calling slidedown on the current one. like below
$(document).ready(function () {
$(".nav-basic").hover(function () {
$('ul.menu-applied').slideUp('medium');
$('ul.menu-basic').slideDown('medium');
});
$('ul.menu-basic').bind('mouseleave', function(){
$('ul.menu-basic').slideUp('medium');
});
$(".nav-applied").hover(function () {
$('ul.menu-basic').slideUp('medium');
$('ul.menu-applied').slideDown('medium');
});
$('ul.menu-applied').bind('mouseleave', function(){
$('ul.menu-applied').slideUp('medium');
});
});
You just needed to update your script to call the slideUp function:
$(".nav-basic").hover(function () {
$('ul.menu-basic').slideDown('medium');
$('ul.menu-applied').slideUp('medium');
});
$(".nav-applied").hover(function () {
$('ul.menu-basic').slideUp('medium');
$('ul.menu-applied').slideDown('medium');
});
Your code could use some optimization, but you could basically call slideUp() on all other $(.menu-interior') elements that are not of the target class:
Example: $('.menu-interior:not(.menu-basic)').slideUp();
See forked fiddle here: http://www.bootply.com/DZxktgUtjh
Note: This will close ANY other open menu, rather than having to hard-code all other classes when the menu grows.
So set an class="isHovered" on the element that is hovered.
Set the boxes class="isHovered" aswell ..
If hover is called again , or lets say mouseenter, you check if isHovered is set on the current box and on the other box ... or iterate over any boxes there might be ...
You could aswell store the currently hovered element id in a variable and the box id. Then use these values. As JS is not multithreaded you can rely on the order of execution ...
$(document).ready(function() {
$(".nav-basic").hover(function() {
$('ul.menu-basic').slideToggle('medium');
});
$(".nav-applied").hover(function() {
$('ul.menu-applied').slideToggle('medium');
});
});
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.
I've looked around and researched why this isn't working, but it seems that I am in a sort of different situation.
I have a default action for a navigation item that handles the navigation animation on hover:
$('.logoCont').hover(function(){
someFunction()...
}, function (){
someFunctionReverse()...
});
Now, when it comes to being on the mobile screen, I hide the navigation and place a button there. The button then controls the animation of the menu sliding out from the side. I've added a line of code that adds a class to the navigation elements when this button is clicked.
$('.mobile-menuButton').click(function(){ //When you click the menu-show button
if($(this).hasClass('menuClosed')){ //Check to see if the menu is closed
$('.nav_hover').addClass('mobile_open'); //Add the mobile_open class to the navigation items
} else {
$('.nav_hover').removeClass('mobile_open'); //remove it
}
});
So then I changed the first hover function to say:
$('.nav_hover').not('.mobile_open').hover(function(){
someFunction()...
}, function (){
someFunctionReverse()...
});
I was hoping this would stop the someFunction() from happening when the mobile menu is out.
You can view what I'm doing HERE - When you reduce the screen to under 540px the media query will take effect and you can click on the menu button.
Documentation on .not() HERE. The second example at the end of the page is exactly what I was hoping for.
The class is added later and the event handler is attached to any and all elements that match the selector at pageload (or whenever it is executed) and doesn't really care about what you add later.
You have to check for the class inside the event handler
$('.nav_hover').hover(function(){
if ( !$(this).hasClass('mobile_open') ) {
someFunction()...
}
}, function (){
if ( !$(this).hasClass('mobile_open') ) {
someFunctionReverse()...
}
});
delegation could also work, but it wouldn't really work with not() or hover()
$(document).on({
mouseenter: function() {
someFunction()...
},
mouseleave: function() {
someFunctionReverse()...
}
}, '.nav_hover:not(.mobile_open)');