Question

I a have a menu, which on rollover shows a div which is not a child of the menu and when you roll off it hides that div again. The div is placed directly below the menu item, mimicking a submenu.

the html looks something like this –

Here is my menu –

<div id="nav">
<ul>
    <li class='with_panel'>
      <span id='panel1' class='current'><img src='theImage' /></span>
    </li>
    <!-- more list items -->
</ul>
</div>

In an unrelated div, I have this –

<div id="panels">
     <div style="" id="panel1_panel" class="panel">
        <img src="myImage.png">
     </div>
<div>

I have some jquery that shows and hides the related panel when you rollover the li –

$("#nav .with_panel").mouseenter(function(){
    var id = $(this).find("span").attr("id");
    $(".panel").removeClass("open");
    $panel = $("#" + id + "_panel");
    $panel.addClass("open");
    $img = $(this).find("span img");
    $img.addClass("on");
    var hide = function(){
    if(!$panel.is(":hover")){
            $img.removeClass("on");
            $panel.removeClass("open");
        }
    }

    $panel.mouseleave(hide);
    $(this).mouseleave(hide);   
})

This only seems to work in Chrome, and I’m fairly certain it’s due to ie & Firefox not recognising .is(“:hover”).

I can’t change the html structure, only the javascript. So I’m struggling on getting it to work cross browser. Any ideas?

Answer 1

The following code gives you 200 ms timeout (hide_to) to leave the menu and enter your panel before hiding it. Works the other way too. If you mouseenter the menuitem or the panel the timeout for the hiding is cancelled, and restarted when the mouse leaves any of them.

$("#nav .with_panel").each(function() {
    var id = $(this).find("span").attr("id"),
        $panel = $("#" + id + "_panel"),
        $img = $(this).find("span img"),
        hide_to = null;

    var hide = function() {
            // start hide timeout
            hide_to = window.setTimeout(function () {
                $img.removeClass("on");
                $panel.removeClass("open");
            },200);
        };

    var show = function() {
            // clear hide timeout
            window.clearTimeout(hide_to);
            if (!$panel.is(".open"))
            {
                // open panel, only if it is not open already
                $(".panel").removeClass("open");
                $panel.addClass("open");
                $img.addClass("on");
            }
        };

    $(this).mouseenter(function() {
        show();
    }).mouseleave(function() {
        hide();
    });

    $panel.mouseenter(function() {
        show();
    }).mouseleave(function() {
        hide();
    });
});