javascriptmootoolsconflictimageflow

Conflict between mootools and another (non-framework) script


I'm trying to integrate a javascript called ImageFlow into a Joomla site, but I'm getting an error in Internet Explorer (v8 native and compatibility mode) and it won't display. It works fine in Firefox and other browsers).

I believe the error is related to mootools. Error details:

Message: Object doesn't support this property or method
Line: 48
Char: 27
Code: 0
URI: [domain]/media/system/js/mootools.js

Message: Object doesn't support this property or method
Line: 953
Char: 4
Code: 0
URI: [domain]/media/imageflow/imageflow.js

The beginning of mootools line 48 (minified) is:

if(!this.addEventListener)fn=fn.create({'bind':this,'event':true});

The relevant imageflow code is:

/* Just in case window.onload happens first, add it to onload
using an available method.*/
if(typeof addEvent !== "undefined")
{
    addEvent(window, "load", run); // <-- line 953
}
else if(document.addEventListener)
{
    document.addEventListener("load", run, false);
}
else if(typeof window.onload === "function")
{
    var oldonload = window.onload;
    window.onload = function()
    {
        domReadyEvent.run();
        oldonload();
    };
}
else
{
    window.onload = run;
}

Solution

  • I found a solution: remove the first if-clause from the imageflow code. I don't know if it was there for legacy browsers perhaps, but without it the script works perfectly fine in IE 6-8 and the proper browsers.