Change WMODE with jQuery

November 10, 2009 Javascript Flash jQuery Snippet

Ever needed to change the WMODE of a Flash object at a runtime? This problem occured in a CMS I'm working with. All embedded Flash objects get WMODE Window by default, meaning they would block all other HTML-elements. It wasn't possible to change them on the server side, so only client side javascript remained as a possible solution. Changing the EMBED-tag in FireFox is really easy, one row needed. However Internet Explorer required some extra work. Apperantly EMBED-element was resistant against setting WMODE through attributes.

<script type="text/javascript">
    
    // FireFox is easy to handle
    $("embed").attr("wmode", "opaque");
    
    // IE requires more work
    $(document).ready(function() {
        var embedTag;
        $("embed").each(function(i) {
            embedTag = $(this).attr("outerHTML");
            if ((embedTag != null) && (embedTag.length > 0)) {
                embedTag = embedTag.replace(/embed /gi, "embed wmode=\"opaque\" ");
                $(this).attr("outerHTML", embedTag);
            }
        });
    });
   
</script>

A short note about the IE specific code. I take no notice of existning WMODE-attributes. You might want to strip existing WMODES first before appending the new one to the EMBED-tag.

EDIT:
Okay, thing ain't always as easy as the seem to. A page in FireFox with lots of graphics would require another approach (only change is that the EMBED-tag is wrapped by a DIV inside the for-loop (originally for IE)):

<script type="text/javascript">

// FireFox
$j("embed").attr("wmode", "opaque");

$j(document).ready(function() {
    // IE
    var embedTag;
    $j("embed").each(function(i) {
        embedTag = $j(this).attr("outerHTML");
        if ((embedTag != null) && (embedTag.length > 0)) {
            embedTag = embedTag.replace(/embed /gi, "embed wmode=\"opaque\" ");
            $j(this).attr("outerHTML", embedTag);
        }
        // This "else" was added
        else {
            $j(this).wrap("<div></div>");
        }
    });
});

</script>

Change WMODE with jQuery

Related posts:

Comments