CODEWITHSUNDEEP
jquerypopup
Luca Guglielmi
Luca Guglielmi

Reputation: 11

On hover popup, with a menu

i was asked about the most elegant solution to code something like this in jquery

http://jsfiddle.net/lucaguglielmi/z3PKm/

Of course with the mouse you should be able to hover on the popup and click on one button.

Elegant means clean code with good perfrmace and maximum usability, with no mouse over / out bug. The user should have some time to come back to the popup if he mouse hover for error and no other plugin then jquery.

We can also change the HTML but the 3 button must stay.

Any suggestion about how to proceed? Using a timer maybe?

Thank in advance

Upvotes: 1

Views: 5592

Answers (2)

Ethan Brown
Ethan Brown

Reputation: 27282

My experience with UX elements like this is that it will lead to user frustration; so you may want to re-consider your approach altogether so that there's another way of displaying your two buttons that doesn't depend on hovering over an element. The other argument in favor of refactoring your design is that it won't work on a touch device like a tablet or a phone, since there's no concept of "hover".

However, if you do want to do it, using a timer is your best option, I think. Alex's solution works by removing the gap between the button and the container, but that can lead to frustration too: for example, if the user's mouse was over the button and then went diagonally up to the now-visible container, passing over the background first, the container would disappear. Also, it may not be desirable from a design perspective to remove the visual gap between the two elements.

It's not a simple matter of just using setTimeout, however, because if you hover over the button, then go up to the popup, it'll still disappear if you're not quick enough at pressing any buttons. So you have to also use clearTimeout when they enter the popup and, presumably, hide the popup when they leave it. So, here's what you need:

First, declare a variable to hold the timeout ID (I used a global variable for simplicity's sake, but you may want to use a property on one of your elements instead):

var hidePopupTimeoutId;

Then modify your .choose events like so:

$(".choose").live("mouseover", function () {
    // no need to check if hidePopupTimeoutId is undefined; clearTimeout
    // will fail silently
    clearTimeout( hidePopupTimeoutId );
    $(".popup").show();
});


$(".choose").live("mouseout", function () {
    // we don't hide the popup immediately, but give the user a reasonable
    // amount of time to mouse over it
    hidePopupTimeoutId = setTimeout( function() {
        $(".popup").hide();
    },500);
});

Note that we had to clear the timeout on the mouseover event: otherwise if you mouse over the button, mouse out, and then mouse back over, it will disappear, even though your mouse is over the button!

Next, we add some logic to make sure the popup stays visible if the mouse is over it:

$(".popup").live("mouseenter", function() {
    clearTimeout( hidePopupTimeoutId );
});


$(".popup").live("mouseleave", function() {
    $(".popup").hide();
});​

Note that we use jQuery's mouseenter and mouseleave events instead of mouseover and mouseout; this is because mouseout will get called when you hover over one of the popup's child elements (like the button) and the popup will disappear!

And there you have it. Here's a jsFiddle demonstrating: http://jsfiddle.net/z3PKm/15/

Upvotes: 0

Xhynk
Xhynk

Reputation: 13840

http://jsfiddle.net/z3PKm/12/

Add some pop-up rules to the popup menu itself (and it has to be touching the button) (use a div wrap to make it transparent and be further above the button) - or use a timeout function off of the .choose

This is the easiest solution I think

Upvotes: 1

Related Questions