Putting a div over a flash movie in IE

From Emprise Wiki
Jump to: navigation, search

This is how to put a div over a flash movie in IE: http://manisheriar.com/blog/flash_objects_and_z_index

And if we must modify an existing flash movie, we have to create the object from scratch. This is the relevant code (edit the page to see the code with proper indentation):


$(document).ready(function(){
//Polls until the frame is available, then runs the fixZIndex function
			 var timer = setInterval(function(){
				
				var obj = undefined;
				try{
					obj = $(window.frames['actual-lesson'].frames['scormdriver_content'].document).find("object");
				}catch(err){}
				
				if(obj != undefined && obj.length > 0){
					clearInterval(timer);
					fixZIndex(obj);
				}
			}, 200); 

});

function createElementParam(name, value, par) {
			var elementParam = document.createElement("param");
			elementParam.setAttribute("name", name);
			elementParam.setAttribute("value", value);
			par.appendChild(elementParam);
		}
		
		function appendMediaObject(oldObj) {
			var obj = document.createElement("object");
			var embed = document.createElement("embed");
			
			//set all the new attributes
			var el = $(oldObj).get(0);
			for (var attr, i=0, attrs=el.attributes, l=attrs.length; i<l; i++){
			    attr = attrs.item(i);
			    obj.setAttribute(attr.nodeName, attr.nodeValue);
			   //console.log("setting object attribute "+attr.nodeName+" to "+attr.nodeValue);
			}
			
			//only create the embed tag if it's not IE.  IE does not need it.
			if(!inIE){
				var el = $(oldObj).find("embed").get(0);
				//console.log("embed: "+el);
				for (var attr, i=0, attrs=el.attributes, l=attrs.length; i<l; i++){
				    attr = attrs.item(i);
				    embed.setAttribute(attr.nodeName, attr.nodeValue);
				   //console.log("setting embed attribute "+attr.nodeName+" to "+attr.nodeValue);
				}
				embed.setAttribute("wmode", "transparent");
				
				obj.appendChild(embed);
			}
			
			//set the element parameters
			$(oldObj).find("param").each(function(index, ele){
				createElementParam($(ele).attr("name"), $(ele).val(), obj);
				//console.log("creating element param "+$(ele).attr("name")+" with value "+$(ele).val());
				
			});
			
			//manually add the transparent element parameter
			createElementParam("wmode","transparent", obj);
			
			//load the content into the DIV.  Not sure what the point of this if statement is since obj.outerHTML should always be non-null.  
			//I pasted this code in from the internet so I'm not sure if the else is ever triggered.  I could not get it to trigger in my tests so we may be able to remove it.
			var parDiv = $(oldObj).parent();
			if (obj.outerHTML) {
				$(parDiv).html(obj.outerHTML);
				//console.log("obj.outerHTML: "+obj.outerHTML);
			} else {
				$(parDiv).append(embed);
			}
		}
		
		function fixZIndex(obj){
		
			$(obj).wrap("<div id='flashContent' />");
			//alert("wrapped");
			
			//using jquery:
			//generates error in ie
			//$(obj).append("<param name='wmode' value='transparent'>");
						
			//using the DOM (innerHTML):
			//generates error in ie
			/*var h = $(obj).get(0);
			var tmp = h.innerHTML;
			tmp = tmp + "<param name='wmode' value='transparent'>";
			*/
			
			
			//by setting innerHTML of parent element:
			//doesn't generate error but doesn't work - the SWF is not shown after we set the innerHTML of parent
			/*var paren = $(obj).parent().get(0);
			var pHtml  = paren.innerHTML;
			var loc = pHtml.indexOf(">")+1;
			var newHtml = pHtml.substring(0, loc) + "<param name='wmode' value='transparent'>" + pHtml.substring(loc);
			paren.innerHTML = newHtml;
			*/
			
			
			//by creating the entire element from scratch
			appendMediaObject(obj);
			
			
			
		}