I am trying to create a drop down list. I have it working but not fully, using this code:
$(document).ready(function(){
$("#zone-bar li em").hover(function() {
var hidden = $(this).parents("li").children("ul").is(":hidden");
$("#zone-bar>ul>li>ul").hide()
$("#zone-bar>ul>li>a").removeClass();
if (hidden) {
$(this).parents("li").children("ul").toggle()
.parents("li").children("a").addClass("zoneCur");
}
});
});
I managed to make it work so on hover the drop down list will appear, but when you move to select one of the items from the drop down list the drop down list closes. How do I fix that?
It works if I put it to onclick but then you have to click the arrow to close it again. You can see a live example at http://doctorwhohd.com (currently using onclick)
It is likely behaving this way because hover() is intended to take 2 functions. One for mouseenter and one for mouseleave.
When you give it only one, I think it fires the one for both events.
Instead of hover(), use mouseenter().
$("#zone-bar li em").mouseenter(function() {
var hidden = $(this).parents("li").children("ul").is(":hidden");
$("#zone-bar>ul>li>ul").hide()
$("#zone-bar>ul>li>a").removeClass();
if (hidden) {
$(this).parents("li").children("ul").toggle()
.parents("li").children("a").addClass("zoneCur");
}
});
Try putting the hover on
#zone-bar li
and not on the em
Update, yes, you would need to modify the script:
$("#zone-bar li").hover(function() {
var hidden = $(this).children("ul").is(":hidden");
$("#zone-bar>ul>li>ul").hide()
$("#zone-bar>ul>li>a").removeClass();
if (hidden) {
$(this).children("ul").toggle()
.children("a").addClass("zoneCur");
}
});
However, the suggestion of using mouseenter is probably superior, it seems that this causes momentary flicker.
You might want to consider doing this with pure CSS, there is no obvious reason to employ jquery to create this effect.
#zone-bar li{ height:1em; overflow:hidden};
#zone-bar li:hover{ height:auto};
Related
i use jquery, bootstrap, fa, normalize and jquery.multilevelpushmenu.js v2.1.4 that provide side-menu multi level, i'm tring to combined hover operation with that menu, and the hover call just after first toggle menu, never seen this behavior before.
<script>
$(document).ready(function () {
$('.content gallery-item').hover(function () {
$(this).find('.content img-title').fadeIn(300);
}, function () {
$(this).find('.content .img-title').fadeOut(0);
});
});
</script>
Here what i have tried:
isolate to minimum script / JS-libs
tried to call to dest hover tag with more specific css selector
This is the JSFiddle of the complete scenario.
How can i make it work onload?
CSS way to fix the issue is to give the element a lower z-index. As the menu container is overlapping it that's why it is unable to target the element properly.
This code should fix it.
.multilevelpushmenu_wrapper{
min-width: auto;
}
I'm working on a pricing table with some hover.
You can see it right here: http://lhit.nl/lucid/
As you see, when you hover on a pricing table all the divs toggle the classes.
And thats not what I want. I want it to be seprate ofcourse.
My jQuery:
$('.package').hover(function(){
$('.name').toggleClass('name-hover')
$('.price-container').toggleClass('price-hover')
$('.price').toggleClass('white-hover')
$('.month').toggleClass('white-hover')
});
The css is just to overwrite current colors:
.package .price-hover {
background: #008ed6;
}
.package .white-hover {
color: #fff;
}
I already tried to use $(this) but it doesn't work.
$('.package').hover(function(){
$(this).find('.name').toggleClass('name-hover')
$(this).find('.price-container').toggleClass('price-hover')
$(this).find('.price').toggleClass('white-hover')
$(this).find('.month').toggleClass('white-hover')
});
This can be simply achieved just by css. Why to add Js for this ?
package:hover .price-container{
background: #008ed6;
}
You could use each():
$('package').each(function() {
var _this = this;
$(this).hover(function() {
$(_this).find('.name').toggleClass('name-hover')
$(_this).find('.price-container').toggleClass('price-hover')
$(_this).find('.price').toggleClass('white-hover')
$(_this).find('.month').toggleClass('white-hover')
});
})
First you need to use find to only change the classes for elements
inside the currently hovered over .package, otherwise it will
change classes for all these elements.
Secondly, hover event takes
2 functions, one when mouse enters the hover area, second when cursor
exits the hover area. The way you are handling hover event, it toggles the classes twice, once on hover in, once on hover out, so in the end leaving it same as before.
Try this code:
$('.package').hover(function(){
$(this).find('.name').addClass('name-hover');
$(this).find('.price-container').addClass('price-hover');
$(this).find('.price').addClass('white-hover');
$(this).find('.month').addClass('white-hover');
}, function(){
$(this).find('.name').removeClass('name-hover');
$(this).find('.price-container').removeClass('price-hover');
$(this).find('.price').removeClass('white-hover');
$(this).find('.month').removeClass('white-hover');
});
$(".package").hover(function() {
$this = $(this);
$this.find(".name").toggleClass("name-hover");
$this.find(".price-container").toggleClass("price-hover");
$this.find(".price,.month").toggleClass("white-hover");
});
#Spartak Lalaj As of jQuery 1.4 the .hover() may have one parameter. See https://api.jquery.com/hover/
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);
});
});
Ok... So I have this drop down menu working as I'd like... however I'm trying to figure out how to revert the function back to it's original state after a menu item is clicked.
So first when you trigger the function it does & works great the following:
It swaps out .menu_hide and .lockscreen for .menu_show and .lockscreen_on.
// show and hide mobile menu
$('#triggerMobileMenu').click(function(e) {
e.preventDefault();
// Toggle all 4 classes off or on
$('#mobileMenu').toggleClass('menu_hide menu_show');
$('#mobileScreen').toggleClass('lockscreen_off lockscreen_on');
But now I'm trying to add another piece that says once a menu item is clicked, close the menu and swap the classes back to their original state from .menu_show and .lockscreen_on, to .menu_hide and .lockscreen_off.
$('#mobileMenu ul li a').on('click',function(){
$('#mobileMenu').toggleClass('menu_show menu_hide')({ autoCloseOnClick: true });
$('#mobileScreen').toggleClass('lockscreen_on lockscreen_off')({ autoCloseOnClick: true });
});
});
I should also note that on the same page a scroll to id# may be happening vs just simply taking you to the new url/page. Either case will happen though.
I think that you're making this too complicated. Use the same event handler for both a#triggerMobileMenu and ul#mobileMenu li a since you're having them do the same thing (toggle the visibility of the menu and another element).
$('a#triggerMobileMenu, ul#mobileMenu li a').on('click', function(evt){
evt.preventDefault();
$('#mobileMenu').toggleClass('menu_hide menu_show');
$('#mobileScreen').toggleClass('lockscreen_off lockscreen_on');
});
If you need to know which element was clicked in the event handler, evt.target is available:
if( $(evt.target).is($('a#triggerMobileMenu')) ) {
// do stuff
}
See http://jsfiddle.net/Mph6t/3/
I think it is working as intended. I had to fix some id names that may have been switched in the translation to jsfiddle. Here's a working one as far as I can tell. This leaves the somename2 div still showing. I assume that is going to be blank and just for locking the screen right?
I also changed the link to a new tab for testing purposes. FYI.
Relevant changes are:
$('#somename1 ul li a').on('click',function(){
$('#somename1').toggleClass('menu_show menu_hide')({ autoCloseOnClick: true });
$('#somename2').toggleClass('lockscreen_on lockscreen_off')({ autoCloseOnClick: true });
});
OK, so. I'm trying to create a dropdown menu of sorts using fadeToggle().
http://westrock.juggernautwebsites.com/ is where the site is currently located.
As you can see, when a user selects 'Properties', the fadeToggle occurs. However, after the dropdown occurs, and a user wants to select a li from the properties dropdown, they are unable to (I know I have return false; set, but that was supposed to be for the original ul, no?)
As well, when the child items are displaying, if you hover over About, the :hover effect displays on the Properties child li.
I'm boggled. Any help, greatly appreciated.
$('#menu-item-13').click(function() {
$(this).children('ul').fadeToggle({
duration: 200
});
return false;
});
*EDIT
I feel like I need to restrict the css and jQuery from affecting children list-items and a, but I don't know how to do this. I thought children only went one level down the DOM, and since I selected 'ul', the function wouldn't affect list-items...
Your example doesn't work at all for me, but if I'm understanding you correctly, you want the child ul to not be affected by the click handler attached to the parent. You can do this:
$('#menu-item-13 > ul').click(function(e){
e.stopPropagation();
// ... do your thing
});
This basically stops the click on the ul from bubbling up to the parent #menu-item-13. Because of this, the fadeToggle will also not trigger from the click on the ul, so if that is still needed you will have to add it to the ul's click.
Thanks for everyone's help! Here's what I eventually ended up using.
$('#primary li').hover(function() {
$(this).children('ul').fadeToggle({
duration: 200
});
});
$('menu-item-54').click(function() {
return false;
});
What I was trying to accomplish upon hover (or click), the subnav would expand open.