Implementing Hover Intent

Question

I just finished developing this Wordpress theme: http://www.minnesdiner.com/

Everything is working well, but I'm not 100% happy with the navigation. The sliding position indicator works smoothly, but I'd like to integrate the hover intent jQuery plugin to prevent the sliding indicator from sliding when the user unintentionally passes over the nav.

Any ideas as to how I could integrate this plugin? I'm currently firing a separate jQuery function for each nav item and passing coordinates to the sliding indicator based on which item is being hovered upon.

Here's my current jQuery code:

 $(document).ready(function() {

        var $currentpos = $("#menu-indicator").css("left");
        $("#menu-indicator").data('storedpos', $currentpos);

        $(".current-menu-item").mouseenter(function () {
        $("#menu-indicator").stop().animate({left: $currentpos}, 150);
        });
        $(".menu-item-26").delay(500).mouseenter(function () {
        $("#menu-indicator").stop().animate({left: "52px"}, 150);
        });
        $(".menu-item-121").mouseenter(function () {
        $("#menu-indicator").stop().animate({left: "180px"}, 150);
        });
        $(".menu-item-29").mouseenter(function () {
        $("#menu-indicator").stop().animate({left: "310px"}, 150);
        });
        $(".menu-item-55").mouseenter(function () {
        $("#menu-indicator").stop().animate({left: "440px"}, 150);
        });
        $(".menu-item-27").mouseenter(function () {
        $("#menu-indicator").stop().animate({left: "570px"}, 150);
        });
        $(".menu-item-164").mouseenter(function () {
        $("#menu-indicator").stop().animate({left: "760px"}, 150);
        });

        $delayamt = 400;
        $("#header-row2").click(function () {
        $delayamt = 5000;
        });
        $("#header-row2").mouseleave(function () {
        $("#menu-indicator").stop().delay($delayamt).animate({left: $currentpos}, 600);
        });

});

As you can see, I need to bind mousover and mouseout to separate elements (list-item and containing div).

Thanks!

Post your code, please. I've implemented something similar in another question, see if that helps: http://stackoverflow.com/questions/5697718/jquery-menu-hover/5697749#5697749 — Ortiga, Apr 28 '11 at 04:33

colinmarc · Accepted Answer · 2011-04-28T05:29:26.807

5

If all you want to do is avoid the user triggering the slide by mousing over the nav, I would just setTimeout in your hover function to call your sliding code after a certain amount of time has passed, and clear the timeout on the mouseout event. No extra plugin needed.

For example:

var hover_timer;
$('.menu-item').hover(
    function() {
        hover_timer = setTimeout(function() { 
            ... 
        }, 500);
    },
    function() { clearTimeout(hover_timer); }
);

EDIT: by the by, you should be combining all those hover functions into one. You can do something like:

$('.menu-item-26').data('slider-pos', '52px');
$('.menu-item-121').data('slider-pos', '180px');
...

And then in the code to slide, call it back:

$this = $(this);
$('#menu-indicator').stop().animate({left: $this.data('slider-pos')}, 150);

And that's just a start - you can generalize it even more, I bet.

edited Apr 28 '11 at 05:29

answered Apr 28 '11 at 04:30

colinmarc

2,421
1
22
34

Thanks! That seems like a good solution. Will I need to create a separate hover_timer variable for each menu item? – coryetzkorn Apr 28 '11 at 04:36
Ok... I tried to implement it. Anything look wrong here? http://www.minnesdiner.com/wp-content/themes/minnes_diner/inc/navigation_slider.js – coryetzkorn Apr 28 '11 at 05:01
you're only attaching the handler to `menu-item-26`. try `$('.menu-item')` instead – colinmarc Apr 28 '11 at 05:05
(ignore the comment that I just deleted :) – colinmarc Apr 28 '11 at 05:12
@coryetzkorn - eek, sorry, I had the arguments for `setTimeout` switched. Should work now. – colinmarc Apr 28 '11 at 05:30
I think we're close! http://www.minnesdiner.com/wp-content/themes/minnes_diner/inc/navigation_slider.js – coryetzkorn Apr 28 '11 at 05:44
Yup! so, the scope of `$list_item = $(this)` is wrong. You need to set it outside of the `setTimeout` function, just one level above. The reason is that inside `setTimeout`, `this` actually refers to `window`. – colinmarc Apr 28 '11 at 05:56
Beautiful! Thanks so much for your help. The site is now 100% how I imagined. Rock on! – coryetzkorn Apr 28 '11 at 06:07

Implementing Hover Intent

1 Answers1