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

Tagged mootools

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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.

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogplay

Related posts:

  1. Track clicks with mootools
  2. Mooified focus onload but keep backspace intact
  3. HTML forms and onclick/onfocus

Nicolas Kuttler This entry was written by nicolas, posted on 22. September 2008, filed under Technology and tagged , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post.

2 Comments

  • Posted by ithcy on 22. October 2009 at 17:15.

    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
    • Posted by Nicolas on 23. October 2009 at 09:51.

      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
Leave a Reply

Your email is never shared. Required fields are marked *

*
*