Monday, November 10, 2008

Mootools differences in IE and Firefox

We're using the MooTools scripting framework on our site and today I discovered a strange difference between Firefox and IE. I was creating an element and injecting it into the DOM and then trying to change its CSS class and styles.

addClass and setStyle
MooTools provides methods on it's Element class that allow you to manipulate the CSS styling of an element. You can do things like:
// Add a css class to the element with the id foo

// Set the width of the foo element
$('foo').setStyle('width', '100px');
Unfortunately when viewing an ASP.NET page in IE that includes a script that uses these functions you get a script error saying that the "Object doesn't support this property or method"

At first I thought the solution was to go back to basics:
// Add a css class to the element with the id foo
$('foo').className = 'fooStyle';

// Set the width of the foo element
$('foo').style.width = '100px';
However I then realised that I was trying to call the MooTools Element methods on a vanilla element object rather than a MooTools one. The second line below solved the problems in IE and meant I could go back to the first way of applying the styling.

var myelement = document.createElement("a");
myelement = $(myelement);
IE vs Firefox
In retrospect it seems strange that this worked in Firefox, I guess Firefox must be able to do some sort of implicit conversion to a MooTools element in order to resolve the method call.

MooTools seems really great, it's lightweight and easy to use. The learning curve seems much lower than some of the other more complicated offering available.

The only reservation I have at this point is that from what I've read on the forums it doesn't play nicely with any other scripting framework due to it's lack of namespaces and the maintainers seem quite hostile to anyone who suggests that would be a good thing.

Labels: , , , ,


Post a Comment

<< Home