How to add wmode=“transparent” for every flash object & ebmed tag using javascript?

How to use wmode as transparent for flash and what’s its use?

Sometime our embedded flash object comes over our websites dropdown menus or over other objects like light box, jQuery Boxy, fancybox etc.

We can solve this problem by changing the wmode of embed to transparent. By changing the wmode to transparent the flash object becomes transparent.

We can do it in following ways.

HTML:-

Add the following parameter to the OBJECT tag:

Add the following parameter to the EMBED tag:

wmode=”transparent”

JavaScript:-

If you are using swfobject.js javascript file for embedding. Then do it like this.

var obj = new SWFObject(”player.swf”,”ply”,”300″,”250″,”9″,”#FFFFFF”);
obj.addParam(”wmode”,”transparent”);

If you want to apply the wmode transparent to whole HTML page. You can do this way.

for (var ems = document.embeds, i = 0, em; em = ems[i]; i++) {
em.setAttribute(’wmode’, ‘transparent’);
var nx = em.nextSibling, pn = em.parentNode;
pn.removeChild(em);
pn.insertBefore(em, nx);
}

=========== OR ==============

<script>
function fix_flash() {
// loop through every embed tag on the site
var embeds = document.getElementsByTagName(’embed’);
for (i = 0; i < embeds.length; i++) {
embed = embeds[i];
var new_embed;
// everything but Firefox & Konqueror
if (embed.outerHTML) {
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
else
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);
} else {
// 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 = objects[i];
var new_object;
// object is an IE specific tag so we can use outerHTML here
if (object.outerHTML) {
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
else
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++) {
try {
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’) + “‘ />”);
}
}
}
catch (err) {
}
}
// replace the old embed object with the fixed versiony
object.insertAdjacentHTML(‘beforeBegin’, new_object);
object.parentNode.removeChild(object);
}
}
}

//Write following function in your javascript tag and call this function when your document is fully loaded.

//Method to identified that the body is fully loaded:

var body = document.getElementsByTagName(“BODY”)[0];
if (body && body.readyState == “loaded”) {
AfterLoad();
} else {
if (window.addEventListener) {
window.addEventListener(“load”, AfterLoad, false);
} else {
window.attachEvent(“onload”, AfterLoad);
}
}

function AfterLoad() {
fix_flash(); // call that function to add wmode=”transparent” for every flash object
}

</script>

Enjoy Javascript!!!

 

Displaying loading image untill a page has fully loaded using Javascript

By implementing the following code, you can display the spinning image until the page has fully loaded.

You need to do two things:
1. In header section, you need to implement following  javascript code.

<script>

var body = document.getElementsByTagName(‘BODY’)[0];

if (body && body.readyState == ‘loaded’) {

AfterLoad();

} else {

if (window.addEventListener) {

window.addEventListener(‘load’, AfterLoad, false);

} else {

window.attachEvent(‘onload’, AfterLoad);

}

}

function AfterLoad() {

image.style.display=’none’;

}

</script>

2. After the <body> tag you need to show the loading image. (like, image.style.display=’ ‘;)

That is it.

HAPPY PROGRAMMING!

 

Changing CSS file dynamically using javascript

When there will be a requirement to change the web page layout on the fly with different colors and backgrounds than following is a PERFECT solution for that.

You need to follow the three steps to implement the same.

1). Add .CSS file that is mentioned below.

2). Add “changeCSS” function in .aspx/html file which is mentioned below.

3). The “changeCSS” will take FOUR arguments as below:

1. The name of the style sheet.

2. The name of the class that you want to edit // in below case it is “.nishant”

3. The element of class, of which you want to modify the value // in below case it is “color”

4. The value of the element // in below case it is “green”

Following is a  HTML code:

<head runat=”server”>
<title></title>
<link href=”style/style.css” rel=”stylesheet” type=”text/css” media=”all” /> // style sheet is given below

<script language=”javascript”>
function ChangeColor() {
changeCSS(document.styleSheets[0], ‘.nishant’, ‘color’, ‘green’);
}

function changeCSS(theCSS, theClass, element, value) {
//Last Updated on July 28, 2010
//documentation for this script at
//http://www.shawnolson.net/a/503/altering-css-class-attributes-with-javascript.html
var cssRules;

var added = false;

if (theCSS[‘rules’]) {
cssRules = ‘rules’;
} else if (theCSS[‘cssRules’]) {
cssRules = ‘cssRules’;
} else {
//no rules found… browser unknown
}

for (var R = 0; R < theCSS[cssRules].length; R++) {
if (theCSS[cssRules][R].selectorText == theClass) {
if (theCSS[cssRules][R].style[element]) {
theCSS[cssRules][R].style[element] = value;
added = true;
break;
}
}
}
if (!added) {
if (theCSS.insertRule) {
theCSS.insertRule(theClass + ‘ { ‘ + element + ‘: ‘ + value + ‘; }’, theCSS[cssRules].length);
} else if (theCSS.addRule) {
theCSS.addRule(theClass, element + ‘: ‘ + value + ‘;’);
}
}
}

</script>

</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<input type=”button” onclick=”ChangeColor();” title=”Click” /> // function calling
<p>
nishant dave</p> // this value will be changed
</div>
</form>
</body>
</html>

Following is .CSS file

@charset “utf-8”;

.nishant
{
padding-right: 10px;
color:Red;
font-size:large;
font-family:Verdana;
}

Happy Programming!