Liferay + FancyBox + IE8 = problems

The last few days I've been trying to integrate PDF in a nice way into Liferay by showing them in a Lightbox alike way (more on the full integration in a future post). I first tried to use the Liferay.Popup, but that just gave me a headache. So finally I settled on using FancyBox 1.2.6.

Getting it to work on OSX/Safari wasn't a problem, Firefox also was a breeze, but IE8 was a different story. It was the first browser to cause a real problem, a Javascript error to be exact: Object doesn't support this property or method. The strange thing was that the examples on the FancyBox website would work correctly in IE8. So what to do now?

The error line and column pointed to some browser detection code (if you can call IE a browser) in the FancyBox Javascript file:

var ieQuirks = null, IE6 = $.browser.msie && $.browser.version.substr(0,1) == 6 && !window.XMLHttpRequest, oldIE = IE6 || ($.browser.msie && $.browser.version.substr(0,1) == 7);

This is default JQuery browser detection code, so I couldn't figure out why this would cause a problem? But some Googling turned up a comment of Nate Cavanaugh to a post about Liferay/IE/Browser detection problems. In his comment he mentions that Liferay has had its own Javascript browser detection code since ages. So I decided to change the FancyBox code to use the Liferay browser detection instead of the JQuery one:

var ieQuirks = null;
var IE6 = Liferay.Browser.isIe() && Liferay.Browser.getMajorVersion() == 6 && !window.XMLHttpRequest;
var oldIE = IE6 || (Liferay.Browser.isIe() && Liferay.Browser.getMajorVersion() == 7);

And what do you think: the error disappeared. I'm no Javascript expert and so I can't explain what exactly causes the Javascript error, maybe a strange Liferay/JQuery/browser interaction (it's not the first one we've encountered), but frankly I don't care since it works now and I don't have to time to investigate further. On to the next problem...