Archief - JS/CSS: probleem met combinatie ObjectSwap en ander JS

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" loop="false" wmode="transparent" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="570" height="300" id="test" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="test.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="loop" value="false" />
<param name="flashVersion" value="8" />
<embed src="test.swf" loop="false" quality="high" wmode="transparent" bgcolor="#ffffff" width="570" height="300" name="test" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

<script type="text/javascript" src="popin.js"></script>

<style type="text/css" media="screen">
div#ad{
	width:660px;
	height:485px;
	border:1px solid #7FA3C7;
	position:absolute;
	top:-500px;
	left:50%;
	margin-left:-330px;
	background-color:#FFFFFF;
}

div#ad img{
	border-width:0px;
	margin:0px;
	cursor:pointer;
}

div#ad img#closer{
	float:right;
	clear:both;
}
</style>

<div id="ad">
 <img src="close1.jpg" width="25px" height="24px" alt="sluiten" title="sluiten" id="closer" />
 <a href="http://www.google.be"><img src="special.jpg" width="660px" height="461px" alt="" /></a>
</div>

window.onload = init;

var ad = null

function init(){
	// initialize the ad to slide in
	ad = new popin('ad', 'closer');
}

function popin(div, closer){
	this.divNode = document.getElementById(div);
	this.closerNode = document.getElementById(closer);
	this.posY = -500;
	this.slideIn();
	this.closerNode.onclick = bind(this, this.closeAd);
}

popin.prototype.slideIn = function(){
	if (this.posY < 40){
	   this.posY += 20;
		this.divNode.style.top = this.posY + 'px';
		window.setTimeout(bind(this, this.slideIn), 15);
	}else{
	}
}

popin.prototype.closeAd = function(){
	this.divNode.style.display = 'none';
}

function bind(el, func){
	return function() { func.call(el); }
}

/* ObjectSwap - Bypasses the new ActiveX Activation requirement in Internet Explorer by swapping existing ActiveX objects on the page with the same objects. Can also be used for Flash version detection by adding the param:
<param name="flashVersion" value="7" /> to the object tag.

Author: Karina Steffens, www.neo-archaic.net
Created: April 2006
Changes and bug fixes: May 2006
*/

//Check if the browser is InternetExplorer
var ie = (navigator.appName.indexOf("Microsoft") != -1);

//Hide the object to prevent it from loading twice
if (ie){
	document.write ("<style id='hideObject'> object{display:none;} </style>");
}

/*Replace all flash objects on the page with the same flash object, 
by rewriting the outerHTML values
This bypasses the new IE ActiveX object activation issue*/
objectSwap = function(){
	//An array of ids for flash detection
	var stripQueue = [];
	//Get a list of all ActiveX objects
	var objects = document.getElementsByTagName('object');
	for (var i=0; i<objects.length; i++){			
		var o = objects[i];	
		var h = o.outerHTML;
		//The outer html omits the param tags, so we must retrieve and insert these separately
		var params = "";
		var hasFlash = true;
		for (var j = 0; j<o.childNodes.length; j++) {
			var p = o.childNodes[j];
			if (p.tagName == "PARAM"){
				//Check for version first - applies to all browsers
				//For this to work, a new param needs to be included in the object with the name "flashVersion" eg:
				//<param name="flashVersion" value="7" />
				if (p.name == "flashVersion"){
					hasFlash = detectFlash(p.value);
					if (!hasFlash){
						//Add the objects id to the list (create a new id if there's isn't one already)
						o.id = (o.id == "") ? ("stripFlash"+i) : o.id;
						stripQueue.push(o.id);
						break;
					}
				} 
				params += p.outerHTML;		       
			}
		}	
		if (!hasFlash){
			continue;
		}		
		//Only target internet explorer
		if (!ie){
			continue;
		} 
		//Avoid specified objects, marked with a "noswap" classname
		if (o.className.toLowerCase().indexOf ("noswap") != -1){
			continue;
		}		
		//Get the tag and attributes part of the outer html of the object
		var tag = h.split(">")[0] + ">";			
		//Add up the various bits that comprise the object:
		//The tag with the attributes, the params and it's inner html
		var newObject = tag + params + o.innerHTML + " </OBJECT>";		
		//And rewrite the outer html of the tag 
		o.outerHTML = newObject;
	}
	//Strip flash objects
	if (stripQueue.length) {
		stripFlash(stripQueue)
	}
	//Make the objects visible again
	if (ie){
		document.getElementById("hideObject").disabled = true;
	}
}

detectFlash = function(version){
	if(navigator.plugins && navigator.plugins.length){
		//Non-IE flash detection.
		var plugin = navigator.plugins["Shockwave Flash"];
		if (plugin == undefined){
			return false;
		}
		var ver = navigator.plugins["Shockwave Flash"].description.split(" ")[2];
		return (Number(ver) >= Number(version))
	} else if (ie){
	//IE flash detection.
		try{
			var flash = new ActiveXObject("ShockwaveFlash.ShockwaveFlash." + version);
			return true;
		}
		catch(e){
			return false;
		}
	}
	//Catchall - skip detection
	return true;
}

//Loop through an array of ids to strip
//Replace the object by a div tag containing the same innerHTML.
//To display an alternative image, message for the user or a link to the flash installation page, place it inside the object tag.  
//For the usual object/embed pairs it needs to be enclosed in comments to hide from gecko based browsers.
stripFlash = function (stripQueue){
	for (var i=0; i<stripQueue.length; i++){
		var o = document.getElementById(stripQueue[i]);
		var newHTML = o.innerHTML;	
		//Strip the comments
		newHTML = newHTML.replace(/<!--\s/g, "");
		newHTML = newHTML.replace(/\s-->/g, "");
		//Neutralise the embed tag
		newHTML = newHTML.replace(/<embed/gi, "<span");		
		//Create a new div element with properties from the object
		var d = document.createElement("div");
		d.innerHTML = newHTML;
		d.className = o.className;
		d.id = o.id;
		//And swap the object with the new div
		o.parentNode.replaceChild(d, o);
	}
}

//Initiate the function without conflicting with the window.onload event of any preceding scripts
if (window.onload)
{
	window.onload = function(){
		window.onload;
		objectSwap();
	}
} else {
	window.onload = objectSwap;
}