hover trigger called just after multilevelpushmenu first toggle - javascript

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;
}

Related

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);
});
});

.on() jQuery click function won't work?

I'm trying to implement a simple click function into my jsfiddle but it isn't working.
Here is my javascript/jquery:
$(document).on("click", "#introPic", function () {
$("#introduction").addClass("hide")
$("#q1").removeClass("hide")
});
I don't understand because it works if i take the element in question (#introPic) out of the divs it is nested in and place it at the top of the document. This isn't a solution because it ruins all the html/css formatting.
Does .on()only work for un-nested IDs?
Here is the jsfiddle - http://jsfiddle.net/JosephByrne/HdPq4/2/
And here is the amended version with the #introPic moved to the top of the html - http://jsfiddle.net/JosephByrne/kRudM/
Your code is fine. The problem is the #introduction is put behind the body element because of z-index:-99 you set on the #content which is the container of the #introduction. So clicking on any element in #content will actually click on the body element. Just remove the z-index and it should work fine.
The interesting thing here is the background of the body should cover the #content but it happens only when you specify some background for the html element.
Try this:
<script>
$(function(){
$(document).on("click", "#introPic", function () {
$("#introduction").addClass("hide");
$("#q1").removeClass("hide");
});
});
</script>
Your code does not work cuz you've forgot to terminate lines with semicolons.

Set focus to element after slideToggle removes display:hidden attribute with jQuery

So I have looked at a bunch of examples and still cannot seem to figure this one out. I have an element that I am hiding "display:none" until it is expanded by a link using jQuery slideToggle. Working but I need the focus to go to the new element div. I've tried a bunch of examples and nothing seems to be working so I'll post it here.
Here is the fiddle:
JS FIDDLE
So on click of this link here:
<div><p>Blah Blah <a id="whyDivLink" class="staticLinkHelper" title="Wblah blah bl title" style="color: #8f0222; text-decoration: underline">Click Me?</a></p>
</div>
I am trying to do two things, well three but two would be marvelous.
1. Scroll to this DIV which is just a bit further down the page.
2. Focus on the text that is now showing.
Apparently because the node is hidden, then it will not focus to it or something to that affect and it has nothing to scrollTo or when I have tried it just scrolls all the way to the top. But I have a fixed header so that does not work because then it is just hidden. So what I have now is basically working and scrolling to the div and from what I can tell... focusing on it. But I need to set it a ways from the top and when I try it breaks the scrolling. Any one see what I am doing wrong?
$(function() {
$("#whyDivCloser").click(function () {
$("#whyDiv").slideToggle("slow");
});
});
$(function() {
$('#whyDivLink').click(function (evt) {
$("#whyDiv").slideToggle("slow");
});
});
Any help would be appreciated
Looks like when you apply display:none initially to the div, clicking on the a link won't lead user to the targeted div anymore. To fix this, you can try using code to hide the div initially using slideToggle, of course the initial state of the div is display:block, slideToggle will hide it for you instead of setting display:none initially while clicking on the link will work expectedly (jump to the targeted div).
JS:
$(function() {
$("#whyDiv").slideToggle("slow"); //add this line to hide it initially
$("#whyDivCloser").click(function () {
$("#whyDiv").slideToggle("slow");
});
});
$(function() {
$('#whyDivLink').click(function (evt) {
//append .focus() to focus the text
$("#whyDiv").slideToggle("slow").focus();
});
});
Updated Demo.

JQuery hover fade with default div transition stutter

I am attempting to use hover with with to swap div visibility when mousing over navigation buttons.
When there is no mouseover, there is a 'default' div that should appear.
My problem is that every time the mouse transitions between links, the default div briefly reappears.
Is it possible to make the swap seamless, or will a different approach to the swap work? I attempted to set the nav container div with a fadeout/fadein event for the default div, but I didn't have any luck with that.
Refer to the following fiddle for an example: http://jsfiddle.net/ElectricCharlie/Wk8Yd/
$('div.hmnav').hover(function()
{
$('#_wnr00').stop(true,true).fadeOut();
$('#_'+this.id).stop(true,true).fadeIn(400);
},
function ()
{
$('#_'+this.id).stop(true,true).fadeOut(400);
$('#_wnr00').stop(true,true).fadeIn();
});
I just got rid of true,true and it worked fine:
$('div.hmnav').hover(function () {
$('#_wnr00').stop().fadeOut();
$('#_' + this.id).stop().fadeIn(400);
},
function () {
$('#_' + this.id).stop().fadeOut(400);
$('#_wnr00').stop().fadeIn();
});
Updated your jsFiddle as well.
EDIT: took the time to clean up your jQuery as well:
$('#navbox_inner')
.corner("round 12px")
.parent()
.css({padding:1})
.corner("round 14px")
$('#navbox_inner').on({
mouseenter: function () {
$('#_wnr00').stop().fadeOut();
$('#_' + this.id).stop().fadeIn(400);
},
mouseleave: function(){
$('#_' + this.id).stop().fadeOut(400);
$('#_wnr00').stop().fadeIn();
}
},'.hmnav');
This is much faster, as it binds to one item, and delegates appropriately. I also removed the element selector, as a pure class based / id based selector is faster. Updated your jsFiddle a second time.

Drop Down Problems

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};

Categories