jQuery of menu is not loading after clicking outside the menu - javascript

I am using Bootstrap dropdown menu. See the below code:
$(document).ready(function(){
$("#a-primary-occasion").mouseover(function(){
$(".dropdown-menu_occasion").css("display", "block");
});
$('#submenu-birthday_occasion').mouseover();
});
This script is in main menu's phtml file which works fine when the page is loaded. But after clicking outside menu (on other content of the page.) it doesn't fire the mouseover() event.
You can check it here: http://jshri.com
After loading the page just hover on the first menu (Occasion). It will open the submenu of "Birthday Gifts".
click on anywhere outside the menu (e.g above "Occasion" menu)
hover on Occasion menu it won't open the first menu. Also hovering on the first submenu (i.e. Birthday Gifts) won't it. But after hovering on the second submenu (i.e. Anniversary Gifts) will open the submenu also the hover even for the first submenu will work fine afterwards.
Note: If I add an alert in document.ready() it fires every time.
I am not sure why is this happening. Does anyone have any idea? How can I solve this?


I found it myself!
As I said I am using Bootstrap menu, by default menu was opening on click events. Which I changed to hover event. But I didn't remove the jQuery which was hiding the current opened menu on document.click event. This is the code I commented:
$(document).click(function() {
// Simply hide the submenu on any click. Again, this is just a hacked
// together menu/submenu structure to show the use of jQuery-menu-aim.
$(".popover_relation").css("display", "none");
$("a.maintainHover_relation").removeClass("maintainHover_relation");
});

Related

Mouseout event in jQuery is triggered when my tooltip is hovered

I have this menu that adds a
It has this jQuery code to add a class on hover and remove on mouse-out like this below...
$(document).ready(function(){
$('.actions-menu').hover(function(){
$(this).addClass('active');
$(this).find('.actions-list').show();
}, function(){
$(this).removeClass('active');
$(this).find('.actions-list').hide();
});
});
The problem is in this image below, when a button icon in the popover menu is hovered over, it shows a tooltip. When you hover this tooltip it triggers the mouseout in my code above and closes the menu.
I need the menu to stay open if a tool tip with CSS CLass .hastip is hovered as well.
How can I do this?

All you need is nested .actions-list inside .actions-menu (if it possible).
example: http://codepen.io/anon/pen/bBPLNK

jquery - stop bootstrap dropdown from closing without stopping other events

I have a few dropdown menus that have buttons that produce popovers on click. When you click on the button it closes the whole dropdown menu and hides the popover, however clicking again on the button to open the dropdown shows that the popover is still open.
I have a semi-function solution that I found here:
Prevent Bootstrap dropdown from closing on clicks, to implement:
$('.dropdown li').click(function(e) {
e.stopPropagation();
});
but then that stops confirm boxes from appearing.
Is there a way I can 'resume propagation' on the elements that need a confirm dialog to appear?

Disable Bootstrap nav item click event

I'm using Bootstrap 3 nav as something like "collapsible div" only which holds multiple level menu. but I have an issue with the nav items or its hyperlinks click event and want to disable it so my menu works the way I want.
For sure I've assigned my custom events to the nav items which open the second level but for some reason that doesn't work fine on mobiles.
I even tried javascript:void() for the hyperlinks but I think the click event of bootstrap is assigned to the <li>

Use the following to prevent the default link behavior.
$( "a" ).click(function(e) { // target any selector
e.preventDefault();
});

hide an element when click any other place(outside the element) on the page

I am working on a popup menu in my web page. currently, I can successfully display the menu. What I want to do is hiding the menu when I click outside of the menu. I know one way to do this is bind the click event to the document:
$(document).on('click', function(event) {
// here I can hide the menu
});
but I don't want to do that way, because binding an click event to the document looks very ugly and make the code difficult to maintain.
many many thanks.:)

You can wrap your popup menu like this:
<div class="overlay">
<div class="popup">...</div>
<div>
And then
$(".overlay").click(function(){
// hide your popup
})
It would be good to make the overlay position:fixed

dropdown javascript menus

I am trying to create a dropdown javascript menu with jquery. I am using hide() and show(). I made it so that when you click on a menu item it shows but I cannot figure out how to make it so that when you click on anything other than the menu it will hide. I have seen it done on multiple sites before. How do you do it?

The gist of it:
// variable menu is your jquery menu ref.
var outsideMenu= function(){
menu.hide();
// clean up listener
$(document).unbind('click', outsideMenu);
}
$(menu).mouseout(function(){
// cursor is off the menu so attach listener
$(document).click(outsideMenu);
}).mouseover(function(){
// back to menu, so remove listener
$(document).unbind('click', outsideMenu);
});
I assume you can take it from there ;)

This may be what you're looking for.

Categories