Flash on top of jQuery dialog

Question

I know many have asked this question, but I think my situation is a little bit different.

I have a site where I have some ads which is Flash hidden in a because of xhtml/html compatibility issues. But the flash elements is on top of my jQuery dialogs which is not ideal.

Some solutions have suggested setting wmode to opaque but I can't because my ads are scripts which outputs flash elements.

Another solution suggested hiding ads when a dialog is shown. So my question is: Is there a way to put flash content behind my jQuery dialogs while they are visible and without altering the flash code?

Best regards, Lasse Espeholt

Update: I have now reopned the question with a bounty. As for now, I hide every Flash ad on "show dialog". But this is still not an optimal solution. So, I'm looking for a script which can make every Flash animation to opaque (a jQuery solution would be nicest, but a plain JavaScript solution will do). Or if there should be another solution not discussed in this question, I'll be happy to hear about it :)

Update 2: So far, I have made this script:

function opaqueAllFlashMovies() {
    // Embed Flash movies
    $('embed[wmode!="opaque"]').attr('wmode', 'opaque').wrap('<div>');

    // Object flash movies with a wmode param
    $('object[classid$="-444553540000"] parem[wmode]').attr('value', 'opaque');
    // Object flash movies without a wmode param
    $('object[classid$="-444553540000"]').not('param[wmode]').append('<param name=\'wmode\' value=\'opaque\'/>').wrap('<div>');
}

which works in FF and Chrome but not in IE. Apparently, .append fails. Any ideas?

Answer 1

You can't put HTML in front of Flash unless you set wmode to opaque (or transparent).

With the default wmode ("window") the Flash Player takes over all rendering and user interaction in its area. So the browser can't display any HTML in that area. What wmode=" opaque" (or wmode="transparent") does is that it disables this default behavior and kind of integrates the Flash Player area in the browsers usual rendering and layering and such.

But you don't need to alter any Flash content to set wmode, since it is done in the HTML (or via SWFObject or other script that inserts the Flash object element) so if you have control over the "scripts which outputs flash elements" that you mention, you can take care of the wmode setting there.

Answer 2

i think i have a solution. Using the jquery-ui dialog, Spent hours and hours trying to figure this out - worked for me,

Logic was if i can't make the jquery go front, make all flash content go back. research took me to this link - finally finally it worked.

How do I programmatically set all <object>'s to have the wmode set to opaque?

function makeObjectsOpaque3() {
    var elementToAppend = document.createElement('param');
    elementToAppend.setAttribute('name', 'wmode');
    elementToAppend.setAttribute('value', 'opaque');
    var objects = document.getElementsByTagName('object');
    for(var i = 0; i < objects.length; i++) {
        var newObject = objects[i].cloneNode(true);
        elementToAppend = elementToAppend.cloneNode(true);
        newObject.appendChild(elementToAppend);
        objects[i].parentNode.replaceChild(newObject, objects[i]);
    }
}

window.onload = makeObjectsOpaque3;

and

if(window.onload) {
    var onLoad = window.onload;
    window.onload = function() {
        onLoad();
        makeObjectsOpaque3();
    };
} else {
    window.onload = makeObjectsOpaque3;
}

Answer 3

How about manually setting wmode to opaque with javascript after the flash has already loaded?

Answer 4

I have just read this post and tried to add parameter wmode="opaque" in an object tag. It works for IE 8. I'm sorry if my post is too late.