5

my problem is following: I got a trigger(a) and a popup(div). The div doesn't lie nested inside the anchor.

  • When I hover over a, I want the div to show up.
  • When I go from a to the div, I want it to stay visible.
  • When I leave the div, I want it to close.
  • When I hover over a and leave without entering the div, I want the div to close.

I got most of that figured out, but now I'm struggeling with requierement no. 2. When checking for mouseleave on a, I check if there is a mouseenter on the div. If it is, I want to abort the mouseleave. If not, I want to close the div.

What am I doing wrong? Is this even the right way to do this?

Here's the markup:

<a href="#" class="popup_toggle" style='display:block;width:50px;height:50px;border:1px solid red;position:relative;'>Toggle</a>
<div class="popup_div" style='position:absolute;top:50px;left:0px;border:1px solid blue;display:none;'>Popup</div>

Here's the jQuery:

$('.popup_toggle').mouseenter(function() {
        var element = $(this).next('.popup_div');
        $.data(this, 'timer', setTimeout(function() {
            element.show(100);
        }, 500));
    });

    $('.popup_toggle').mouseleave(function() {
        clearTimeout($.data(this, 'timer'));
            if($('.popup_div').mouseenter==true)
            {
                return false;
            }
            else
            {
                $('.popup_div').hide(100)
            };
    });
axtavt
  • 239,438
  • 41
  • 511
  • 482
chabuya
  • 143
  • 1
  • 3
  • 10

3 Answers3

2

What you're trying to do is fairly simple. When entering the trigger, identify the panel (layer, popup, whatever), save reference to each other using .data() and have the event handlers check if the related targets are either the trigger (from the panel view) or the panel (from the trigger view). I threw something together. Have a look at the console log to see how this works… http://jsfiddle.net/rodneyrehm/X5uRD/

rodneyrehm
  • 13,442
  • 1
  • 40
  • 56
  • Thanks for your reply and for creating an example! But even after looking through it, I have no clue what you are doing there. I've got to admit that I have no previous experience in jQuery or programming in general, and I need to be able to maintain my own code should there arise problems when working with it. I can't say why the first answer is bad coding, but I'm going with this approach for now because I can actually understand it :) – chabuya Oct 11 '11 at 13:54
1

That will most likely not work...no. I would suggest that you add a mouseenter and mouseleave callback to you <div> element as well and have them set a global variable that tells your other callbacks how to handle their events, i.e. "if global variable is true, don't hide the popup on mouseleave, otherwise hide popup" or something like this.

The other approach would be to check whether the mouse is inside the popup when the mouseleave callback tries to hide the popup. That might be much more work than it is worth though.

Till Helge
  • 9,253
  • 2
  • 40
  • 56
  • Thanks for the fast reply, I tried it with global variables and a new timer and it works like a charm! – chabuya Oct 11 '11 at 11:32
  • -1 for suggesting global variables and failing to note event.relatedTarget. Sorry. – rodneyrehm Oct 11 '11 at 12:03
  • Well...relatedTarget works only, if you were to immediately enter the popup when leaving the link, right? As axtavt explicitly stated that the popup is **not** part of the link, I refrained from assuming that they are direct neighbours. – Till Helge Oct 11 '11 at 12:07
1

I believe the problem with your implementation is that the mouseenter on the div will fire shortly after the mouseleave from the a.

This would give you something like:

$('.popup_toggle').mouseenter(function() {
    // Clear any pending "hide" timer
    // Set a show timer
});

$('.popup_toggle').mouseleave(function() {
    // Clear any pending "show" timer
    // Set a hide timer
});

$('.popup_div').mouseenter(function() {
    // Clear any pending "hide" timer
});

Note that you'll have to make sure that you access the same timer from both the .popup_toggle event and the .popup_div event. You may want to consider using Ben Alman's doTimeout plugin to help with this. It (usually) results in much clearer code than manually working with setTimeout/clearTimeout.

zjs
  • 668
  • 4
  • 6