Is it possible to trigger a hoverIntent on an element.
I have tried $(elem).trigger('hoverIntent');, which didn't work.
Edit: Js Fiddle: http://jsfiddle.net/H2p6T/
Simply triggering any of the event types did nothing unless the hoverIntent had been triggered genuinely.
I took a look at the hoverIntent source and it expects two things: mouseenter and mousemove with pointer coordinates defined. So I triggered events with fake coordinates:
$('.foo').trigger({ type:"mouseenter", pageX:"123", pageY:"123" });
$('.foo').trigger({ type:"mousemove", pageX:"123", pageY:"123" });
The coordinates don't matter as long as they are close enough to each other to trigger hoverIntent.
I used the r7 version for this.
Have you tried
$(elem).trigger('hover');
or
$(elem).trigger('mouseover');
$(elem).trigger('mouseout');
or
$(elem).trigger('mouseenter');
$(elem).trigger('mouseleave');
hoverIntent is a plugin not an actual event so I believe you have to trigger an event that hoverIntent actually binds to your element
Here's an example of it working with the mouseenter/mouseleave
http://jsfiddle.net/H2p6T/3/
Can you do it like this?
$(elem).hoverIntent();
Ok that didn't work...
I had a play with it: http://jsfiddle.net/8CCTM/11/
hoverIntent will trigger on mousenter() but it will only do it after the hoverIntent element has been activated with the mouse.
Related
I'm trying to capture the event when the mouse is hovering over the select box, be it collapsed or expanded. I'm using .on() in the following manner,
$(document).on('hover', "select#selectBox", function() {
alert("done");
});
Please note that I'm using this snippet inside DOM document ready too.
I've tried changing the event to click, scroll, mouseover, mouseenter, etc too.
Doesn't seem to work for those too.
Please point out where I'm going wrong.
I've made a JSFiddle: https://jsfiddle.net/g9vf1mty/2/
EDIT: Thanks for the quick response everyone!
I have fixed my mistakes :)
I have tweaked the JSFiddle a little bit. Now, I'm attempting to scroll the select box with a size lesser than the number of options and have changed the 'hover' event to 'scroll' event. It does not seem to work that way.
I'm using jQuery 2.1.3.
JSFiddle here: https://jsfiddle.net/g9vf1mty/8/
You don't need to wrap event bound to document level inside ready pseudo event. And because you want to delegate event, maybe to hanlde dynamic elements, the correct way would be to bind both mouseenter & mouseleave events this way:
eventually filtering by event type inside handler (in/out)
$(document).on('mouseenter mouseleave', "#selectBox", function(e) {
alert("done: " + e.type);
});
$("select#selectBox").hover(function() {
alert("working");
});
use hover function, in the above manner. and more importantly, you missed jQuery library too.
As on("hover") was deprecated form jQuery 1.8, it won't work on Higher versions of jquery.
You should use mouseenter event
and include jquery in your fiddle :)
Look also at this (SO question)[Is it possible to use jQuery .on and hover?
How can I simulate events like click, mousedown, mouseout and etc. in JavaScript or jQuery?
Use the trigger method
$(element).trigger('click');
More information: http://api.jquery.com/trigger/
Events can be attached to each element in a HTML page. Check out the following link to understand events better.
http://www.w3schools.com/js/js_htmldom_events.asp
Because I am creating DOM using Jquery it was difficult to copy the output so i am adding one image of code that i have captured using one tool
i have attached hover and mouseout event to id='nf1' using this code
$("#nf"+n).hover(function(){
$("#nf"+$(this).attr("post_id")+"post_delete").show();
});
$("#nf"+n).mouseout(function(){
$("#nf"+$(this).attr("post_id")+"post_delete").hide();
});
Here n is post_id and i am looping all post_id got from response.This attach events but not giving expected behaviour Like when mouse over to id='nf1post_delete' it is hide
Please ask if any doubts
The way you're describing this, you will actually want to pass two functions to .hover(), one for the action on mouseenter and one for the action on mouseleave. You can pass only one function to .hover(), but it will run that function when you roll over and when you roll out.
http://api.jquery.com/hover/
So, try this instead:
$("#nf"+n).hover(function(){
$("#nf"+$(this).attr("post_id")+"post_delete").show();
},function(){
$("#nf"+$(this).attr("post_id")+"post_delete").hide();
});
The .mouseout() function isn't needed at all.
At first, .hover() includes mouseenter and mouseleave. Do you put both function in there and don't use an additional event. Also don't use mouseout(). Use instead mouseleave().
So you either use hover(function(){},function(){}); alone, or you use mouseenter() and mouseleave().
Since you're manipulating the DOM, I'm going to recommend using jQuery .on() instead of .hover():
$(document).on({
mouseover: function(){
$("#nf"+$(this).attr("post_id")+"post_delete").show();
},
mouseout: function(){
$("#nf"+$(this).attr("post_id")+"post_delete").hide();
}
}, "#nf"+n);
If you're creating something in the DOM after the page has loaded, .on() helps to attach event listeners to it.
jQuery API for .on()
I am trying to experiment on creating something where you can rate by no. of stars. However, after I click on the rating I want and the number of stars has been printed out, I can still click on the stars and change the value. How can I stop all events after I click?
This is the jsFiddle demo of my problem:
http://jsfiddle.net/3pMuy/
You could use .one [docs]. The event handler bound with this will only be executed once.
The flag suggestion is not to bad.
This will do the trick for you.
Not the nicest soulution but.. hey check it out!
http://jsfiddle.net/3pMuy/21/
Your code binds a jQuery event each time you hover a star, thats bad.
By the way, This Demo is a solution for your version with an added line:
$('ul li').unbind("click").unbind("mouseenter").unbind("mouseleave");
I suggest you to consider moving the click binding outside the hover event and use .one()
Any ideas why this doesn't work, or how to make it work? I want to remove the "onmouseover" and "onmouseout" events so they are basically disabled and at the same time change the background color. Then when the user clicks on another element I want to reassign the mouse events back to the element. Right now the onmouse events don't get disabled at all, the background doesn't change, etc.
Here's how I call the function:
Here's the function:
$(document).ready(function(){
$(".maximize").toggle(
function(){
$("#property_bg").unbind("onmouseover");
$("#property_bg").unbind("onmouseout");
$("#property_bg").toggleClass("body_bgcolor");
},
function() {
$("#property_bg").bind("onmouseover", function() {
swap_class("property_bg","body_bgcolor")} );
});
});
Thanks for the help.
Remove the "on" from the event names. Then it'll work.
on your events, take out the 'on'... just mouseover or mouseout...
I found out the real problem in the following two threads for anyone who comes along with a similar problem I will add them here:
How do I unbind "hover" in jQuery?
Why this unbind doesn't work?
The problem was solved by not hard coding the mouse events in the HTML, but rather binding them in the document.ready 1st. In order to "unbind" and event, the event has to be "binded" by jquery.
Also, "mouseover" didn't work for some reason I couldn't figure out, but when I put "mouseenter" and "mouseleave" as suggested in one of the posts above it worked. I've never heard of "mouseenter" or "mouseleave", but ... it works now.
Good luck!