SWF is covering the HTML objects such as floating DIV? Here is the solution.

Ok, simply I will write the chronology.

I have a SWF. Then below I put a javascript datepicker that will overlaying the SWF. But, what happen? The datepicker is always below the SWF!

This is the script I get from here : http://www.nobilesoft.com/Scripts/fix_wmode2transparent_swf.js

On that script there is a script that referring to ajax.googleapi, you just need to comment it if you develop your website in offline mode.

If you lazy enough to click that link, copy paste:

// JavaScript Document

function LJQ() {
var sc=document.createElement('script');
sc.type='text/javascript';
sc.src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js';
sc.id = 'script1';
sc.defer = 'defer';
document.getElementsByTagName('head')[0].appendChild(sc);
window.noConflict = true;
window.fix_wmode2transparent_swf();
}

if(typeof (jQuery) == "undefined") {
if (window.addEventListener) {
 window.addEventListener('load', LJQ, false);
} else if (window.attachEvent) {
 window.attachEvent('onload', LJQ);
}
}
else { // JQuery is already included
window.noConflict = false;
window.setTimeout('window.fix_wmode2transparent_swf()', 200);
}

window.fix_wmode2transparent_swf = function  () {
// jQuery(document).ready(function() {
if(typeof (jQuery) == "undefined") {
window.setTimeout('window.fix_wmode2transparent_swf()', 200);
return;
}
if(window.noConflict)jQuery.noConflict();

// For Internet Explorer
jQuery("object").each(function (i) {

var algo = jQuery(this).context.attributes;
var str_tag = '<OBJECT ';

for (var i=0; i < algo.length; i++)
str_tag += algo[i].name + '="' + algo[i].value + '" ';

str_tag += '>';

var flag = false;

jQuery(this).children().each(function (elem) {
if (jQuery(this).attr("NAME") == "wmode") {
flag=true;
str_tag += '<PARAM NAME="' + jQuery(this).attr("NAME") + '" VALUE="transparent">';
}
else  
str_tag += '<PARAM NAME="' + jQuery(this).attr("NAME") + '" VALUE="' + jQuery(this).attr("VALUE") + '">';
});

if(!flag)
str_tag += '<PARAM NAME="wmode" VALUE="transparent">';

str_tag += '</OBJECT>';

jQuery(str_tag).insertAfter(this);
jQuery(this).remove();
} );

// For Firefox Browser
jQuery("embed").attr("wmode",'transparent');
jQuery("embed").each(function(i) {
jQuery(this).clone().insertAfter(this);
jQuery(this).remove();
});

// });
}


That's all! You only need to put this into your HTML web page, done!
Loading mentions Retweet

Comments (0)

Leave a comment...

 
Got an account with one of these? Login here, or just enter your comment below.
Posterous-login    Connect    twitter



 

About

Its me. mokalovesoulmate a.k.a. Moses Kurniawan. I am a web developer and technical support. This blog is related to myself, "Made in Twenty" -- personal project, my thoughts, whatever I can write. Welcome ! :)