briancherne / jquery-hoverintent Goto Github PK
View Code? Open in Web Editor NEWhoverIntent jQuery Plug-in
Home Page: https://briancherne.github.io/jquery-hoverIntent/
License: MIT License
hoverIntent jQuery Plug-in
Home Page: https://briancherne.github.io/jquery-hoverIntent/
License: MIT License
The timeout value only applies to the method called on mouseout, and not the method called on mouseenter. So if you have several elements with mouseenter/out behaviors (example a menu where hovering one menu item should clear the hover on sibling menu items) then the mouseout delay is negated by the sibling elements having 0 delay for mouseenter
Pull Request #60 adds the ability to specify timeout values for mouseenter as well
I use this plugin a lot when making dropdown menus. Usually with this https://github.com/somatonic/droppy
Since now there's touch events, I had a problem with android pads (ios pads works fine) not recognizing the "hover" event.
I tried to fix it with various techniques and the only one working for all seems to add "touchend" and test for it in the handleHover function to bypass the sensitivity checks for mouseenter.
I attached code here in case you're interested adding it.
...
// A private function for handling mouse 'hovering'
var handleHover = function(e) {
// copy objects to be passed into t (required for event object to be passed in IE)
var ev = jQuery.extend({},e);
var ob = this;
// cancel hoverIntent timer if it exists
if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }
// if e.type == "mouseenter"
if (e.type == "mouseenter") {
// set "previous" X and Y position based on initial entry point
pX = ev.pageX; pY = ev.pageY;
// update "current" X and Y position based on mousemove
$(ob).on("mousemove.hoverIntent",track);
// start polling interval (self-calling timeout) to compare mouse coordinates over time
if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}
// else e.type == "mouseleave"
} else if(e.type == "mouseleave"){
// unbind expensive mousemove event
$(ob).off("mousemove.hoverIntent",track);
// if hoverIntent state is true, then call the mouseOut function after the specified delay
if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
}
// if touch event we don't need intent
if(e.type == "touchend"){
cfg.over.apply(ob,[ev]);
}
};
// listen for mouseenter and mouseleave
return this.on({'mouseenter.hoverIntent':handleHover,
'mouseleave.hoverIntent':handleHover,
'touchend.hoverIntent':handleHover
}, cfg.selector);
...
how to import like/in es6 modules?
Shouldn't it be better using requestAnimationFrame?
http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
Like the r5 issue which would improperly trigger mouse out when entering a child input[type="text"]. Same issue except it happens when you hover over a chrome autocomplete suggestion for an input element.
Reference to old bug: "hoverIntent r5 suffers from a defect in Google Chrome that improperly triggers mouseout when entering a child input[type="text"] element. hoverIntent r6 uses the same mouseenter/mouseleave special events as jQuery's built-in hover, and jQuery 1.5.1 patched this issue. Thanks to Colin Stuart for tipping me off about this and for providing isolated code to demonstrate/test."
Drupal: Version 10
Warning: file_get_contents(libraries/jquery-hoverIntent/jquery.hoverIntent.js): Failed to open stream: No such file or directory in _locale_parse_js_file() (line 1097 of core/modules/locale/locale.module).
At each polling interval the compare
function uses the value of sensitivity
option as a distance threshold to determine whether or not to fire handlerIn
. The issue is that the distance it is comparing against is the sum of distances moved in each axis, which is not the straight-line distance, but the "Manhattan distance" and not necessarily what is expected.
Could this behavior either be changed (I can make a pull request, if you like) or explained/documented? Thanks!
This issue was closed, but it shouldn't be:
#46
The bug still exists. A jfiddle was already set up to demonstrate this
http://jsfiddle.net/9x1cnteh/2/
The correct behavior is that the google chrome auto complete doesn't triggered the mouse leave.
Google Chrome: Version 76.0.3809.100 (Official Build) (64-bit)
Mac Mojave: 10.14.6
Hi
There is a problem with you labrari on cdnjs
please check this conversation and provide solution
thank
cdnjs/cdnjs#11656
Without moving the mouse and scrolling the window, the mouse events are triggered. This happens since the mouse technically isn't moving.
I guess this should be officially added to npm? There are a couple folks who registered unofficial clones, but it might be best to have the official one in the registry, yes?
+1 (or make a pull request!) if you want this to happen. (Maybe pair this with #32?)
If either out
or over
methods aren't provided or aren't functions, can we not throw exceptions?
Hello
Could you release a new version?
1.8.1 is dated from 2014 but is still being used in master in 2016...
it's greatly changed if you compare with a diff
It could be generally useful if the event passed to the handlers could also hold the current X & Y coordinates of the mouse at the time of firing. This could be added as part of the event.data, or more seamlessly (though potentially an unwanted side-effect for some) copied over the pageX/pageY of the returned event itself. This would make it much easier for those who want their handler to, for example, position something relative to the location of the pointer at the time of firing.
Thoughts? If I have time and there's interest, I can put an example implementation in a pull request.
@briancherne The minified version of the plugin is missing a closing ';' so when simply copy-pasted into a plugins.js (ala H5BP) the jquery plugin causes proceeding plugins to throw JS errors.
I've been using your excellent plugin for years now and had a question about the header comment. The latest release has a section that reads:
You may use hoverIntent under the terms of the MIT license. Basically that
means you are free to use hoverIntent as long as this header is left intact.
Is there any chance you could come up with a shorter version for the minified code? Something like:
/*!
* hoverIntent r7 // 2013.03.11 // jQuery 1.9.1+
* http://cherne.net/brian/resources/jquery.hoverIntent.html
*
* You may use hoverIntent under the terms of the MIT license.
* Copyright 2007, 2013 Brian Cherne
**/
I'm all for well documented code, but people aren't going to be looking for user docs in a minified version of the code and the above change would cut your minified file size down by almost half.
I'm getting the following error when I try to install the plugin via bower:
ENOTFOUND Package jquery-hoverintent not found
Any ideas?
Running npm install [email protected]
installs a slightly different variation from what I'm seeing in this repo. Compare this file to what is installed by NPM. They are both the same version in the docBlock header, but they each have different file contents.
I am facing a compatibility problem when the event is handled:
TypeError: $.event.handle is undefined
on line 120
Apparently jQuery 2.x doesnt have the event.handle property.
I would really appreciate a compatibility fix or something instead of downgrading my jQuery version
Please contribute Typescript types to the definitleytyped project.
I have a mega drop-down menu, which doesn't follow the traditional HTML structure of dropdowns... (the dropdown is not a child of the <li>
menu item.)
Here's how my html looks like:
<nav>
<ul class="menu">
<li class="menu-item">
Menu item 1
</li>
</ul>
</nav>
<section id="content">
<div class="dropdown">
<p>my dropdown content is here</p>
</div>
I don't know if you see the problem; I need to have an event handler on the "dropdow" class separately...
Now my code looks like:
jQuery('.menu-item[data-mlid]').hoverIntent({
over: hoverIn,
out: hoverOut,
sensitivity: 1,
timeout: 200,
});
function hoverIn() {
var activeitem = $(this).data("mlid");
$('.paddle-mega-dropdown[data-mlid=' + activeitem + ']').fadeIn("fast");
}
// normally the mouseleave event should be handled by ther hoverIntent script
// but in our case we need to handle it ourselves
function hoverOut() {
$('.menu-item[data-mlid], .paddle-mega-dropdown').mouseleave(function(e) {
var activeitem = $(this).data("mlid");
var targetElement = e.relatedTarget;
if ($(targetElement).closest('[data-mlid=' + activeitem + ']').length == 0) {
$('.paddle-mega-dropdown[data-mlid=' + activeitem + ']').fadeOut("fast");
}
});
}
but I guess that's not how the plugin is supposed to work..
This is a minor issue, experienced on Chrome 67, Linux.
When a button is given the attribute disabled="disabled"
you can "sneak up" on it, if you approach it very slowly it will fail to trigger the "over" event, and hence fail to trigger the "out" event too.
However, if you hover over the element quite quickly, it will trigger the correct events.
At first I though this was normal behaviour, since it seemed it would only trigger on "intent", but I cannot replicate this slow-fast difference in any other state (other than a disabled button), and normal behaviour appears to be that "over" should trigger immediately on any element.
Obviously this is something to do with the disabled attribute, but it doesn't seem like desired functionality to disable hoverIntent for this attribute, nor does that seem to be the case for the "quick" firing scenario.
However, a simple fix may be to declare that disabled is disabled, and you can just use styling to make the button appear disabled with a class if you don't want such functionality.
hoverIntent v1.9.0 // 2017.09.01 // jQuery v1.7.0+
jQuery JavaScript Library v1.12.4
jQuery UI - v1.12.1 - 2018-05-30
Bootstrap v3.3.7
My fix: luckily, bootstrap's .btn.disabled has the desired behaviour/style without the hoverIntent bug
Hi Brian
I've found a problem using superfish menu and it is due from your script
Do you want to have a look here?
i'm waiting your answer
thanks
bye
Hi, deprecated $.isFunction is used in the library. Can you please consider updating the code?
Here's some information about the deprecation https://api.jquery.com/jquery.isfunction/
Setting up hoverIntent with an object to access a dynamic element.
If this dynamic element is removed from dom while hovering (hadnlerIn is triggered and active) the handlerOut is never triggered.
In our case this result in a dropdown box frozen to the screen until refresh.
I am using hoverIntent to make a flyout menu. I wanted to give the user the option to close the flyout by clicking a "close" button as well as the normal way of hovering out.
I cant figure out how to cancel the hoverIntent_t timer as I am not sure how to access the property. I understand it would be contained within the function. I searched on stackoverflow and someone mentioned the hoverIntent timer id is saved as an attribute of the html object but every time I try to grab that property/attribute, it is undefined.
In the example below, if you click on the close button, you can see that the timeout is still running. I would like to learn a way to access that timeout id so I can clear it.
any help is appreciated.
As far as I can see it is impossible to install a specific version of hoverIntent with Bower. If I do:
$ bower install jquery.hoverIntent
it will install the latest version. Though, if I want to pin a version:
$ bower install jquery.hoverIntent#r7
or even:
$ bower install jquery.hoverIntent#v1.8.0
Bower will fail:
bower not-cached git://github.com/LeMisterV/jquery.hoverintent.git#r7
bower resolve git://github.com/LeMisterV/jquery.hoverintent.git#r7
bower ENORESTARGET Tag/branch r7 does not exist
Is it possible to fix this in order to be able to install older versions of hoverIntent (or just pin the current version)?
Hi,
I'm using hoverIntent for a menu system that incorporates a timeout for calling the 'out' handler. Closing and opening menus does not work as I'd expect. For two hover items A and B, if I move quickly from A to B to A again then I expect A to open, but it doesn't. There's a script to reproduce this issue on JSFiddle:
http://jsfiddle.net/d_ir/u31xjd5d/1/
From a quick look at the source, it would seem that the ob.hoverIntent_t does not get called for the mouseleave event on the first tab item.
I can workaround the issue by removing the "if (!ob.hoverIntent_s)" condition on line 101.
I'm not sure if this is something I'm doing wrong, or if this is a bug. Any help would be appreciated.
Thanks
Daniel
Bower is deprecated. ⚰️
So let's remove the bower.json file for v2.0.
It would be great..
I used to use this great plugin internally for this project.
Unfortunately, it was firing inadequately on mobiles (very late).
So I reverted to jQuery's hover
which fires much quicker but without the faulty behaviour of hoverIntent
.
Is it possible to patch this issue? I would love to revert back to hoverIntent
then...
HoverIntent blows away all previous initialisation.
Would it be possible to modify so it worked on injected items?
Just an idea.. when moving sideways across a horizontal navigation with many large submenus, It would be less jarring visually to have no delay between the over and out of each submenu.
In other words: hoverintent is useful on the first hover but once the cursor is in the menu there could be a setting to remove the delay ( and act like a normal hover ) between over and out based on if target has same class etc...
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library briancherne/jquery-hoverIntent
is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json
and change attributes.
{
"name": "briancherne/jquery-hoverIntent",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
The 'website' field on the repository home page is:
http://http//cherne.net/brian/resources/jquery.hoverIntent.html
I'm sure it should be:
http://cherne.net/brian/resources/jquery.hoverIntent.html
http://www.jsdelivr.com/#!jquery.hoverintent looks really outdated
Hi,
it would be nice to manipulate hoverIntent with jQuery's .on
syntax which offers namespacing and easy unbinding with .off()
. When there would be no listeners left, the bindings should be automatically removed to prevent memory leaks (no need for the manual destruction suggested in #43).
$(selector).on('hoverIntent.namespace' [, selector] , handlerIn, handlerOut);
// or
$(selector).on('hoverIntent.namespace' [, selector] , handlerInOut);
// and then
$(selector).off('hoverIntent.namespace');
// or
$(selector).off('.namespace');
It should be possible to hook on jQuery's event system to make it happen. Thank you
It would be good (also good plugin practice) to add a destroy()
method to remove the hoverIntent
bindings on an element or set of elements.
This would take a minimimal amount (3 unminified lines) of code, and the code has already been written here:
While it's possible to just direct users to the StackOverflow question, I think it would be better to include the method inside the plugin to avoid versioning issues in the future, as well as for the sake of promoting plugin modularity (allow for revokable methods).
thanks, this is a great plugin!
First level flyout works as expected, but touch event on second level loads the link, instead of the 3rd level flyout.
Your website still has 1.8.0 even though 1.8.1 has been released
I tried the following code but no luck
$(document).on('mouseenter.hoverIntent', element, function() {});
Any chance of including a minified version of the file?
That way I can skip a step in my grunt workflow, i.e. just copy the file straight to wherever I need it, rather than having to uglify it first.
Add an minified version of github it would be convenient for those who use bower.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.