ModalBox and Flash Issue Solution

I have been trying to adapt Andrej Okonetschnikow’s ModalBox for use on our site at Fylmz.com. We were having some issues with the many Flash objects on our site displaying above the modalbox or flickering through the overlay. This is pretty typical and is something that many of the modal solutions faced with HTML select boxes in IE.

The common solution for this was to set the “wmode” for the Flash objects to “transparent.” This would make the Flash objects obey the z-order for all the objects on the page and consequently ModalBox would work correctly. There’s a problem here though. On Mac, when one uses “wmode = transparent” for Flash objects, some serious bugginess appears in the Flash player.

We experienced weird mouse behaviors and odd movie flickering and resolution issues with symbols within the movies. All of these problems only appeared on the Mac in Safari, Camino, and Firefox with versions 8 and 9 of the Flash player and disappeared when we got rid of the “wmode = transparent” parameter for the movies.

So, here’s the solution I came up with that provided us an acceptable result. It does not “solve” the problem, but was an acceptable compromise for us.

First, we detected whether the user was on Mac or Windows.

If they are on Windows, I dynamically write “wmode=transparent” for the Flash
objects in the page and ModalBox displays above them as expected.

If they are on Mac, the wmode is NOT set to transparent. I wrote a small function in modalbox.js to hide or show the Flash object which looks like this (adapted from Lightbox Gone Wild):

// For Mac browsers -- hiding all FLASH elements
        _hideFlash: function(visibility) {
             if (navigator.appVersion.indexOf("Mac") > 0)
                {
                flashes = document.getElementsByTagName("object");
                    for(i = 0; i < flashes.length; i++) {
                            flashes[i].style.visibility = visibility;
                    }
                flashes2 = document.getElementsByTagName("embed");
                    for(i = 0; i < flashes2.length; i++) {
                            flashes2[i].style.visibility = visibility;
                    }
             }
        }

It’s a hack and can be done better, but it works and I just wanted to prove that it was possible. This function would be called in the “show” and “_deinit” function of modalbox.js:

this._hideFlash('hidden');
or
this._hideFlash('visible');

All of this results in the ModalBox working fine in Firefox and IE on Windows and Firefox and Safari on Mac. The Flash movie will disappear on Mac and will start playing from the beginning each time the box is displayed in Firefox, but these are things we can live with. Your concerns will be different.

I know this is not the clearest write-up, but it seemed that a lot of folks are struggling with this so I wanted to post it quickly. Comment or email with questions and I will try to help.

Advertisements

  1. Rob

    Could it be that IE7 does not support this? I removed the OS check to always FLASH objects, but IE7 refuses to do it – the FLASH layers stay where they are and do not fade. Can you help?

    best,

    Rob.

  2. MOMO

    hi
    wich is the right file that i can put the code & in wich place exactelly




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s



%d bloggers like this: