mootools Fx.slide not working IE6

Question

Hi there,

I have some javascript that is built on top of mootools that is basically giving a div some show/hide functionality.

window.addEvent('domready', function(){
/*var mySlide = new Fx.Slide('customise_text').hide()
var mySlide2 = new Fx.Slide('customise_link').hide()
$('customise').addEvent('click', function(e){
    $('customise').addClass('active');
    mySlide.toggle(); //show-hide login panel
    mySlide2.toggle(); //show-hide login panel
    e.preventDefault();
});*/

/*$('moodal_close').addEvent('click', function(){
    alert("1");
});*/
//alert("hello")
var vertical_slide = $('vertical_slide');
var checkoutVerticalSlide = $('vertical_slide_checkout');
var v_toggle_checkout = $('v_toggle_checkout');

if(!vertical_slide || !checkoutVerticalSlide || !v_toggle_checkout) {
    return;
} else {

    var status = {
        'true': 'open',
        'false': 'close'
    };
    //-vertical
    var myVerticalSlide = new Fx.Slide('vertical_slide').hide();
    $('v_toggle').addEvent('click', function(e){
        e.preventDefault();
        myVerticalSlide.toggle();
    });

    // When Vertical Slide ends its transition, we check for its status
    // note that complete will not affect 'hide' and 'show' methods
    myVerticalSlide.addEvent('complete', function() {
        if(status[myVerticalSlide.open] == 'open')
        {
            $('v_toggle').addClass('open');
        } else {
            $('v_toggle').removeClass('open');
        }
    });

    var checkout_status = {
        'true': 'open',
        'false': 'close'
    };

    var checkoutVerticalSlide = new Fx.Slide('vertical_slide_checkout').hide();
    $('v_toggle_checkout').addEvent('click', function(e) {
        e.preventDefault();
        checkoutVerticalSlide.toggle();
    });

    checkoutVerticalSlide.addEvent('complete', function() {
        if(status[checkoutVerticalSlide.open] == 'open')
        {
            $('v_toggle_checkout').addClass('open');
        } else {
            $('v_toggle_checkout').removeClass('open');
        }
    });
}

In IE6 I get page loaded with errors and get an error of Object does not support this method or property

Answer 1

This could be due to the fact that IE6 does not support the preventDefault method.

Where you make use of this method (e.preventDefault()), replace the call with the following

if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; }

See if that works for you :)

While it feels warm and fuzzy to be able to support all browsers, IE6 is not a warm and fuzzy kind of browser. You will keep running into problems if you want to fully support IE6, I'm afraid.