jquery two divs using 'hover' event - javascript

$('img.clientImage').live('hover', function () {
if ($('div#ClientImageHover').length > 0) {
$('div#ClientImageHover').remove();
} else {
$('<div id="ClientImageHover">Change Image</div>').insertAfter($(this));
$('div#ClientImageHover').css({ 'top': $(this).position().top });
}
})
Now what happens if I hover over #ClientImageHover. You guessed it, it will start flickering quickly on and off. Because there's a mouseout event on .clientImage.
I need to create the element here and append it after the img then position it on top of it. This is working correctly, but I am having issues when hovering over #ClientImageHover. How can I keep showing this div normally when the mouse is over it and keep everything as it currently is?
Thanks.

To expand on my comment, do something like this jsFiddle
HTML:
<div class="container">
<img class="clientImage"></div>
</div>
JS
$('.container').live('hover', function () {
if ($('div#ClientImageHover').length > 0) {
$('div#ClientImageHover').remove();
} else {
$('<div id="ClientImageHover">Change Image</div>').appendTo($(this));
$('div#ClientImageHover').css({ 'top': $(this).position().top });
}
});

You could break it up to use .mouseenter() and.mouseleave(). Use .mouseenter() on img.clientImage and then only remove it on $('div#ClientImageHover').mouseleave();
http://jsfiddle.net/gkkxG/

Related

hover() event handlers not respecting dynamically changed classes

This is my code:
<li class="dropdown">
...
</li>
$(window).scroll(function() {
if ($(".navbar").offset().top > 70) {
$(".dropdown").addClass("dropdown-collapse").removeClass("dropdown");
} else {
$(".dropdown-collapse").addClass("dropdown").removeClass("dropdown-collapse");
}
});
$(".dropdown-collapse").hover(
function() { $(this).addClass('open') },
function() { $(this).removeClass('open') }
);
When the page load at first time the class for <li> is still dropdown and when the page scrolled bellow 70px the class replace with dropdown-collapse. The problem is my hover function doesn't work when the class dropdown replaced with dropdown-class. Please help me guys, thank you.
Your issue is due to the fact that you attach the hover event handlers on load of the page. The change in the classes on the element has no effect on any event handlers that were already bound. To do what you need to would have to use a delegated event handler, like this:
$(window).scroll(function() {
var offsetTop = $(".navbar").offset().top;
$(".dropdown, .dropdown-collapse")
.toggleClass("dropdown-collapse", offsetTop > 70)
.toggleClass("dropdown", offsetTop <= 70)
});
$(document).on('mouseenter', '.dropdown-collapse', function() {
$(this).addClass('open');
}).on('mouseleave', '.dropdown-collapse', function() {
$(this).removeClass('open');
});
Note that you could simplify the class switching logic by leaving the .dropdown class on the element permanently and simply switching the behaviour dependant on if the .dropdown-collapse class is present.

Disable scroll, animation, then enable scroll again

(first question so be nice :) )
I'm trying to disable scroll, animate a div, then re-enable scrolling. So far I have accomplished the first two parts of this incredible quest, but alas, I cannot seem to get it to scroll again.
I am using lockScroll() and unlockScroll() functions defined by JeanValjean on How to programmatically disable page scrolling with jQuery
Any help would be much appreciated. Please see demo http://jsfiddle.net/Chris_James/1xxL5dnp/6/
jQuery(document).ready(function(){
$(window).scroll(function(){
var p = $( ".testi" );
var offset = p.offset();
if ($(this).scrollTop() > offset.top - $(window).height()/2) {
lockScroll();
$('.testi').addClass( 'testishow' );
setTimeout(function(){
$('.testimonial').fadeIn('fast');
unlockScroll();
},700);
}
})
});
jQuery(document).ready(function(){
$(window).scroll(function(){
var p = $( ".testi" );
var offset = p.offset();
if ($(this).scrollTop() > offset.top - $(window).height()/2) {
lockScroll();
$('.testi').addClass( 'testishow' );
setTimeout(function(){
$('.testimonial').fadeIn('fast', function() {
unlockScroll();
});
},700);
}
})
Like Good.luck recommended, you can you use callbacks for unlocking (Well, I was a few seconds to late...). I think you don't have to declare a function just unlockScroll.
The lock/unlockScroll() methods seems to a bit to be overweight.
I would recommend cubbius answer with an "overflow: hidden" style for the html element.
Make a function out of your current scroll event and unlock it with:
$(window).off("scroll touchmove mousewheel", function () {
$(window).on("click", yourScrollMethod);
})
Solution - adding a class (scrolllocked) to if statement, and checking for it (with &&). Simples. http://jsfiddle.net/Chris_James/1xxL5dnp/6/
if ($(this).scrollTop() > offset.top - $(window).height()/2 && !p.hasClass("scrollLocked")) {
lockScroll();
p.addClass("scrollLocked");
$('.testi').addClass( 'testishow' );
You can use function callbacks for this e.g.
$('.testimonial').fadeIn('fast', function(){
unlockScroll();
});
In this case function unlockScroll() will execute only after fadeIn finished it's animation.
UPD: Added Fiddle

mouseenter/mouseout makes div flicker

I have a tooltip that shows on the mouseenter event and hides on the mouseout event. Sometimes, not always, when the mouse moves within the image for the tooltip the tooltip flickers. How can i prevent this happening? Is there a better way to do this?
Here is my code:
$('#home_pic').mouseenter(function() {
$('#home_tip').show();
});
$('#home_pic').mouseout(function() {
$('#home_tip').hide();
});
Use mouseleave instead of mouseout()
$('#home_pic').mouseleave(function() {
$('#home_tip').hide();
});
Or use .hover
$('#home_pic').hover(function() {
$('#home_tip').hide();
},function() {
$('#home_tip').show();
});
You can use the toggle() function for this, it accepts a boolean to set the state, so something like:
$('#home_pic').on('mouseenter mouseleave', function(e) {
$('#home_tip').toggle(e.type==='mouseenter');
});
FIDDLE
Try mouseleave instead of mouseout like this:
http://jsfiddle.net/tncbbthositg/dWKfX/
You need to write your mouseenter and mouseleave functions in a proper way, something like below:
$('#home_pic').mouseenter(function() {
$("#home_pic").show();
},mouseleave(function() {
$("#home_pic").hide();
}));
Note: Code Not tested to work.
you can also try something like this if the tooltip runs over the home pic - I've used very similar code to pop up bubbles on a image map
$('#research_area').mouseover(function() {
$('img#research').css('display', 'block');
runthis();
});
function runthis () {
if ( $('img#research').css('display') == 'block') {
$('img#research').mouseleave(function() {
$(this).css('display', 'none');
});
}
http://www.karpresources.com/

How check mouseover on two elements ?

I need hide tooltip on mouseout of link, BUT not if mouseover on tooltip (both have different parents)
For example: we can see it on Facebook when hover on names or avatars friends
I try this but every time i get FALSE
$('a').bind('mouseleave', function () {
var i = $('div.tooltip').is('hover');
if(i===true){
console.log('cursor over the tooltip, so dont hide');
}
else{
console.log('hide tooltip');
}
});
How i can check both condition?
Put both the link and the tool tip in the same parent:
<div id="parent">
link
<div id="tooltip">tooltip</div>
</div>
And then in the script you can just put the mouseleave function on the parent:
$("#parent a").mouseenter(function(){
$("#tooltip").css("display","block"); //or however you handle this
});
$("#parent").mouseleave(function(){
$("#tooltip").css("display","none");
});
If you can't change your markup, use a timed event and abort it when the mouse enter either element, like so:
var timer;
$("a, .tooltip").mouseleave(function() {
timer = setTimeout(doSomething, 10);
}).mouseenter(function() {
clearTimeout(timer);
});
function doSomething() {
console.log('hide tooltip');
}
Here's a FIDDLE

jquery mouseleave issue when moving too slow

I am using the jQuery mouseenter and mouseleave events to slide a div down and up.
Everything works well except for the mouseleave which doesn't appear to fire ONLY if the mouse of moved off of the div quite slowly. If i move the mouse at a relatively normal or fast speed then it works as expected.
Can anyone explain this or provide any info on how to get around this?
Code:
$(document).ready(function() {
$('header').mouseenter(function() {
$(this).stop().animate({'top' : '25px'}, 500, function() {
$(this).delay(600).animate({'top' : '-50px'}, 500);
});
}).mouseleave(function(e) {
var position = $(this).position();
if (e.pageY > position.top + $(this).height()) {
$(this).stop().delay(600).animate({'top' : '-75px'}, 500) ;
}
});
});
Try to use hover instead mouseenter and mouseleave;
$(document).ready(function() {
$("#div").hover(function() {
$("#something").slideDown(400);
}, function() {
$("#something").slideUp(400);
});
});

Categories