Change WMODE with jQuery

November 10, 2009 | Posted by: Fredrik | Tags: 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>

Comments

comments powered by Disqus