Using jQuery to Build a Better Flash Fly-Down Nav
It seems simple, but one of the most troublesome tasks is to get a Flash fly-down (or drop-down) menu to reliably collapse when it sits over non-Flash content. Some browsers (IE) have trouble recognizing the change of control from the Flash Player application instance to the browser. For that reason Flash won’t always read when the mouse has moved outside the bounds of the Flash Player… worse still – it just receives no notification at all, which means that if you’re relying on Flash to read when the mouse has moved outside the bounds of the navigation – you’re out of luck.
Over the years I’ve come up with many tricks to help deal with this – some more effective than others. Today I found the best solution to date. It’s not 100% effective, but it’s much better than any of the other options that I used.
I decided to try using the jQuery hover method to detect when the mouse leaves the Flash’s containing DIV element in the DOM.
The AJAX code looked something like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | $('document').ready(function() { $('#flashNavReplace').hover( function() { //rollover functionality here }, function() { getFlashMovie("flashNavReplace").jsCloseNavigation(); }); }); function getFlashMovie(movieName) { var isIE = navigator.appName.indexOf("Microsoft") != -1; return (isIE) ? window[movieName] : document[movieName]; } |
and then the Flash side uses some code like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import flash.external.ExternalInterface; /************************************************************************** * * CONSTRUCTOR * **************************************************************************/ public function TopNavigation() { //setup the JS callback ExternalInterface.addCallback("jsCloseNavigation", jsClose); } function jsClose():void { Logger.log("CALLED FROM JS"); //close the nav } |
This works for me pretty much all of the time… I can break it if I really try, but it works great for normal usage.