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..... !!
Related
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 a tooltip that appears when you mouseover a link. I want the tooltip to stay if you hover over it (because there are links and such in it), or disappear if you mouse away from the link.
I tried a couple things, but haven't figured it out. This is my first time building anything serious with jQuery.
The stuff below is what is in the .hover() 'handlerOut' event.
if($(this.a).mouseout())
{
if ($('.tip_container').hover()) {
$('.tip_container').css('display', 'block');
$('.tip_container').mouseleave(function() {
$('.tip_container').remove(0);
});
} else if ($('.tip_container').hover() == false && $(this.a).mouseoff() == true)
{
$('.tip_container').remove(0);
}
}
>>"this.a" refers to the link<<
With this and the other things I've tried the tooltip doesn't disappear unless you mouse over the off of it. I also tried
else if (!$('.tip_container').hover() && $(this.a).mouseoff()) {
Is it possible to have multiple conditions?
The main idea of the code is that if you mouse off of the link "this.a" the tooltip will be removed by:
$('.tip_container').remove(0);
but if you mouse over the tooltip it will not be removed until you mouse off of the tooltip.
Do you have a fiddle or anything to demonstrate?
Maybe something like
$(this, '.tip_container').hover(function () {
$('.tip_container').show();
}, function () {
$('.tip_container').hide();
}
);
Basically bind both the link and the tooltip elements to the hover method, which hides/shows the tooltip element on mouseenter/mouseleave. The link Pointy posted in comments is a good place to start
After a good nights rest and ignoring it for a while I figured out a solution. This is what I put in the hover handlerOut event.
var timer;
timer = setTimeout(function() {
$('.tip_container').remove();
}, 500);
$( '.tip_container' ).hover(
function() {
clearTimeout(timer);
$('.tip_container').css('display', 'block');
}, function() {
$('.tip_container').remove();
}
);
On the hover out of the link it will wait before executing the remove and if the mouse hovers over the tooltip it will clear the timer and set the tooltip to block to keep it displayed then on that hover out of the tooltip it will be removed.
I'm not super proficient at this, but I have a navigation item where on hover, a div with a search form slides down. Currently, when you mouseover, then mouseout, the div stays open until you click the close button.
I'm trying to make it so that when you mouseout the div slides backup after a few seconds, unless the user is on the div or nav link still (i.e., they're filling out the search form).
Here's what I have so far:
$("#services_link").mouseover(function() {
$("#services_link").css('background-position','left -73px');
$("#vendors_dropdown").slideDown(function() {
setTimeout(HideMe, 4000);
});
});
function HideMe() {
$("#services_link").css('background-position','left 0');
$("#vendors_dropdown").slideUp();
}
That gets me as var as the div sliding down on hover of the link, and sliding up after 4 seconds (regardless of where the mouse cursor is). So I just need the div to stay open if the mouse cursor is on the link or div.
I've looked at 3 or 4 other similar questions (and answers) and none really quite do the trick. setTimeout (and clearTimeout) is kinda new to me, so please excuse the noob question. :)
Bind both mouseenter and mouseleave. You'll want to do the timeout on the mouseleave, but then reset it when/if the mouseenter happens again.
Try looking at just the selected answer here to see how to do what I'm talking about.
Something like this:
var timeout;
$("#services_link, #vendors_dropdown").mouseenter(function() {
window.clearTimeout(timeout);
$("#services_link").css('background-position','left -73px');
$("#vendors_dropdown").slideDown();
}).mouseleave(function(){
timeout = window.setTimeout(HideMe, 4000);
});
function HideMe() {
$("#services_link").css('background-position','left 0');
$("#vendors_dropdown").slideUp();
}
This question already has an answer here:
Alternative Jquery mouse event
(1 answer)
Closed 9 years ago.
Alright so the code below works fine if I click outside the #nav div. I was asking if it is possible to just move the mouse away from the #nav div to make it disappear. I don't want to 'click' to hide the div. Example
$(document).mouseup(function (e)
{
var container = $("#nav");
if (container.has(e.target).length === 0)
{
container.hide();
}
});
I tried the mouseenter and mouseleav, but they don't work. Example
Any help will be appreciated :)
Try this:
$(document).ready(function(){
$("#logo").mouseover(function() { $("#nav").fadeIn("slow"); });
$("#nav").mouseleave(function (e){
$(this).fadeOut("slow");
});
});
The margin between your nav div and logo div is causing a problem. When the user directs their mouse between those areas, and you've set a mouseout event strictly on the nav div, it causes the window to close. The solution is to add a small timeout to allow the user time to navigate through the menu before closing it. This will avoid other cases in which the user accidentally mouses to the edge of the navigation and is maybe a pixel or two outside of the div.
Here is the jQuery I used to solve this problem:
$('#nav').mouseover(function () {
clearTimeout($.data(this, 'mouseOutTimer'));
});
$('#nav').mouseout(function () {
clearTimeout($.data(this, 'mouseOutTimer'));
$.data(this, 'mouseOutTimer', setTimeout(function () {
$("#nav").hide();
}, 700));
});
http://jsfiddle.net/HyUEu/
you need a mouseleave on the Nav i have added it for you check the link below
$(document).ready(function(){
$("#logo").mouseenter(function() { $("#nav").fadeIn("slow"); });
});
$("#nav").mouseleave(function (e)
{
$("#nav").fadeOut('fast');
});
http://jsfiddle.net/sKpwV/6/
if you want to make a dropdown menu i sugget you take a look at the link here: http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ it does a dropdown with Pure CSS, so it will also work when the user don't have Javascript enabled.
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