I have a few functions in jQuery that control the display of a div when the parent div is moused over. The first two functions are :
$(".parentDiv").mouseover(function () {
$(this).find(".childDiv").css('visibility','visible');
});
$(".parentDiv").mouseout(function () {
$(this).find(".childDiv").css('visibility','hidden');
});
These work fine. Later, I have a click function bound to the 'childDiv':
$(".childDiv").click(function (e) {
});
I have a bunch of functionality within this function that work perfectly. However, at one point I need to disable the mouseover and mouseout functions on the parent div. I do this by:
$("#" + this.id).closest(".parentDiv").off("mouseover mouseout");
This works perfectly. But, when I try to turn it on based on other functionality in the function using:
$("#" + this.id).closest(".parentDiv").on("mouseover mouseout");
It does not turn back on. I know the selector is working, first because it works when I turn it off, but also because I added the following code and it works:
$("#" + this.id).closest(".parentDiv").css("border","1px solid #000");
Does anyone know why this is not working? I find it strange that turning the mouseover and mouseout off works, and that changing the border also works, but that turning mouseover and mouseout on does not work. What am I missing?
That is because .off doesn't 'turn off' the events, it removes event handlers.
https://api.jquery.com/off/
If you want the events back, you will have to attach them again.
Related
I have a search suggestion box that I hide when the search text box loses focus. This works great, except that when I click one of the suggestions the click event for that suggestion does not fire.
searchText.focusout(function () { $("#search-suggestions").hide(); });
I also tried:
searchText.focusout(function () { $("#search-suggestions").css("visibility", "hidden"); });
I tried commenting out the hide on unfocus code and the click events then worked fine.
(Basically, the blur event happens before the click on the suggestion can be registered, such that the element I attempted to click is not on the screen when the clicm does register)
here's the click event code:
//Called after the ajax load
$("#search-suggestions").find("a").click(function () { alert("hi"); })
I also tried rendering this on the server but it failed as well:
Search Suggestion
If any one has any suggestions I would appreciate it. Thanks!
You could try to define something like this:
//this goes where you first binding focusout handler
searchText.focusout(onFocusOut);
//this is a usual function
function onFocusOut() {
$("#search-suggestions").hide();
}
//this could be defined after you draw the search-suggestions control
$("#search-suggestions").hover(function() {
//this is hover in handler; unbind focusout from searchText
//something like that:
$("#searchText").unbind('focusout', onFocusOut)
}, function() {
//this is hover out handler; bind focusout to searchText
//something like that:
$("#searchText").bind('focusout', onFocusOut)
});
you could also use live (http://api.jquery.com/live/) to define hover handler for #search-suggestions, depending on what exactly you need.
This will make your search suggestions stay visible when clicking them. In click handler you can then hide them.
Try just making it invisible.
Change $('#my_search_box').hide(); to $('#my_search_box').css('visibility','hidden');
If you have surrounding DOM elements that need to act as if the search box is gone, you can just assign it an absolute position as well.
Try using .css('visibility', 'hidden') instead of .hide which uses display:none.
I've created a custom select using javascript as described here: http://v2.easy-designs.net/articles/replaceSelect/
The key idea is that the select is built of a containing two (in my case) s. What I want to do is add an onmouseover function that should read something like:
ulNode.onmouseout = function() {
if (ulNode.className.indexOf('selectOpen') !- -1){
selectMe(li[0]);
}
}
i.e. if the mouse leaves the ul, and the ul is open, the first element should be selected. This works fine, but this function gets called when I move my mouse between li's, even though I haven't left the containing ul. Any ideas why that might happen?
Thanks in advance!
mouseover and mouseout are wrong king of events for this case. They are fired way too often when you have other elements inside the element that has mouseout event. You need something like mouseleave and mouseenter
Mouseleave in jQuery
Try implementing some delay before the mouseout event like this:
var hover_to = null;
$("ul").mouseover(function() {
window.clearTimeout(hover_to);
// (A) your stuff...
}).mouseout(function() {
hover_to = window.setTimeout(function() {
// (B) your stuff...
},200);
});
This hopefully handles the nonwanted atomic events.
Careful with the scope in (B).
I have a code like this
$('#singleColumn' + time).show(SHOW_COMPONENT_SPEED)
.live('mouseenter', function() { $('#propertiesButtonSingle' + time).fadeIn(FADEIN_SPEED); })
.live('mouseleave', function() { $('#propertiesButtonSingle' + time).fadeOut(FADEOUT_SPEED); });
which I'm using to show/hide a button when mouseenter/mouseleave events are fired on a box.
The problem is that my page is dynamic, i.e. I keep adding new HTML to the page using JQuery .html() function. What happes is that the mouse events are fired only for the last box I added (I add them by drag and dropping): pratically it works fine for the first box, if I add a second one the events are fired correctly for it but when I move the mouse over the first box nothing happens. If I add a third box the second one stops working too, etc...
The code I posted is for one kind of box, but for the other types it is pratically the same apart from the selector names.
take a look at .delegate() - http://api.jquery.com/delegate
you could bind events to an object higher up the DOM tree and listen ...
I'm using jQuery to toggle the visibility of a <div> using the jQuery toggle method. The toggle is fired on the mouseenter and mouseleave event, thus creating the effect of the div to fold out on mouseenter and fold in on mouseleave. Problem is, if the user drags the mouse over the <div> a few times and then leaves the <div>, the div will toggle in and out several times. This can happen if the user accidentally moves around the mouse pointer in the <div> are. Do anyone have any idea on how I can avoid this behavior?
Thanx!
Two things:
If you're going to use both mouseenter and mouseleave I'd suggest using the hover() function; and
When using triggered animations it's a good habit to get into to use the stop() method.
So:
$("div.someclass").hover(function() {
$("...").stop().fadeIn("slow");
}, function() {
$("...").stop().fadeOut("slow");
});
Note: replace "..." with the appropriate selector for what you're toggling and use the appropriate effect (I'm using fade here). Also, this in an event handler refers to the source of the event.
You can use the more common mouseover/mouseout events to get a hover event that doesn't fire on internal mouse movements.
But don't use toggle on a mouse event, it can easily go wrong if eg. the mouse is over the element at page load time, or the mouse leaves the browser (which can allow the mouse to leave the bounds of the element without firing a mouseout). Have separate function for over which shows the content, and out which hides it.
Better: just use the hover() method which is meant for exactly this purpose.
Aside from the correct answer by Cletus, i'd like to point out that using mouseenter and mouseleave events is not wrong. The trick only resides into the stop() method, in fact we could still do:
$("div.someclass").on("mouseenter", function() {
$("...").stop().fadeIn("slow");
});
$("div.someclass").on("mouseleave", function() {
$("...").stop().fadeOut("slow");
});
Here is a jsFiddle example :)
I've been working on some code where I trigger the code on hover/unhover. Then I decided to trigger the same code also on focus/blur. Usually with hover/unhover only, I go for the usual hover comma no unhover format. But this time since I was trying to add focus/blur, I had to use bind and use this.bind with the second part too, like this:
$.fn.gogogo = function (msg) {
$(this).bind("hover focus", function(){
$("#screen").html(msg).show();
});
$(this).bind("unhover blur", function(){
$("#screen").html("").hide();
});
}
The problem was that no matter what I did, hover/unhover didn't take. I had to revert back to mouseover/mouseout like this. The code is identical except for the words hover/unhover vs. mouseover/mouseout
$.fn.gogogo = function (msg) {
$(this).bind("mouseover focus", function(){
$("#screen").html(msg).show();
});
$(this).bind("mouseout blur", function(){
$("#screen").html("").hide();
});
}
I thought hover/unhover was just the jquery abstraction of mouseover/mouseout. How come the behavior is different here: hover/unhover breaks my code, while mouseover/mouseout is ok?
thanks.
There is no event called hover.
The hover method is a convenience method that binds event handler to the mouseenter and mouseleave events.
If you open the jQuery source, you'll see that the hover method is defined like this:
hover: function(fnOver, fnOut) {
return this.mouseenter(fnOver).mouseleave(fnOut);
},
You should bind to the mouseenter and mouseleave events instead.
EDIT: The difference between mouseenter and mouseover is that mouseenter (and mouseleave) don't bubble. This means that you'll get a mouseover event if the mouse moves into any element inside the one you bound to (which is probably not what you want), whereas you'll only get a mouseenter event if the mouse entered that element itself. For an example, see the documentation.
There is no "hover" event. That's just a convenience routine.