Determine User Intent Using Vanilla JavaScript | sv-hover-intent

sv-hover-intent is a javascript plugin to handle mouse movements on delay. It keeps track of when the mouse movement is slow enough that the user likely intends to activate this item.

It’s useful for things like dropdowns, to avoid them appearing if you happen to overrun them (eg when you close a browser tab). See demo.html for an example.

This is basically a vanilla JavaScript port of the excellent jQuery-hoverIntent plugin by Brian Cherne, although it has been rewritten from the ground up.

Read More – Hover Intent Detection jQuery Plugin | hoverIntent

How to make use of it:

1. Load the sv-hover-intent javascript library within the doc.

<script src="sv-hover-intent.js"></script>

2. Attach the HoverIntent to your component (a dropdown menu for instance) and set off capabilities on mouseenter or mouseleave.

var dropDown = document.querySelectorAll('.dropDown');
var instance = new SV.HoverIntent(dropDown, {
    onEnter: function(targetItem) {
      // called on mouseenter with intent
    },
    onExit: function(targetItem) {
      // call on mouseleave after timeout
    },
});

3. Determine the time to attend earlier than triggering the exit function.

var dropDown = document.querySelectorAll('.dropDown');
var instance = new SV.HoverIntent(dropDown, {
    onEnter: function(targetItem) {
      // called on mouseenter with intent
    },
    onExit: function(targetItem) {
      // call on mouseleave after timeout
    },
    exitDelay: 500
});

4. Determine the polling interval for mouse monitoring.

var dropDown = document.querySelectorAll('.dropDown');
var instance = new SV.HoverIntent(dropDown, {
    onEnter: function(targetItem) {
      // called on mouseenter with intent
    },
    onExit: function(targetItem) {
      // call on mouseleave after timeout
    },
    interval: 200
});

5. If the mouse travels fewer than this variety of pixels between polling intervals, then the “over” function will likely be referred to as.

var dropDown = document.querySelectorAll('.dropDown');
var instance = new SV.HoverIntent(dropDown, {
    onEnter: function(targetItem) {
      // called on mouseenter with intent
    },
    onExit: function(targetItem) {
      // call on mouseleave after timeout
    },
    sensitivity: 7
});

Determine User Intent, sv-hover-intent Plugin/Github

sv-hover-intent-demo


See Demo And Download

Official Website(svivian): Click Here

This superior jQuery/javascript plugin is developed by svivian. For extra Advanced Usage, please go to the official website.

Share