Correct syntax for function/object

JavaScript
1

Hello,

I am trying to reference in a button click this particular object within this code I have setup… I am not entirely sure of the correct syntax and was looking for some advice…

function mlPushMenu( el, trigger, options ) {    
    this.el = el;
    this.trigger = trigger;
    this.options = extend( this.defaults, options );
    // support 3d transforms
    this.support = Modernizr.csstransforms3d;
    if( this.support ) {
        this._init();
    }
}

mlPushMenu.prototype = {
    defaults : {
        // overlap: there will be a gap between open levels
        // cover: the open levels will be on top of any previous open level
        type : 'overlap', // overlap || cover
        // space between each overlaped level
        levelSpacing : 40,
        // classname for the element (if any) that when clicked closes the current level
        backClass : 'mp-back'
    },
    _init : function() {
        // if menu is open or not
        this.open = false;
        // level depth
        this.level = 0;
        // the moving wrapper
        this.wrapper = document.getElementById( 'mp-pusher' );
        // the mp-level elements
        this.levels = Array.prototype.slice.call( this.el.querySelectorAll( 'div.mp-level' ) );
        // save the depth of each of these mp-level elements
        var self = this;
        this.levels.forEach( function( el, i ) { el.setAttribute( 'data-level', getLevelDepth( el, self.el.id, 'mp-level' ) ); } );
        // the menu items
        this.menuItems = Array.prototype.slice.call( this.el.querySelectorAll( 'li' ) );
        // if type == "cover" these will serve as hooks to move back to the previous level
        this.levelBack = Array.prototype.slice.call( this.el.querySelectorAll( '.' + this.options.backClass ) );
        // event type (if mobile use touch events)
        this.eventtype = mobilecheck() ? 'touchstart' : 'click';
        // add the class mp-overlap or mp-cover to the main element depending on options.type
        classie.add( this.el, 'mp-' + this.options.type );
        // initialize / bind the necessary events
        this._initEvents();
    },
    
    // close the menu
    _resetMenu : function() {
        this._setTransform('translate3d(0,0,0)');
        this.level = 0;
        // remove class mp-pushed from main wrapper
        classie.remove( this.wrapper, 'mp-pushed' );
        this._toggleLevels();
        this.open = false;
    },
2

you mean a pushMenu object created by that code?

3

Hi ! ,

Specifically I have a button somewhere else and want to ref the _resetMenu bit so far I have got …

$(‘.iconM-referrals’).on(‘click’, function () {
window.mlPushMenu._resetMenu;

that doesn’t work

… I also think what you are asking is generally yes… the code I originally posted is grat and works well but i am trying to re-use the _resetMenu bit and unsure how to call it elsewhere

4

you have to call it from an object. e.g.

var pushMenu = new mlPushMenu(...);
$('.iconM-referrals').on('click', pushMenu._resetMenu.bind(pushMenu));

calling the function from the definition makes no sense since this is either window or throws an error (strict mode).

5

that didn’t work , I now have …

var pushMenu = new mlPushMenu(...);
$('.iconM-referrals').on('click', pushMenu._resetMenu.bind(pushMenu), function () {
     $("#colorscreen").remove();
     $("body").append('<div id="colorscreen" class="animated"></div>');
     $("#colorscreen").addClass("fadeInUpBig");
     $('.fadeInUpBig').css('background-color', 'rgba(13,135,22,0.3)');
     $(".tile-group.main").css({ width: "720px"}).load("musability-musictherapy-company-overview.html");  
});
6

well, you should at least put in the correct parameters …

additionally, jQuery event listeners do not work with two handler functions.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.