Introduction:
Hello everyone. I am trying to do a menu, but i have problem with mouseenter/mouseleave events.
What i have so far:
$("#icon").click(function() {
$("#invis").css("display", "block");
$("#icon").bind("mouseleave", function(){
$("#invis").css('display', "none");
}).bind("mouseenter", function(){
$("#invis").css('display', "block");
});
$("#invis").bind("mouseleave", function(){
$("#invis").css('display', "none");
}).bind("mouseenter", function(){
$("#invis").css('display', "block");
});
});
So far, i tried this. My point is to click on the "icon", and this click would show a menu/another, hidden element. Now i want to keep it open as long, as someone keeps mouse over "icon" or actual menu. But with code i provided, once i leave my mouse and then enter again on "icon", it still keeps onmouseenter event, and menu will appear again. I know i could unbind onmouseenter event, but then once i drive off menu, onto icon, my menu would get closed, and i don't want that.
Simplest example i could think of: http://jsfiddle.net/tzzqM/5/
Question
How to make "menu" open on click event, and then keep it open as long as someone keeps mouse over menu or "icon" (both of them). Once mouse leaves area of both, menu closes, and to open it i need to click once more on "icon".
Is there a another way to do this?
On mouse leaving the object, check if the mouse is still either on the menu or on the menu-button, if not, hide the menu. Basically, you're binding the event mouseleave to both elements and then checking the length of the selection. If it's 1, you're either on the menu or the button, this makes the exiting the menu button into the menu itself, not trigger the "hidding" part of the code, if the selection length is 0, then we are not over any of those elements and we hide it.
$("#icon").click(function() {
$("#invis").css("display", "block");
$("#invis,#icon").bind("mouseleave", function(){
if($("#invis:hover,#icon:hover").length === 0){
$("#invis").css('display', "none");
}
})
});
There's a fiddle here.
Or the way I would write it if I had to start from scratch (just the jQuery part), since remember that you'd be jumping into the DOM pool less times and should be a little bit more efficient, although it's as functional as the first one. Here's the fiddle
var icon = $("#icon"),
menu = $("#invis");
icon.click(function() {
menu.show();
$.merge(icon,menu).bind("mouseleave", function(){
if($("#icon:hover,#invis:hover").length < 1) menu.hide();
});
});
Or using the suggestion from jhummel we can access the id of the new view that has the hover, and check if it's one of the two that we want to monitor. This is great because it prevents us from jumping into the pool once more, this gives us a marginal performance boost, here's the fiddle.
var icon = $("#icon"),
menu = $("#invis");
icon.click(function() {
menu.show();
$.merge(icon,menu).bind("mouseleave", function(e){
if($.inArray(e.relatedTarget.id, ["icon","invis"]) === -1){
menu.hide();
}
});
});
Related docs:
jQuery.merge
Stop jumping into the pool!
jQuery.inArray
event.relatedTarget
When you use mouseover or mouseleave events, the event object in jQuery will have a relatedTarget property. You can check that property to see if the mouse is entering the other element.
$("#icon").on('click',function() {
$("#invis").show();
}).on('mouseleave', function(e) {
if(e.relatedTarget.id != 'invis') $('#invis').hide();
});
$('#invis').on('mouseleave', function(e) {
if(e.relatedTarget.id != 'icon') $(this).hide();
});
jquery relatedTarget docs
Related
i got to show a dropdown menu, now i would like to hide that when anoher element (not dropdown or dropdown's children) in the DOM is focused.
(hide dropdpown when element !== dropdown||dropdown's childrens is focused in the DOM)
i tryed with focusout() with no results:
$('a').on('click',function(){
$('.drop.user-menu').fadeIn();
});
$('.drop.user-menu').on('focusout',function(){
$(this).fadeOut();
alert('antani');
});
any idea?
jsfiddle here : example
event.target() will be useful in this scenario:
$('.drop.user-menu').on('focusout',function(e){
if(e.target !== this){
$(this).fadeOut();
alert('antani');
}
});
Update:
Check this out and see if helps:
$('.a').on('click', function (e) {
e.stopPropagation();
$('.drop.user-menu').fadeToggle();
});
$('.drop.user-menu').on('click', function (e) {
e.stopPropagation();
$('.drop.user-menu').fadeIn();
});
$(document).on('click', function (e) {
if (e.target !== $('.drop.user-menu') && e.target !== $('.a')) {
$('.drop.user-menu').fadeOut();
}
});
The above script done with click in this fiddle
A DIV cannot take or lose focus (unless it has a tabindex). You'll have to give it a tabindex or add a focusable element into your div.drop.user-menu. See Which HTML elements can receive focus?.
You then also have to explicitly give that element (or an element within it) focus (with .focus()) as simply fading it in doesn't give it focus.
When the element blurs, then check if the new active element is still part of the menu. If it's not, fade out the menu.
See a working example.
There is no focus or focusout events triggered, because you're not operating on form fields.
This is probably what you want : How do I detect a click outside an element?
var menu = $('.drop.user-menu');
menu.on('click',function(e){
e.stopPropagation(); // stop clicks on menu from bubbling to document
});
$('a').on('click', function (e) {
menu.fadeIn();
e.stopPropagation(); // stop clicks on <a> from bubbling to document
});
$(document).on('click',function(e){
// any other click
if (menu.is(":visible")) {
menu.fadeOut();
}
});
http://jsfiddle.net/BBxEN/10/
Update
As Derek points out, this is not very friendly for keyboard users. Consider implementing a way for users to both open and close the menu using keyboard shortcuts.
You can tru with blur, is what you want?
Try this:
$('.drop.user-menu').on('blur',function(){
$(this).fadeOut();
alert('antani');
});
I've created a mobile dropdown menu for a responsive website, that essentially shows a hidden unordered list when you click on a certain element. It works great, except for the fact that I can't get the blur() function to work, so that when a user clicks anywhere on the page other than inside the menu, it hides the menu. Here's a codepen: http://codepen.io/trevanhetzel/pen/wIrkH
My javascript looks like so:
$(function() {
var pull = $('#pull');
menu = $('header ul');
$(pull).on('click', function(e) {
e.preventDefault();
$('.close-menu').toggle();
$('.mobi-nav span').toggle();
menu.slideToggle(250);
});
$(menu).blur(function() {
$(this).slideToggle();
});
});
I've struggled with blur() in the past, so would really like to figure out once and for all how exactly it works, and whether or not I'm using it in the right context here. Thanks!
You have to watch for clicks yourself. And use $.contains to see if the clicked thing is within your menu:
$(document).click(function (ev) {
if (ev.target !== menu.get(0) && !$.contains(menu.get(0), ev.target)) {
menu.slideUp();
}
});
Just be sure to call ev.stopPropagation() in your toggle click handler to prevent the handler above from immediately closing the menu when the event bubbles up.
I have a script here that if i click on it drops down, as well on if i clickoutside it drops down. But i want to make it so that if i click on bottom it scrolls up. For some reason it doesnt work here. It only scrolls up if i click outside the box.
Heres an example. http://jsfiddle.net/w8mfx/
If i click on bottom it wont scroll up only if i click on outside. But i want it to work both ways.
$(document).ready(function() {
$('#bottom').click(function(event) {
event.stopPropagation();
$('#content').slideDown();
});
$('html').click(function(e) {
//alert(1);
if (e.target.id != 'bottom') {
$('#content').slideUp();
}
});
});
http://jsfiddle.net/w8mfx/7/
I added:
$('#content').click(function (event) {
event.stopPropagation();
});
so the user can click on the #content element and not trigger the slide function. That also means that the event handler for the html element can be simpler:
$('html').click(function(e) {
$('#content').slideUp();
});
In the jsfiddle you may notice I cached the $('#content') selector in a variable since it was being used in more than one place.
Use slideToggle(). http://jsfiddle.net/w8mfx/5/
I'm working on this site: http://dev.rjlacount.com/treinaAronson/index.php
My final to-do is to set the contact panel (which you can see if you click the top left "contact" button) to close if it's currently open and the user either clicks outside of the panel (in the "#content" area) or hits the esc key.
I figured the clicking in the #content area trigger would be the easier of the two, so I started with that. I've read a couple threads on triggering functions only if elements are visible, but what I've come up with so far isn't working at all:
$("#panel").is(":visible") {
$("#content").click(function(){
$("#panel").slideToggle("3000");
});
};
This breaks the functionality of the contact button, and I've tried several variations of this to no avail. Am I making any glaring errors here? Any advice would be greatly appreciated.
Thanks!
Bind Click and Keydown functions to the document and make sure the click function doesn't bubble up to the document when your panel or flip buttons are clicked. Like so:
$(document).bind({
keydown:function(e) {
if (e.keyCode == 27 ) {
$("#panel").slideUp("3000");
}
}, click: function(e) {
$("#panel").slideUp("3000");
}
});
$('#flip, #panel').bind('click', function(e){return false});
Why don't you add a class to the body of the page when the panel is opened and remove it when it's closed? That makes this much simpler:
$('.class #content').click(function(){
// Close the contact panel
});
Now, when the body has a class of 'class', any click on the #content div will automatically close contact.
Make sense? Great looking site, by the way.
$('#flip').bind('click', function(){
$(this).toggleClass('contactOpen');
$("#panel").slideToggle("3000");
});
$('#content').bind('click', function(){
if($('#flip').hasClass('contactOpen')){
$(this).toggleClass('contactOpen');
$("#panel").slideToggle("3000");
}
});
Here is a jquery drop down i am trying to make: http://jsfiddle.net/qYMq4/2/
Basically i just want a div to drop down when a user mouses over a link and stay down unless i mouse away from the link or over the dropped down div and then away from the div. So it is almost like a standard drop down menu that you see in alot of website navigation, but this just has a bit of animation so it doesn't appear instantly.
I'm finding it terribly difficult, as you can see it doesn't quite function correctly. Any adivce? Thanks for your input.
You can see a working demo of the following here.
I prefer mouseenter[DOCS] and mouseleaveDOCS in this situation as it behaves better when hovering over children. I restructured your HTML so that the hover is over the parent div of the link, so that when you hover over the gray area that slides down it's not considered a mouseleave as follows:
<div class="mask-layer">
<a class="top-link-cart" href="http://www.w3schools.com/">Test</a>
<div class="slidedown">div should close if user moves mouse away from test (but not to the gray area) or away from the gray area. The .mouseout function doesn't appear to work. </div>
</div>
I then restructured your Javascript to use .mask-layer for the hover events, and simplified the animation with slideUp[DOCS] and slideDown[DOCS] as follows:
$('.slidedown').hide();
$('div.mask-layer').mouseenter(function() { // enter animation
$('.slidedown').slideDown(600);
}).mouseleave(function() {
setTimeout(function() {
$('.slidedown').slideUp(600);
}, 200);
});
You can use the slideDown() and slideUp() methods - they're a littler easier to work with. You'll also want to use the windowSetTimeout. A lesser known feature is that it returns a number which will allow you to cancel the timeout. You can use that to keep the div open in the event the user scrolls down onto it. Some inspiration for this approach borrowed from here: http://javascript-array.com/scripts/jquery_simple_drop_down_menu/
$(document).ready(function() {
$('.slidedown').hide();
var timeout = 500;
var closetimer = 0;
$('a.top-link-cart, .slidedown').mouseover( function(){
cancel_timer();
$('.slidedown').slideDown(1000);
});
$('a.top-link-cart, .slidedown').mouseout( function(){
closetimer = window.setTimeout(function(){$('.slidedown').slideUp(1000)}, timeout);
});
function cancel_timer(){
if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;
}
}
});
http://jsfiddle.net/P567S/7/
if you are looking for a click action dropdown menu here it is
//toggle navbar on click.
$('//my link').click(function(event) {
event.stopPropagation();
$('//sub menu container').toggle();
});
//to close dropdown menu when clicked out it.
$(document).click(function() {
$('//sub menu container').hide();
});
hope it works for you..... !!