How to use hoverIntent plugin?

Question

I'm new to jQuery and want to add the hoverIntent plugin to my site as my navigation menu. I have been referred to Brian Cherne's site and see the code to download, but I'm not quite sure how to put it all together to make it work.

Can someone post a sample of what the HTML code should look like with the appropriate hoverIntent plugin code added in? Or refer me to a reference?

I'd be most appreciative! Thanks!

Answer 1

hoverIntent plugin follows the same exact api signature of the jQuery hover method. You can get usage examples at http://cherne.net/brian/resources/jquery.hoverIntent.html, just look at the source code.

First include jQuery into the head:

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>

after that download and include hoverIntent plugin:

<script type="text/javascript" src="path/to/jquery.hoverIntent.js"></script>

then you can use hoverIntent() method on any jQuery element like this

$(element).hoverIntent(whatToDoWhenHover, whatToDoWhenOut);

element is a jQuery selector like '#id' or '.class' or 'div > .something', whatToDoWhenHover and whatToDoWhenOut are functions that will be executed when the user starts hovering the element and when he stops. Just like old good jQuery hover.

Example

Answer 2

if you wish to use hoverIntent functionality without being dependent to jQuery, you can use the Pure JavaScript ES6 version of it (or convert it to es5 with ease).

const hoverIntent = (el, onOver, onOut) => {
    let x;
    let y;
    let pX;
    let pY;
    const h = {};
    let state = 0;
    let timer = 0;

    let options = {
        sensitivity: 7,
        interval: 100,
        timeout: 0,
        handleFocus: false,
        overClass: 'hovered'
    };

    const delay = e => {
        if (timer) timer = clearTimeout(timer);
        state = 0;
        if (onOut) {
            return onOut.call(el, e);
        }
        el.classList.remove(options.overClass);
        return false;
    };

    const tracker = e => {
        x = e.clientX;
        y = e.clientY;
    };

    const compare = e => {
        if (timer) timer = clearTimeout(timer);
        if (Math.abs(pX - x) + Math.abs(pY - y) < options.sensitivity) {
            state = 1;
            if (onOver) {
                return onOver.call(el, e);
            }
            el.classList.add(options.overClass);
            return false;
        }
        pX = x;
        pY = y;
        timer = setTimeout(() => {
            compare(e);
        }, options.interval);
        return false;
    };

    // Public methods

    const dispatchOver = e => {
        if (timer) timer = clearTimeout(timer);
        el.removeEventListener('mousemove', tracker, false);

        if (state !== 1) {
            pX = e.clientX;
            pY = e.clientY;

            el.addEventListener('mousemove', tracker, false);

            timer = setTimeout(() => {
                compare(e);
            }, options.interval);
        }

        return this;
    };

    const dispatchOut = e => {
        if (timer) timer = clearTimeout(timer);
        el.removeEventListener('mousemove', tracker, false);

        if (state === 1) {
            timer = setTimeout(() => {
                delay(e);
            }, options.timeout);
        }

        return this;
    };

    if (el) {
        el.addEventListener('mouseover', dispatchOver, false);
        el.addEventListener('mouseout', dispatchOut, false);
    }

    h.options = opt => {
        options = { ...options, ...opt };
        return h;
    };

    h.remove = () => {
        if (!el) return;
        el.removeEventListener('mouseover', dispatchOver, false);
        el.removeEventListener('mouseout', dispatchOut, false);
    };

    return h;
};

usage:

const menuEl = document.querySelector('.menu');
hoverIntent(menuEl);

this will add "hovered" class to menu element, then you can use plain CSS to enable/disable child-dropdown-boxes when parent-menu-item is hovered

• TIP: instead of running hoverIntent for each menu-items; running it only for 1 element (i.e: menu-wrapper element) and adding simple CSS hover rule for parent-menu-items elements to display dropdown boxes; based on menu-wrapper has already been hovered or not, will be much more performance efficient ;) *

The css will be something similar to;

.menu.hovered .parent-li:hover {
    background-color: #f4f4f4;
}
.menu.hovered .parent-li:hover .child {
    display: block;
}

I created a playground, see the live demo:

https://codepen.io/mcakir/full/OJVJmdV

Advanced usage: hoverIntent method accepts onOver and onOut as well as to be extended options.

example:

const onOverHandler = () => {
    console.log('mouse in!');
    // do something
}
const onOutHandler = () => {
    console.log('mouse out!');
    // do something
}
const customOptions = () => {
    sensitivity: 7,
    interval: 300,
    timeout: 200,
}
const menuEl = document.querySelector('.menu');
hoverIntent(menuEl, onOverHandler, onOutHandler).options(customOptions);