How Can i call from external js file

Question

I have a javascript file that contains the following objects and functions........

;( function( window ) {

    'use strict';

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

    // taken from https://github.com/inuyaksa/jquery.nicescroll/blob/master/jquery.nicescroll.js
    function hasParent( e, id ) {
        if (!e) return false;
        var el = e.target||e.srcElement||e||false;
        while (el && el.id != id) {
            el = el.parentNode||false;
        }
        return (el!==false);
    }

    // returns the depth of the element "e" relative to element with id=id
    // for this calculation only parents with classname = waypoint are considered
    function getLevelDepth( e, id, waypoint, cnt ) {
        cnt = cnt || 0;
        if ( e.id.indexOf( id ) >= 0 ) return cnt;
        if( classie.has( e, waypoint ) ) {
            ++cnt;
        }
        return e.parentNode && getLevelDepth( e.parentNode, id, waypoint, cnt );
    }


    // returns the closest element to 'e' that has class "classname"
    function closest( e, classname ) {
        if( classie.has( e, classname ) ) {
            return e;
        }
        return e.parentNode && closest( e.parentNode, classname );
    }

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;
        },



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

} )( window );

The question I have is how do I call the object _resetMenu in another script. to my poor knowledge it should be ......

window.mlPushMenu._resetMenu();

that should execute that object in my mind but it isn't working so clealy I am wrong ... Any help here would be much appreciated..

this is the example of the button I have created thus far.....

$('.iconM-referrals').on('click', function () {
      window.mlPushMenu._resetMenu();
      $("#colorscreen").remove();
     $("body").append('<div id="colorscreen" class="animated"></div>');
     $("#colorscreen").addClass("fadeInUpBig");
      $('.fadeInUpBig').css('background-color', 'rgba(13,135,22,0.3)');

well mlPushMenu is local to the script, it's not part of window. You could define it as a function in window so instead of function ml.... do window.mlPushMenu = function(el, trigger, .... — ZekeDroid
– ZekeDroid, Commented May 20, 2015 at 18:35
I ommited some code because i wanted to get to the point (stupid me).... this is also at the bottom of the file ... // add to global namespace window.mlPushMenu = mlPushMenu; — havingagoatit
– havingagoatit, Commented May 20, 2015 at 18:37
it is called from index.html .... the script i want to call it from is embedded in the index.html file also , (it refers to a button in the index.html) — havingagoatit
– havingagoatit, Commented May 20, 2015 at 18:40

Katana314 · Accepted Answer · 2015-05-20 18:41:33Z

1

The way you have mlPushMenu set up is as a Constructor, not as a stand-alone module. (See: Any tutorial on Object-Oriented programming) You'd need to construct an instance variable to call the function. For instance:

myInstanceOfPushMenu = new mlPushMenu();
myInstanceOfPushMenu._resetMenu();

This, however, is assuming that the script inclusion and declaration, and anything left out of your question, is all set up properly.

answered May 20, 2015 at 18:41

Katana314

8,6052 gold badges31 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

havingagoatit Over a year ago

ok i think that makes sense to me , we are assuming here that the index.html page will know what mlPushMenu is because it is included in the header

Katana314 Over a year ago

It should; you've properly added it to window, which is the global scope; unless there's something to do with frames going on here that I don't know about.

Daemedeor Over a year ago

it's valid, i'm using this exact menu in my own app.

havingagoatit Over a year ago

great thanks for the response , can i not just add what you wrote in your first response into the other function . It is a button so i have an on click with the function doing a few things with css , i was hoping to add a 1liner that called the object but doing what you are saying it is only two lines, (not lazy just learning)

Katana314 Over a year ago

Well, it seems based on Daemedeor's response this is part of some library I don't actually know about. (I had assumed it was your own code) I think to use it properly, you'd have to consult its documentation; it's possible there is in fact some way to do it as a one-liner.

|

Collectives™ on Stack Overflow

How Can i call from external js file

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related