JSFiddle Demo
I'm wanting to add two right-click hijack menus on my page and I have one somewhat working above.
Alike it does upon clicking inside of .square, I would like this menu to hide on body click regardless of right or left click.
How can I hide this menu on body click?
Try below code.
jQuery(document).click(function(event) {
if (jQuery(event.target).closest('.square').length === 0) {
//hide your menu here
jQuery('.custom-menu').hide();
}
});
For right click add below code.
jQuery(document).on("contextmenu",function(e){
if (jQuery(event.target).closest('.square').length === 0) {
$('.custom-menu').hide();
}
});
Related
I have a jquery dropdown menu and an modal window which is a trigger for ajax. The problem occurs when you click on link for ajax, and when you close it dropdowns are not working anymore. So dropdown is working when you dont click the ajax. When you click the link and close it, dropdown menu is not showing dropdown.
Try it and source code are here:
codepen.io/riogrande/pen/NxZLaQ
Step by step to reproduce:
Mouse over the right most "Lorem" and a drop down menu appears.
Exit the mouseover and click the link titled "Click here for ajax"
Click the "X" to exit the ajax popover
Step 1 no longer works.
You can use separate fadeIn and fadeOut functions instead of a single fadeToggle on hover and it will fix the issue:
$(".menu-dropdown").hover(
function(e) {
if ($(window).width() > 943) {
$(this).children("ul").stop(true,false).fadeIn(150);
e.preventDefault();
}
},
function(e) {
if ($(window).width() > 943) {
$(this).children("ul").stop(true,false).fadeOut(150);
e.preventDefault();
}
}
);
CodePen here.
Slicknav only closes if you click the menu button again.
so I did this bit of code to make it close when you click anywhere
$(document).ready(function() {
//close menu on lost focus
$('.slicknav_menu').focusout(function(event){
$('.menu').slicknav('close');
});
});
This works on desktop when I make my window small to test, but on phone i have to touch an image for it to close, not if i just click anywhere, its like it only registers a click if you touch an element.
Can i use somethign else instead of focusout?
I would use a normal click event on the body and check if what the user clicked was inside the slicknav_menu.
$('body').click(function(event) {
if(!$(event.target).closest('.slicknav_menu').length) {
$('.menu').slicknav('close');
}
});
fixed using
$(document).ready(function() {
$('#whole-page').click(function(event) {
$('.menu').slicknav('close');
});
});
I couldn't use body as the menu was in the body and the menu closed straight after opening it.
So I'm building a small "UberMenu" feature for my main menu, and it works almost as I want, except that I want the UberMenu container to hide if the mouse is not over either
1) the UberMenu button, or
2) the UberMenu container
Right now, if you hover over the UberMenu button, the container shows up, and if you enter the UberMenu container, and then proceed to hover over another menu item, it hides.
This is what I want, however if I hover the UberMenu button, and then immediately hover over another menu item, the container remains open.
I've tried over a dozen different snippets, but I haven't found a solution.
I guess I need some if / else statement added to the code?
Can someone give me some guidance here? Much appreciated! :-)
This is the code I used:
//When mouse hovers UberMenu button, Show Container
$(".uber-menu-test").hover(function(e) {
e.preventDefault(); //To prevent default anchor tag behaviour
e.stopPropagation(); //To prevent parent container click event from firing
$(".uber-menu-frame").show(800);
});
// If mouse hovers either the content area or the navbararea, hide UberMenu container again
$(".block-type-content, .navbararea").mouseenter(function() {
$(".uber-menu-frame").hide(800);
});
I found a solution on my own by adding a timer, I'm not sure how solid this piece of code is, but it does the trick as far as I can tell!
For anyone interested:
$(".uber-menu-test").hover(function(e) {
e.preventDefault(); //To prevent default anchor tag behaviour
e.stopPropagation(); //To prevent parent container click event from firing
$(".uber-menu-frame").show(800);
});
var myTimer = false;
$(".uber-menu-test ,.uber-menu-frame").hover(function(){
//mouse enter
clearTimeout(myTimer);
},function(){
//mouse leav
myTimer = setTimeout(function(){
$(".uber-menu-frame").fadeOut(800);
},100)
});
Hope it helps,
$(".uber-menu-test").mouseenter(function(){
$(".uber-menu-frame").show(800);
}).mouseleave(function(){
$(".uber-menu-frame").hide(800);
});
So far I have this drop-down menu. When I click on either "Menu", "Menu1" or "Menu2", the links under it will drop down.
The problem:
I need to display only one drop-down at a time, so that the user can switch between them.
I tried to apply css('overflow', 'hidden'); to the menu currently dropped down, but it won't work, since the overflow: visible !important; is applied to the .clicked class.
Please help, anything will be highly appreciated!
Try when you click on a element remove class clicked from all elements and add class clicked to the element that is clicked
$("#product-menu>ul>li").click(function () {
var hidden = $(this).find('.clicked');
$("#product-menu>ul>li").removeClass('clicked');
$(this).addClass('clicked');
$('.productSubmenu').width(menuWidth);
});
DEMO
UPDATE
If you want also on second click menu to be closed try checking if clicked item has already class clicked:
$("#product-menu>ul>li").click(function () {
var hidden = $(this).find('.clicked');
if ($(this).hasClass('clicked')) {
$(this).removeClass('clicked')
} else {
$("#product-menu>ul>li").removeClass('clicked');
$(this).addClass('clicked');
}
$('.productSubmenu').width(menuWidth);
});
DEMO2
You also might want to close the links
$("#product-menu>ul>li").click(function () {
var hidden = $(this).find('.clicked');
$("#product-menu>ul>li").removeClass('clicked');
$("#product-menu .productSubmenu2").hide(); // this one I added
$(this).addClass('clicked');
$('.productSubmenu').width(menuWidth);
});
Currently I have this: http://jsfiddle.net/TW2Le/95/
I want to be able to click the box to display the text, then click anywhere else to hide the text. One click = show, 2nd click anywhere else = hide. (This part works)
When it is not "clicked", it should show the text when I hover over, but it should not display the text on top of the old text when I hover it while it is clicked.
i am running into a problem, where it displays double the text when I hover over while it is clicked. I have no idea how to disable "hover" while it is under the show condition. It should not repeat the same texts.
http://jsfiddle.net/TW2Le/97/
Try this.
$('.wrap').removeClass('reveal');
$('.wrap').addClass('reveal');
I added these into your jquery so that when "show" is visible, hovering does nothing.
DEMO
JS
$(function() {
$(document).on('click', function(e) {
if ( $(e.target).closest('.wrap').length ) {
$('.show').slideToggle();
$('.noshow').slideToggle();
$(".here").addClass("hide");
}else{
$('.show').slideDown();
$('.noshow').slideUp();
$(".here").removeClass("hide");
}
});
});
Add new CSS rule
.wrap:hover .here.hide {
display:none;
}