Question

I have an iframe with a flash clip inside that’s occupying the full window, outside the iframe I have a div that serves as a menubar above the iframe, which has dropdown menu’s.

Now the challenge is to make these dropdown menu’s appear on mouseover but hide when the visitor interaces with the flash / iframe.

I can easily detect whether this is the case by checking document.activeElement, however the problematic part is detecting when they “aren’t” using flash. What I’m doing now is simply detecting mouse movement on the main window, then resetting activeElement by calling top.focus(), (document.activeElement.blur() does not work on Chrome for some reason). The problem is that after doing this it won’t set the activeElement back to the iframe again when the user interacts with it, almost as if top.focus() sets activeElement to “body” indefinitely.

Any idea’s on how I can do this properly?

In a nutshell, I need to take focus away from an iframe when the main window is being interacted with, and then set focus back to the iframe when it’s being interacted with (which should be the browsers default behaviour).

Thanks

Edit:

jsFiddle to showcase the problem: http://jsfiddle.net/tvc3S/

Note that without Flash it works fine.. not sure if there’s a way around this..

Answer 1

Boy I sure was making things far more complicated than necessary, simply detecting mouseover and mouseout events on the iframe did the job..

http://jsfiddle.net/89s7q/

Of course this uses the hover events rather than focus events, which makes for a slightly different experience, but it’s fine for what I’m doing.