Codementor Events

Fix- Flash object overlap other html element in IE browser

Published Jul 14, 2021

Few days back I got one issue while developing a asp.net web application. The issue is related to flash object was being hiding the modal popup. I got the resolution on internet but that was not efficient as we have to add wmode param to every flash object. If flash object has been embed from server side code e.g, in case of fusionchart then its a headache.
Finally, I got one JavaScript function which will do the job without adding wmode param manually in the flash object. It searches the flash object on the whole page and add wmode param for all the flash objects on page

    // loop through every embed tag on the site

    var embeds = document.getElementsByTagName('embed');

    for (i = 0; i < embeds.length; i++) {

        // everything but Firefox & Konqueror

            var html = embed.outerHTML;

            // replace an existing wmode parameter

            if (html.match(/wmode\s*=\s*('|")[a-zA-Z]+('|")/i))

                new_embed = html.replace(/wmode\s*=\s*('|")window('|")/i, "wmode='transparent'");

            // add a new wmode parameter

                new_embed = html.replace(/<embed\s/i, "<embed wmode='transparent' ");

            // replace the old embed object with the fixed version

            embed.insertAdjacentHTML('beforeBegin', new_embed);

            embed.parentNode.removeChild(embed);

            // cloneNode is buggy in some versions of Safari & Opera, but works fine in FF

            new_embed = embed.cloneNode(true);

            if (!new_embed.getAttribute('wmode') || new_embed.getAttribute('wmode').toLowerCase() == 'window')

                new_embed.setAttribute('wmode', 'transparent');

            embed.parentNode.replaceChild(new_embed, embed);

    // loop through every object tag on the site

    var objects = document.getElementsByTagName('object');

    for (i = 0; i < objects.length; i++) {

        // object is an IE specific tag so we can use outerHTML here

            var html = object.outerHTML;

            // replace an existing wmode parameter

            if (html.match(/<param\s+name\s*=\s*('|")wmode('|")\s+value\s*=\s*('|")[a-zA-Z]+('|")\s*/?\>/i))

                new_object = html.replace(/<param\s+name\s*=\s*('|")wmode('|")\s+value\s*=\s*('|")window('|")\s*/?\>/i, "<param name='wmode' value='transparent' />");

            // add a new wmode parameter

                new_object = html.replace(/</object\>/i, "<param name='wmode' value='transparent' />\n</object>");

            // loop through each of the param tags

            var children = object.childNodes;

            for (j = 0; j < children.length; j++) {

                    if (children[j] != null) {

                        var theName = children[j].getAttribute('name');

                        if (theName != null && theName.match(/flashvars/i)) {

                            new_object = new_object.replace(/<param\s+name\s*=\s*('|")flashvars('|")\s+value\s*=\s*('|")[^'"]*('|")\s*/?\>/i, "<param name='flashvars' value='" + children[j].getAttribute('value') + "' />");

            // replace the old embed object with the fixed versiony

            object.insertAdjacentHTML('beforeBegin', new_object);

            object.parentNode.removeChild(object);

call above function in $(document).ready(function)

Original blog available at https://www.codinghelp.online/2015/02/fix-flash-object-overlap-other-html.html

Discover and read more posts from umesh chand
get started
post commentsBe the first to share your opinion
Show more replies