incompatibility of videos with prototype in Firefox 2

Page: 1

Author Post
johnreitano
Guest
Hi,

I can't get a video to show up when I include Prototype on my page at the same time as floatbox. This only seems to happen in FF2, not in FF3 or IE6-8. Is there any work-around for this?

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<script src="/javascripts/prototype.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="/floatbox/floatbox.css" />
<script type="text/javascript" src="/floatbox/floatbox.js"></script>
</head>
<body>
<a href="http://video.google.com/googleplayer.swf?docId=-270799203995359424&hl=en&playerMode=mini" rel="floatbox" rev="width:556 height:372 scrolling:no caption:`Unquiet Visions`">Google Video (Unquiet Visions)</a>
</body>
</html>

Thanks!
John
Administrator
Registered: Aug 2008
Posts: 3382
Easy work-around. Don't use prototype.

But perhaps you would like a more helpful solution. The problem turns out to be not with flash in particular, but with browser detection. The presence of prototype.js breaks my browser detects for both old Firefox and old Opera. There are a few negative consequences of this.

The reason it breaks is because floatbox is checking for the presence of document.getElementsByClassName. Firefox implemented this in v3.0 and Opera implemented it in 9.5. So, if floatbox doesn't find that function present, it knows it's got an earlier version of those browsers. Prototype.js adds this function to the document object if it doesn't already exist. So to floatbox these browsers start looking like their later version counterparts.

For compatability with libraries that extend the document object I'll change the browser detect code. You can patch this in to your current version 3.20 of floatbox.js (and framebox.js) if you like. Obviously, if you're using the gzipped version, you will need to rezip after making the change. Here's the old and new code to replace:

Existing v3.20 code:
	this.mac = navigator.appVersion.indexOf(&#039;Macintosh&#039;) !== -1;
if (window.opera) {
this.opera = true;
this.operaOld = !document.getElementsByClassName;
this.operaMac = this.mac;
} else if (document.all) {
this.ie = true;
this.ieOld = parseInt(navigator.appVersion.substr(navigator.appVersion.indexOf(&#039;MSIE&#039;) + 5), 10) < 7;
this.ie8b2 = window.postMessage && navigator.appMinorVersion === &#039;beta 2&#039;;
this.ieXP = parseInt(navigator.appVersion.substr(navigator.appVersion.indexOf(&#039;Windows NT&#039;) + 11), 10) < 6;
} else if (navigator.userAgent.indexOf(&#039;Firefox&#039;) !== -1) {
this.ff = true;
this.ffOld = !document.getElementsByClassName;
this.ffNew = !this.ffOld;
this.ffMac = this.mac;
} else if (navigator.appVersion.indexOf(&#039;WebKit&#039;) !== -1) {
this.webkit = true;
this.webkitNew = parseInt(navigator.appVersion.substr(navigator.appVersion.indexOf(&#039;WebKit&#039;) + 7), 10) >= 500;
this.webkitOld = !this.webkitNew;
this.webkitMac = this.mac;
}


Replacement code:
	var agent = navigator.userAgent,
version = navigator.appVersion;
this.mac = version.indexOf(&#039;Macintosh&#039;) !== -1;
if (window.opera) {
this.opera = true;
this.operaOld = parseFloat(version) < 9.5;
this.operaMac = this.mac;
} else if (document.all) {
this.ie = true;
this.ieOld = parseInt(version.substr(version.indexOf(&#039;MSIE&#039;) + 5), 10) < 7;
this.ie8b2 = version.indexOf(&#039;MSIE 8.0&#039;) !== -1 && navigator.appMinorVersion === &#039;beta 2&#039;;
this.ieXP = parseInt(version.substr(version.indexOf(&#039;Windows NT&#039;) + 11), 10) < 6;
} else if (agent.indexOf(&#039;Firefox&#039;) !== -1) {
this.ff = true;
this.ffOld = parseInt(agent.substr(agent.indexOf(&#039;Firefox&#039;) + 8), 10) < 3;
this.ffNew = !this.ffOld;
this.ffMac = this.mac;
} else if (version.indexOf(&#039;WebKit&#039;) !== -1) {
this.webkit = true;
this.webkitNew = parseInt(version.substr(version.indexOf(&#039;WebKit&#039;) + 7), 10) >= 500;
this.webkitOld = !this.webkitNew;
this.webkitMac = this.mac;
}
johnreitano
Guest
Thank you! That solved it!
johnreitano
Guest
Woops...found a new small syntax error in the code above. I believe the fix is to change "substr(str.indexOf" to "substr(version.indexOf" in the two places where it occurs.
Administrator
Registered: Aug 2008
Posts: 3382
Doh!

Thanks for catching that. I've updated the replacement code in the post above. Apologies for the sloppy work.

Page: 1