Mootools script will not work in internet explorer 7

Question

I hope you can help,

I am relatively new to mootools (and brand new to here) and I have been working on a basic open close div. It can be seen here: http://jsfiddle.net/jessicajet/2jZz5/ . It includes a clickable link script I found elsewhere.

   <script>
   window.addEvent('load', function() {

   Element.Events.outerClick = {
    base : 'click',
    condition : function(event){
    event.stopPropagation();
    return false;
     },
    onAdd : function(fn){
    this.getDocument().addEvent('click', fn);
     },
    onRemove : function(fn){
    this.getDocument().removeEvent('click', fn);
    }
    };


    (function() {
var opener = $('box2');
var boxtoopen = $('box');
var testmorph = $('test')

boxtoopen.set('morph', {
    duration: 800, 
});

boxtoopen.addEvent('outerClick', function(event) {
    boxtoopen.morph(".openOff");
     testmorph.morph(".openOff2"); 
});

opener.addEvent('click', function(e) {
    e.stop();
    boxtoopen.morph(".openOn");    
    testmorph.morph(".openOn2");    
});

})();


 var clix = new dwClickables({
elements: $('.box2'),
anchorToSpan: true
});


 });
</script>

It doesn't seem to be working in ie7 although it seems consistant across other browsers?

Can anyone help me resolve this problem and give me some advice for future use?

Kind regards,

Jessica

Answer 1

Typos are often te worst bugs to find ;) and IE can be very stern about it.

http://jsfiddle.net/2jZz5/2/

I added a missing semicolon (;) and removed a unneeded comma (,)

Before:

var opener = $('box2');
var boxtoopen = $('box');
var testmorph = $('test')

boxtoopen.set('morph', {
    duration: 800, 
});

After:

var opener = $('box2');
var boxtoopen = $('box');
var testmorph = $('test');

boxtoopen.set('morph', {
    duration: 800 
});