Morphing buttons concept not working in internet explorer IE 9

Question

Im using the "morphing buttons concept" from here http://tympanus.net/codrops/2014/05/12/morphing-buttons-concept/

The problem is that its not working in IE9. The error says: if( ev.target !== this ) {exception} undefined or null

I found this on stackoverflow https://stackoverflow.com/a/1143236/3310123

But i cant seem to implement it to the uiMorphingButton_fixed.js that comes with "morphing buttons"

Does anyone know what to change to make it work in IE 9 (its working in 10 and 11)?

The if( ev.target !== this ) can be found on line 90 in uiMorphingButton_fixed.js: var self = this, onEndTransitionFn = function( ev ) { if( ev.target !== this ) return false;

            if( support.transitions ) {
                // open: first opacity then width/height/left/top
                // close: first width/height/left/top then opacity
                if( self.expanded && ev.propertyName !== 'opacity' || !self.expanded && ev.propertyName !== 'width' && ev.propertyName !== 'height' && ev.propertyName !== 'left' && ev.propertyName !== 'top' ) {
                    return false;
                }
                this.removeEventListener( transEndEventName, onEndTransitionFn );
            }
            self.isAnimating = false;

            // callback
            if( self.expanded ) {
                // remove class active (after closing)
                classie.removeClass( self.el, 'active' );
                self.options.onAfterClose();
            }
            else {
                self.options.onAfterOpen();
            }

            self.expanded = !self.expanded;
        };

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

Answer 1

The problem seems to be here:

support.transitions is returning false , so onEndTransitionFn() is run (in the else at the end).

That sends no params to the onEndTransitionFn function.

But that function expects a parameter, and expects that parameter to have a target attribute. So calling it with no params will create the error you are seeing.

Maybe remove the else after the last if statement. But there's no way round the fact that support.transitions will still be false, so the morphing probably still won't work.

Answer 2

I got the .js updated so it now works on IE9 aswell. Replace the whole uiMorphingButton_fixed.js with this:

Hope this help someone :)

/** * uiMorphingButton_fixed.js v1.0.0 * http://www.codrops.com * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * Copyright 2014, Codrops */

    ;( function( window ) {

    'use strict';

    var transEndEventNames = {
            'WebkitTransition': 'webkitTransitionEnd',
            'MozTransition': 'transitionend',
            'OTransition': 'oTransitionEnd',
            'msTransition': 'MSTransitionEnd',
            'transition': 'transitionend'
        },
        transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
        support = { transitions : Modernizr.csstransitions };

    function extend( a, b ) {
        for( var key in b ) { 
            if( b.hasOwnProperty( key ) ) {
                a[key] = b[key];
            }
        }
        return a;
    }

    function UIMorphingButton( el, options ) {
        this.el = el;
        this.options = extend( {}, this.options );
        extend( this.options, options );
        this._init();
    }

    UIMorphingButton.prototype.options = {
        closeEl : '',
        onBeforeOpen : function() { return false; },
        onAfterOpen : function() { return false; },
        onBeforeClose : function() { return false; },
        onAfterClose : function() { return false; }
    }

    UIMorphingButton.prototype._init = function() {
        // the button
        this.button = this.el.querySelector( 'button' );
        // state
        this.expanded = false;
        // content el
        this.contentEl = this.el.querySelector( '.morph-content' );
        // init events
        this._initEvents();
    }

    UIMorphingButton.prototype._initEvents = function() {
        var self = this;
        // open
        this.button.addEventListener( 'click', function() { 
            if(support.transitions) {
              self.toggle(); 
            } else {
              classie.addClass( self.el, '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 {
                      classie.removeClass( self.el, 'active open' );
                    } 
                } );
            }
        }
    }

    UIMorphingButton.prototype.toggle = function() {
        if( this.isAnimating ) return false;

        // callback
        if( this.expanded ) {
            this.options.onBeforeClose();
        }
        else {
            // add class active (solves z-index problem when more than one button is in the page)
            classie.addClass( this.el, 'active' );
            this.options.onBeforeOpen();
        }

        this.isAnimating = true;

        var self = this,
            onEndTransitionFn = function( ev ) {
                if( ev.target !== this ) return false;

                if( support.transitions ) {
                    // open: first opacity then width/height/left/top
                    // close: first width/height/left/top then opacity
                    if( self.expanded && ev.propertyName !== 'opacity' || !self.expanded && ev.propertyName !== 'width' && ev.propertyName !== 'height' && ev.propertyName !== 'left' && ev.propertyName !== 'top' ) {
                        return false;
                    }
                    this.removeEventListener( transEndEventName, onEndTransitionFn );
                }
                self.isAnimating = false;

                // callback
                if( self.expanded ) {
                    // remove class active (after closing)
                    classie.removeClass( self.el, 'active' );
                    self.options.onAfterClose();
                }
                else {
                    self.options.onAfterOpen();
                }

                self.expanded = !self.expanded;
            };

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

        // set the left and top values of the contentEl (same like the button)
        var buttonPos = this.button.getBoundingClientRect();
        // need to reset
        classie.addClass( this.contentEl, 'no-transition' );
        this.contentEl.style.left = 'auto';
        this.contentEl.style.top = 'auto';

        // add/remove class "open" to the button wraper
        setTimeout( function() { 
            self.contentEl.style.left = buttonPos.left + 'px';
            self.contentEl.style.top = buttonPos.top + 'px';

            if( self.expanded ) {
                classie.removeClass( self.contentEl, 'no-transition' );
                classie.removeClass( self.el, 'open' );
            }
            else {
                setTimeout( function() { 
                    classie.removeClass( self.contentEl, 'no-transition' );
                    classie.addClass( self.el, 'open' ); 
                }, 25 );
            }
        }, 25 );
    }

    // add to global namespace
    window.UIMorphingButton = UIMorphingButton;

})( window );