Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use hoverIntent plugin?

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!

like image 694
Ashley Avatar asked Mar 06 '13 02:03

Ashley


People also ask

What is hoverIntent?

hoverIntent is a plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! It is similar to jQuery's hover method. However, instead of calling the handlerIn function immediately, hoverIntent waits until the user's mouse slows down enough before making the call.


1 Answers

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);
like image 146
Must Ckr Avatar answered Oct 11 '22 12:10

Must Ckr