How do I unbind or disable the mouse over after it's being hovered out then re-enable if the other box is faded out.
I tried the unbind, but seems that its not working, it just disables the whole thing.
I even tried a timeout but that is not working into my advantage.
Any help would be appreciated.
$("#shopping_basket").mouseover(function() {
// set a timeout so that this event will not trigger twice when mouseover from the bottom
setTimeout(function() {
/*$("#shopping_basket").unbind(mouseover);*/
$("#miniBasketDetails").fadeIn(500);
},500);
});
$("#miniBasketDetails").mouseleave(function() { $("#miniBasketDetails").fadeOut(500); });
Just a guess try something like this:
$("#shopping_basket").bind('mouseover', function() {
setTimeout(function() {
$("#shopping_basket").unbind('mouseover');
$("#miniBasketDetails").fadeIn(500);
}, 500);
//Re-enable as needed: $("#shopping_basket").bind('mouseover', function(){});
});
This code is not tested, but should work.
I think your problem was that you passed mouseover into .unbind() as a variable, not a string. This is why the "whole thing" was disabled, because JavaScript was looking for a variable named mouseover, which was not defined, and caused your code to break. Try it like this: .unbind('mouseover').
Not sure if this is the algorythm you're looking for, it is based on answers shown in this question.
Here is the fiddle and the code:
$("#shopping_basket").hover(function() {
$("#miniBasketDetails").fadeIn(500);
}, function() {
$("#miniBasketDetails").data('is_over', false);
setTimeout(function() {
if (!$('#miniBasketDetails').data('is_over')) {
//if not hovered over the #miniBasketDetails in 650 miliseconds after mouseleave
$("#miniBasketDetails").fadeOut(500);
}
}, 650);
});
$("#miniBasketDetails").mouseenter(function() {
$(this).data('is_over', true);
});
$('#miniBasketClose').click(function() {
$("#miniBasketDetails").fadeOut(500, function() {
$(this).data('is_over', false);
});
});
The span#miniBasketClose is just one optional "Close button", not necessary for functionality of the code. Its functionality can be substituted (if needed) for example also with hovering over some other elements.
Related
EDIT:
Turns out the issue was that you can't use the scroll event if the element isn't overflowing. Use 'wheel' event instead.
ORIGINAL POST:
Is there a way for me to add an EventListener after the site is loaded though a function. I have an svg-animation that runs, and I don't want the EventListener to be activated before the animation is done, which I would assume should look something like this:
$('.button').on('click', function() {
$('.board').addClass('active');
setTimeout(function() {
$('.svg-container').addClass('activate');
}, 2000);
setTimeout(function() {
$(window).scroll(function() {
doSomething();
});
}, 10000);
});
function doSomething() {
alert('test');
}
But nothing happens – no errors are thrown in the log either. Is there a way to add an eventlistener on the fly?
$(function(){
$('#webs').mouseenter(function(){
$('#websitehov').fadeIn('slow');
});
$('#webs').mouseleave(function(){
$('#websitehov').fadeOut('slow');
});
});
I know there are a ton of questions on this but I've tried a number of them and still not working, I've tried different event handlers including .hover, .mouseover and .mouseenter.
The image hover/hover out effect fires multiple times when it enters and whenever I move the mouse inside the image the two events start firing.
I found one solution that stopped this :
(function(){
$('#webs').hover(function(){
$('#websitehov').fadeIn('slow')
}, function() { });
});
but this only worked for the hover in and not for hover out because the empty function was the mouseout event handler, idk if you can override this?
The only possible problem I can see is that of animation queuing, clear the animation queue before addition another one
$(function () {
$('#webs').hover(function () {
$('#websitehov').stop(true, true).fadeIn('slow');
}, function () {
$('#websitehov').stop(true, true).fadeOut('slow');
});
});
Demo: Fiddle
I have two statements. What I am trying to do is when someone clicks on #area_a then hide then entire #area_b div without activating the focusout for the #area_b_textbox. But I've tried different code (which I am not including here because it is incorrect and want to get your suggestions) and what is happening is it is activating the focusout everytime I click on the #area_a div.
JQuery base actions
$("#area_a").click(function() { $("#area_b").hide(); });
$("#area_b_textbox").focusout(function() {$("#area_b_error").show();});
HTML:
<div id="area_a"></div>
<div id="area_b">
<input id="area_b_textbox">
<div id="area_b_error"></div>
</div>
Thanks!
You could hack around the problem with a timer. Timers usually smell bad but I think it is your safest bet here. If you try using hover or other mouse events you might run into trouble with keyboard navigation and activation or the lack of "hoverish" events on touch interfaces (and we can't pretend those don't exist anymore).
Something like this:
var timer_kludge = {
start: function(fn) {
this.id = setTimeout(fn, 200);
},
stop: function() {
if(this.id)
clearTimeout(this.id);
this.id = null;
},
id: null
};
$('#area_a').click(function() {
timer_kludge.stop();
$('#out').append('<p>click</p>');
});
$('#area_b_textbox').focusout(function() {
timer_kludge.start(function() {
$('#out').append('<p>textarea focusout</p>');
});
});
$('#area_b_textbox').focusin(function() {
timer_kludge.stop();
});
Demo: http://jsfiddle.net/ambiguous/s8kw8/1/
You'd want to play with the 200 timeout a bit to see what works best in your circumstances.
Why not just add a flag to ignore next focusout (blur?) event.
ignoreNextFocus = false;
$("#area_a").click(function() { ignoreNextFocus=true; $("#area_b").hide(); });
$("#area_b_textbox").focusout(function() { if(!ignoreNextFocus)$("#area_b_error").show();ignoreNextFocus=false;});
On that note setting the flag on click event might be too late. If it is the case, try mousedown event.
this is not possible since you loose the focus automatically when you click somewhere else...
What you need to do is to unbind the focusout event on hover of the #area_a and rebind it later on...
$("#area_a").click(function() {
$("#area_b").hide()
}),hover(
function(){
$("#area_b_textbox").unbind("focusout")
},
function(){
$("#area_b_textbox").focusout(function() {$("#area_b_error").show();});
}
)
PS: what is your ultimate goal here?
I'm not sure this is possible since by definition the focus has to leave the #area_b_textbox if the user is going to click a button.
I recently tried to use jQuery's effect('scale') function with the hover() function in jQuery. The idea is to enlarge the div element on mouseenter, and shrink it back to normal on mouseleave. The code is as follows:
$('.boxgrid').hover(function(){
$(this).effect('scale', {percent:125}, 1000);
}, function() {
$(this).effect('scale', {percent:80}, 1000);
});
I tried testing this in a jsfiddle, but instead of upscaling and downscaling once when a mouse enters the element, it keeps enlarging it. You can see the jsfiddle here. My question is how do I fix it? My understanding was that the mouseenter event was fired only once, and reset when the mouseleaves event is fired, but this seems to say otherwise? Am I missing something? Any help is greatly appreciated.
It calls the hover function every time the animation finishes. I modified it as follows and it appears to work:
window.boxScaled = false;
$('.boxgrid').hover(function(){
if(!window.boxScaled) {
window.boxScaled = true;
$(this).effect('scale', {percent:125}, 1000);
}
}, function() {
if(window.boxScaled) {
window.boxScaled = false;
$(this).effect('scale', {percent:80}, 1000)
}
});
I think you need to force the animation to stop if you leave the box before it has finished scaling (or reenter the box before it has shrunk):
$('.boxgrid').hover(function(){
$(this).stop().effect('scale', {percent:125}, 1000);
}, function() {
$(this).stop().effect('scale', {percent:80}, 1000);
});
http://jsfiddle.net/magicaj/9GLEy/10/
Your understanding of hover (mouseenter/mouseleave) is correct, they should only fire once upon entering/leaving.
Is there a JavaScript or jQuery solution to run a function repeatedly (after setTimeout) while the mouse is over a DOM object? Otherwise said, is there a JavaScript "do while mouseover" (or "if mouseover")?
$('someObject').bind('mouseover', function() {
//Do the following while mouseover
$('someOtherObject').css('margin-left',adjustedLeft + 'px');
setTimeout(/*do it again*/,25);
});
$('someObject').on('mouseenter', function() {
this.iid = setInterval(function() {
// do something
}, 25);
}).on('mouseleave', function(){
this.iid && clearInterval(this.iid);
});
Example Look here
I would solve this issue using the onmouseout event.
Start whatever you intended to do while the mouse is over the specified component on the mouseover event.
When onmouseout event occurs i would stop it.
i use new bind style of jQuery.
$(el).bind({
'mouseenter': function(){console.log('Mouse over');},
'mouseleave': function(){console.log('Mouse leave');}
});
I know this is kind of old, but I think the proper function is already in JavaScript, onmousemove does just that.
OBJ.addEventListener("mouseenter", function() {
focus=true;
});
OBJ.addEventListener("mouseleave", function() {
focus=false;
});
Just in case you don't want to use jquery you can use this :)