1
var ssOffCanvas = function() {
           var menuTrigger = $('#header-menu-trigger'),
           nav             = $('#menu-nav-wrap'),
           closeButton     = nav.find('.close-button'),
           siteBody        = $('body'),
           mainContents    = $('section, footer');

        // open-close menu by clicking on the menu icon
        menuTrigger.on('click', function(e){
            e.preventDefault();
            menuTrigger.toggleClass('is-clicked');
            siteBody.toggleClass('menu-is-open');
        });
   };

proj_request_menu.onclick = function() {
    modal.style.display = "block";
};

What it the most suitable way to call ssOffCanvas object menuTrigger in proj_request_menu function. I know to handle this within the object. Ex: menuTrigger.trigger('click'); Need your help ...

1
  • You need to return menuTrigger from ssOffCanvas in order to access it outside the function.
    – Dominik
    Commented Jun 3, 2017 at 12:46

4 Answers 4

0

Fist you have to modify your object definition so your variable is accessible from the outside. Right now, when you create a variable inside the object with the var keyword (or const or let) its considered a private property that can only be used inside that object. So you have to make it a privileged one with the keyword this (privileged properties of the object can be accessed from the outside) like this:

var ssOffCanvas = function(){
    this.menuTrigger = $('#header-menu-trigger');
    ...
};

Note the this keyword in this.menuTrigger.

To get the property of the object first you have to instantiate it:

let myCanvas = new ssOffCanvas();

And then you will be able to get the property:

myCanvas.menuTrigger; // returns $('#header-menu-trigger') value

Do the same with the other properties. Let me know if it worked.

1
  • If you want your object property to be accessible from the outside what you have to do is to remove the var or let and use this.yourProperty. let does the same as the var keyword but the let variable is not accessible before declared and is not accessible from outside the block it is declared. Ideal for keeping your code error free because var does some weird stuff like hoisting that you want to avoid. Commented Jun 3, 2017 at 14:24
0

As menuMenuTrigger is not accessible from outside ssOffCanvas function the fastest way (least code to change) would be to pull it out of the current function like so:

// now menu Trigger is available on the global scope
// and could be called from everywhere
var menuTrigger = $('#header-menu-trigger');

var ssOffCanvas = function() {
   var nav             = $('#menu-nav-wrap'),
       closeButton     = nav.find('.close-button'),
       siteBody        = $('body'),
       mainContents    = $('section, footer');

    // open-close menu by clicking on the menu icon
    menuTrigger.on('click', function(e){
        e.preventDefault();
        menuTrigger.toggleClass('is-clicked');
        siteBody.toggleClass('menu-is-open');
    });
};

proj_request_menu.onclick = function() {
    modal.style.display = "block";

    // now it is available here, too.
    menuTrigger.trigger('click')
};

I am not quite sure if that is what you intended...

1
  • getting error "ReferenceError: menuTrigger is not defined"
    – pTi
    Commented Jun 3, 2017 at 13:07
0

since nothing workout added code into the object.

$('#proj_request_menu').on('click',function(){
            menuTrigger.trigger('click');
            });

Final Code As Follows:

var ssOffCanvas = function() {

           var menuTrigger = $('#header-menu-trigger'),
           nav             = $('#menu-nav-wrap'),
           closeButton     = nav.find('.close-button'),
           siteBody        = $('body'),
           mainContents    = $('section, footer');


        // open-close menu by clicking on the menu icon
        menuTrigger.on('click', function(e){
            e.preventDefault();
            menuTrigger.toggleClass('is-clicked');
            siteBody.toggleClass('menu-is-open');
        });

        // close menu by clicking the close button
        closeButton.on('click', function(e){
            e.preventDefault();
            menuTrigger.trigger('click');   
        });

        // close menu clicking outside the menu itself
        siteBody.on('click', function(e){       
            if( !$(e.target).is('#menu-nav-wrap, #header-menu-trigger, #header-menu-trigger span') ) {
                menuTrigger.removeClass('is-clicked');
                siteBody.removeClass('menu-is-open');
            }
        });
        $('#proj_request_menu').on('click',function(){
            menuTrigger.trigger('click');
            });

   };
var proj_request_menu= document.getElementById("proj_request_menu");
proj_request_menu.onclick = function() {
   modal.style.display = "block";
};
-1

Make menuTrigger global?

var menuTrigger=null;
var ssOffCanvas = function() {
       menuTrigger = $('#header-menu-trigger'),
       nav             = $('#menu-nav-wrap'),
       closeButton     = nav.find('.close-button'),
       siteBody        = $('body'),
       mainContents    = $('section, footer');

    // open-close menu by clicking on the menu icon
    menuTrigger.on('click', function(e){
        e.preventDefault();
        menuTrigger.toggleClass('is-clicked');
        siteBody.toggleClass('menu-is-open');
    });
};

proj_reququest_menu.onclick = function() {
if(menuTrigger) menuTrigger.trigger("click");
};
1
  • my requirement is to trigger code which uses to do open-close menu.
    – pTi
    Commented Jun 3, 2017 at 12:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.