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
Related
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");
});
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
I have a button that when clicked will popup a menu to the right of the button. This menu is a rather large UL of list items. The page that this menu is on contains lots of other elements.
Once the menu pops up, a user can click an option on the menu and the menu will disappear (menu.hide()).
However, it feels wierd not being able to get rid of the menu any other way. I like the idea of "if the user clicks on anything but the menu, the menu will hide." But i hate doing a "clickoutside" event that binds events to everything but the menu.
Another option is "mouseout" but "mouseout" always gets fired too early, because the mouse has to travel across the screen to get to the menu.
Any ideas on what event I can bind to the menu, so the user can get rid of it naturally, and at will? (not just when he clicks an option)
You can bind one event to the body when the menu is open. Use the click event to determine if the click occurred outside of the menu. If outside of the menu, hide the menu and remove the bind.
// binding function
closeMe = function(e) {
var $target = $(e.target);
// click is not inside the menu
if(!$target.hasClass('menu') && $target.parents('.menu').length !== 1) {
// hide menu
menu.hide();
// unbind events
$('body').unbind('mousedown.menuhide', closeMe);
}
};
// show menu
menu.show(function() {
// bind menu hide event
$('body').bind('mousedown.menuhide', closeMe);
});
Very easy, just use something like this
$('html').click(function() {
menu.close();
});
$('#menu').click(function(e){
e.stopPropagation();
// do stuff
// maybe some nice animation or w/e
menu.close();
});
How to make pop-up window with links to hover like a normal tooltip just a mouse could click on the links. How can this be done? mouseenter loses focus when navozhu on the link and the window closes
jQuery(document).ready(function(){
jQuery("span.mod_events_daylink_evn").live('mouseenter',function(){
jQuery("span#"+cone).append(jQuery("div#"+newdiv));
jQuery("div#"+newdiv).css("display","block");
});
jQuery("div.eeee").live('mouseout',function(){
jQuery("div.eeee").css("display","none");
});
});
try qtip
a jquery plugin
http://craigsworks.com/projects/qtip2/
update by thomas guettler: updated URL, qtip2 instead of qtip.
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.