Dropdown bouncing issue - javascript

I have a Wordpress site where I am trying to add a jQuery menu with sub-menus.
Here's the jQuery:
$(document).ready(function(){
$('.menu > li').hover(function(){
var position = $(this).position();
$('.sub-menu', this).css('margin-left', position.left);
$('.sub-menu', this).slideToggle('slow');
});
});
I have it set up on JSFiddle as well: http://jsfiddle.net/K96mB/
The problem is that if you hover over a link, the sub-menu slides in and out again and again, creating a "bounce effect". I've been trying to get rid of this, but can't figure out how to.
Also, is it possible to never have two dropdowns open at the same time?
Thanks for all help.

To solve the "bouncing" issue:
$('.sub-menu', this).stop().slideToggle('slow');
http://jsfiddle.net/DerekL/K96mB/1/
And about your saying that you don't want to two dropdowns open at the same time, it is possible to do but I don't think you want that because the second menu will have to wait for the first one to close then open (lag).

this works without bouncing effect:
$(document).ready(function(){
$('.menu > li').mouseenter(function(e){
var position = $(this).position();
$('.sub-menu', this).css('margin-left', position.left);
$('.sub-menu', this).slideToggle('slow')
});
});
I'm using mouseenter instead of hover
Also, is it possible to never have two dropdowns open at the same time?
yes, add this code:
$('li').mouseleave(function(e){
$('.sub-menu').hide()
});

You can achieve this using mouseenter and mouseleave. See this jsfiddle (update of yours).
Relevant parts:
$('.menu > li').mouseenter(function(){
....
});
$('.sub-menu').mouseleave(function(){
....
});

Related

How to initialize jQuery slide out with href link?

I have zero experience in jQuery or js but I am trying to learn, so any help is much appreciated. I have a jQuery slide out (for live chat) that I would like to have slide out once a link is clicked. Ideally
Click Here
And this will make the chat slide out. The only code that is in the HTML is the onload
<body onload="initializeLiveHelp();">
You can see how it works here Link Fixed
If you need the jQuery I can get that as well but I was not sure if that was needed or not. Thank You
Try it by toggling the width. So write CSS for the closed state and use this jquery snippet to open it
Toggle width with jQuery
Add an ID to your link so
Click Here
becomes
Click Here
And the jquery something like this (but not exactly). Reference the SO thread for more info and check out the fiddle. Or post more HTML here and I can help further.
$(document).ready( function(){
$('#mylink').click( function() {
var toggleWidth = $("#toggle").width() == 300 ? "200px" : "300px";
$('#toggle').animate({ width: toggleWidth });
});
});
Trigger a click when someone clicks a link:
$("li a").on("click", function(event) {
event.preventDefault();
$(".livehelpslideout a").trigger("click");
}
Preventdefault() disables default behaviour when clicking on a link, otherwise browser will load another page. Your desired behaviour for that is unclear, so you'll need to think about your logic.

Hide jquery menu after click function does not works

I have a CSS dropdown menu that is functioning how I want it to except for one part, clicking on one of the submenu items does not close the submenu.
Most people probably don't care about this because each link will take them to a new page, but mine just stays on the same page and calls a javascript function.
Using jquery, I am unable to hide the submenus on click like so:
$('.sub li').click(function(){
$('.sub ul').hide();
});
OK, what you need to do is to hide it, but then remove the hard coded styling from the element as this will prevent the hover working:
$('.sub li').click(function(){
$('.sub').hide();
setTimeout(function(){ // breathing space
$('.sub').prop('style', '');
}, 10);
});
Here's a working version fiddle
The class .autoclose is applied to a <ul> not a <li> so correct the assign class on the html and should work

Fading a content when hover a menu <li> issues

I'm with a problem, and I need your help.
So, I'm trying to make a menu that show the content when you do a mouse hover in a li tag. And the first content need to be always showing when you do a mouse over on the first li option, or when no one li is hovered.
I tried to make this, and you can see a demo here: https://jsfiddle.net/sqftzuja/
As you can see, it's isn't work so fine and some times it show more than one content.
My script
$(document).ready(function() {
$("#nav3 li:first-child").addClass("tab-active");
$('#nav3 li').click(function() {
var section4 = $(this).attr('data-id');
$("#nav3 li").removeClass("tab-active");
$(this).addClass("tab-active");
$('.tv-corporativa').hide();
$(section4).fadeIn(800);
});
});
If anyone can help me improve it it will help me a lot!
Thanks in advance!
jquery hover takes two arguments, one is for the pointer entering the element and the other is for when it leaves the element.
e.g.
$('selector').hover(one_function, two_function)
you can either use hover and call the second function or use the onmouseover event.
here's the fiddle for onmouseover https://jsfiddle.net/sqftzuja/1/
You code is correct. You just need to stop the running animation.
$(section4).stop( true, true ).fadeIn(800);
This will solve you problem in the old code.
you must stop fade in animation.when you fade in it effects after given interval.i updated fiddle as well
$(document).ready(function() {
$("#nav3 li:first-child").addClass("tab-active");
$('#nav3 li').hover(function() {
//console.info( $(this).attr('href') );
var section4 = $(this).attr('data-id');
$("#nav3 li").removeClass("tab-active");
$(this).addClass("tab-active");
$('.tv-corporativa').stop().hide();
$(section4).fadeIn(800);
});
});

show and hide div using jquery, same as mashable.com website

http://mashable.com/
I have this script:
$(document).ready(function(){
$(".show_hide5").mouseover(function(){
$('.selected').removeClass('selected');
$(this).next().fadeIn("slow").addClass('selected');
$(".slidingDiv5").not('.selected').fadeOut("slow");
});
$('.selected').removeClass('selected');
$(this).next().fadeIn("slow").addClass('selected');
$(".slidingDiv5").not('.selected').fadeOut("slow");
});
and this script is working well so far, but it's still missing something, for now it's show the div on mouseover on the arrow as you can see on mashable website but the share area don't hide on mouseout only it's hide once you put the mouse on another arrow.
all i need is to hide the share area on mouseout.
thanks in advance.
If I understand well, you want to fade out .slidingDiv5 on mouseleave event:
$(document).ready(function(){
$(".show_hide5").mouseover(function(){
$('.selected').removeClass('selected');
$(this).next().fadeIn("slow").addClass('selected');
$(".slidingDiv5").not('.selected').fadeOut("slow");
});
$(".show_hide5").mouseleave(function(){
$(".slidingDiv5").fadeOut("slow");
});
});

jquery menu, hover and display:none

I have this menu http://jsbin.com/useqa4/3
The hover I think works correct, but what I want is the normal: when the user's cursor isn't on the "Solution" item or on the submenu then I want the div #submenuSolutions to return in "display:none".
How can I achieve this?
If you read the jQuery api more carefuly you will see that the hover function can take handle two events http://api.jquery.com/hover/
$("document").ready(function() {
$("#menuSolutions a").hover(function () {
$("#menuSolutions").addClass("menuHover");
$("#submenuSolutions").show("3000");
},function() {
$("#menuSolutions").removeClass("menuHover");
$("#submenuSolutions").hide("3000")});
});​
This will work only if your menu is a suckerfish menu.
See Demo
Just added this code to hide it back when mouse leaves it:
$("#submenuSolutions").mouseleave(function(){
$(this).hide();
});
Since submenuSolutions is the id of your panel, you can use the mouseleave event which triggers when mouse leaves the area of element specified.

Categories