IE9 Issue on the Morph button

[impulsedl]

uiMorphingButton_fixed.js

Error in console IE9: Line: 90 Error: Unable to get property 'target' of undefined or null reference

help to fix

[scriptype]

starting from line 115:

if( support.transitions ) {
    this.contentEl.addEventListener( transEndEventName, onEndTransitionFn );
}
else {
    onEndTransitionFn();
}

So when there's no support for transitions, the onEndTransitionFn is still being called yet without an event parameter.

And when you look at the line 90, there's:

if( ev.target !== this ) return false;

So the ev being undefined -result of lack of an event param-, it causes IE9 (apparently doesn't provide transitions(?)) to break things.

[stiwariexpress]

@impulsedl

did you success in IE9 as, I am having the same issue... IE9 is not behaving good to me. can this has any way to work on IE9? looking forward to resolve this issue.

[impulsedl]

Any update for this plugin, is there any solution to make this work in IE9 or any alternate solution, please suggest

[stiwariexpress]

Hope someone is working for IE9 issues to fix.. On May 28, 2014 10:42 PM, "impulsedl" [email protected] wrote:

Any update for this plugin, is there any solution to make this work in IE9 or any alternate solution, please suggest

— Reply to this email directly or view it on GitHub https://github.com/codrops/ButtonComponentMorph/issues/1#issuecomment-44436879 .

[maddy2get]

Here is my quick fix:

Update this function:

UIMorphingButton.prototype._initEvents = function() {
        var self = this;
        // open
        this.button.addEventListener( 'click', function() { self.toggle(); } );
        // close
        if( this.options.closeEl !== '' ) {
            var closeEl = this.el.querySelector( this.options.closeEl );
            if( closeEl ) {
                closeEl.addEventListener( 'click', function() { self.toggle(); } );
            }
        }
    }

to this and it will work with IE9 without special effects

UIMorphingButton.prototype._initEvents = function() {
        var self = this;
        // open
        this.button.addEventListener( 'click', function() { 
            if(support.transitions) {
              self.toggle(); 
            } else {
              $(self.el).addClass('active open'); 

            } 
        } );
        // close
        if( this.options.closeEl !== '' ) {
            var closeEl = this.el.querySelector( this.options.closeEl );
            if( closeEl ) {
                closeEl.addEventListener( 'click', function() { 
                    if(support.transitions) {
                      self.toggle(); 
                    } else {
                      $(self.el).removeClass('active open'); 
                    } 
                } );
            }
        }
    }

Further more, this code makes UIMorphingButton.prototype.toggle function bit cleaner by removing support.transitions conditionals.

I have used some jQuery functions in above code but can be easily replaced with classie. Let me know if it doesn't work.

Cheers.

[vimmynegi]

hey @maddy2get not working in IE 9

[stiwariexpress]

Tried it but unfortunately its not working :(

On 16 September 2014 18:12, vimmynegi [email protected] wrote:

hey @maddy2get https://github.com/maddy2get not working in IE 9

— Reply to this email directly or view it on GitHub https://github.com/codrops/ButtonComponentMorph/issues/1#issuecomment-55736134 .