Best way to show / hide a menu

[Shane McCarron]

I have a menu of operations (shown as icons) that I want to reveal when the user move their mouse over a region.  Prototype's event handling + scriptaculous gives me great ways to do this.  However, I want to menu (a floating div) to disappear when:

1. Some time has elapsed and the user never moved into the menu.
2. The user moves into the menu and then moves out of it.
3. The user selects an item in the menu.

These all seem pretty easy to accomplish, but I keep running into weird edge conditions.  Like if the user exposes the menu, moves the cursor into the menu, and then minimizes all the windows on the screen (Windows-D), then reveals the browser window... in my implementation the menu is still down even though it no longer has focus!

It occurs to me that this is most likely a solved problem.  Probably solved over and over and over.  So... can anyone recommend a simple solution that will just handle all these edge conditions for me?  Or recommend an idiom I can implement myself that will avoid the weird cases?

Thanks!

--
Shane McCarron
halin...@gmail.com

[Tom Gregory]

I'll go for the last option ("recommend an idiom I can implement
myself that will avoid the weird cases").

It sounds like you're trying to make your page behave like a desktop
app. Don't.

One (significant) reason is that by focusing on enter/leave, you're
automatically dropping support for mobile browsers.

Simply do a pushbutton toggle instead. If there's a click, open it up.
If a second click not in the popup, hide. This can still fail in
mobile, depending on how it's implemented. (sometimes a popup is on
the page, but not on he screen, and scrolling/resizing to find it
closes it. Infuriating.)

Even better: find a way to expose the information without a popup,
such as a slide down reveal or cover flow or some such. (Without
knowing your context, it's hard to make good recommendations.)

Bottom line: stay away from enter/leave unless you really, really need
to. It's not a technical answer, but I hope it is a practical one.


TAG

On Jul 11, 2:45 pm, Shane McCarron <halindr...@gmail.com> wrote:
> I have a menu of operations (shown as icons) that I want to reveal when the
> user move their mouse over a region.  Prototype's event handling +
> scriptaculous gives me great ways to do this.  However, I want to menu (a
> floating div) to disappear when:
>

>    1. Some time has elapsed and the user never moved into the menu.
>    2. The user moves into the menu and then moves out of it.
>    3. The user selects an item in the menu.

>
> These all seem pretty easy to accomplish, but I keep running into weird edge
> conditions.  Like if the user exposes the menu, moves the cursor into the
> menu, and then minimizes all the windows on the screen (Windows-D), then
> reveals the browser window... in my implementation the menu is still down
> even though it no longer has focus!
>
> It occurs to me that this is most likely a solved problem.  Probably solved
> over and over and over.  So... can anyone recommend a simple solution that
> will just handle all these edge conditions for me?  Or recommend an idiom I
> can implement myself that will avoid the weird cases?
>
> Thanks!
>
> --
> Shane McCarron

> halindr...@gmail.com

[pedz]

That helped me!  One question:

Would this apply to "hover" as well?  (i've let to own a smart phone.)  i.e. stay away from hover?

[Eric]

You can see what events are managed by mobile browsers on this page:
http://www.quirksmode.org/m/table.html

Also note that mobile browsers have special events like the ones on
http://www.quirksmode.org/mobile/tableTouch.html

Kangax had a very nice events testing page which seems to be offline
(http://yura.thinkweb2.com/isEventSupported/)

Eric