Help! My mootools script doesn't work in IE!

Today I went through the pain of installing Windows XP. On QEMU. I wanted to do some JavaScript debugging for mootools. It turned out that IE was just a little picky about list formatting.

Whenever you list things, IE scripting breaks if you add a comma behind the last element. It's probably incorrect to add a comma and the examples at docs.mootools.net are all correct. But it surprised me nonetheless as IE lets terribly broken HTML pass and other browsers are more forgiving. Anyway, fixing sloppy code is always a good thing.

This won't work in the Internet Explorer I tested:

window.addEvent('domready', function() { var elements = $('sidebar').getElements('a'); elements.each(function(item, index) { var elem = $(item); elem.addEvents({ 'mouseenter': function() { elem.setStyle('background-color', '#ccf'); }, 'mouseleave': function() { var myFx = new Fx.Tween(elem, { duration: 250, link: 'ignore', transition: 'sine:out', }); myFx.start('background-color', '#ccf', '#eef'); }, }); }); });

(Errors on lines 13 and 16)This will work:

window.addEvent('domready', function() { var elements = $('sidebar').getElements('a'); elements.each(function(item, index) { var elem = $(item); elem.addEvents({ 'mouseenter': function() { elem.setStyle('background-color', '#ccf'); }, 'mouseleave': function() { var myFx = new Fx.Tween(elem, { duration: 250, link: 'ignore', transition: 'sine:out' }); myFx.start('background-color', '#ccf', '#eef'); } }); }); });

Some day I may read through the JavaScript specs and find out if this behaviour is to be expected. Another resource I haven't gone through yet is this excellent post at the mootools blog.
If you're interested in debugging JavaScript for IE you should read this How to debug JavaScript in IE as well.

Published on Sept. 22, 2008 at 9:37 a.m. by Nicolas and tagged mootools, JavaScript, Webdesign. You can follow the discussion with the comment feed for this post. Feeling generous? Donate!

2 comments

  1. avatar
    wrote this comment on

    It is to be expected. You're essentially creating an invalid object structure with those commas. Firefox and other browsers forgive this, but this is a well-known (and technically correct) IE behavior to break this way.

    Reply to this comment
    1. avatar
      wrote this comment on

      Yes, I understand that today. It's just that one year ago I started doing serious JS and well, JS is just not easy to debug. Firefox should indeed break on incorrect syntax, Firebug makes my life so much easier. I don't think Firefox even generates warnings, would have to check that.

      Reply to this comment

Start a new thread

Cancel reply
Markdown. Syntax highlighting with <code lang="php"><?php echo "Hello, world!"; ?></code> etc.