Mootools and prototype on the same page

Prototype and Mootools are 2 of the most used JS frameworks on the web. The bad thing about them is that each of them add/extend objects in the global scope so it is impossible to include them in the same html page. The ‘solutions’ i have found are not reliable since the mootools library is ‘modified’ to

For a Rails project, the first natural choice is Prototype, since you get native support from Rails libraries.  What if you want to use a shiny glamour multi-featured JS gadget writted on top of Mootools on your project? 😀 Something like Slideshow 2 ..

My solution (i know, it has lots of drawbacks and question marks ) was to use a page in another page. That naturally translates into ‘iframe’. But the iframes, as we now are not quite popular lately (especially since they are deprecated in the new XHML standard).

Therefore, we will use the ‘object’ tag (of course, different code for IE and The Rest Of The World, thank you, Microsoft).

In my application, i needed to dynamically open an overlayer and to display the slideshow, therefore i will paste the JS code that creates the object.

function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
var rv = -1; // Return value assumes failure.
if (navigator.appName == ‘Microsoft Internet Explorer’)
var ua = navigator.userAgent;
var re  = new RegExp(“MSIE ([0-9]{1,}[\.0-9]{0,})”);
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
return rv;

function addObject(options){
//classid=”clsid:25336920-03F9-11CF-8FD0-00AA00686F13″ width=”2000″ height=”2000″ data=”/images/new”
var width = options.width || 550
var height = options.height || 490
var data = options.url

var overlayedMessageDiv = $(‘overlayed_message_box’)

if (getInternetExplorerVersion() > -1) {
overlayedMessageDiv.innerHTML = ‘<OBJECT classid=”clsid:25336920-03F9-11CF-8FD0-00AA00686F13″ style=”border:none;” width=”‘ +width+ ‘” height=”‘ + height + ‘” data=”‘ + data+ ‘” /> ‘

else {
var newElement = domutil.element(‘object’, {
style: ‘border:none;’,
width: width,
height: height,
data: data


Another annoying thing is the gray border IE . The sollution is to set the border of the child page to 0px;

Well, that’s about all. Sorry if you expected some magic beans for this issue and now you feel tricked 🙂


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: