0

So I have a jQuery plugin, which works very nicely. Inside this plugin, there is a HTML button assigned to the togglePushy(); method, and it works nicely.

However, I want to use this method from the Javascript console. The problem is if type $.togglePushy(); it says it's undefined. How can I access it ?

$(function() {
    var pushy = $('.pushy'), //menu css class
        body = $('body'),
        container = $('#container'), //container css class
        push = $('.push'), //css class to add pushy capability
        siteOverlay = $('.site-overlay'), //site overlay
        pushyClass = "pushy-left pushy-open", //menu position & menu open class
        pushyActiveClass = "pushy-active", //css class to toggle site overlay
        containerClass = "container-push", //container open class
        pushClass = "push-push", //css class to add pushy capability
        menuBtn = $('.menu-btn, .pushy a'), //css classes to toggle the menu
        menuSpeed = 200, //jQuery fallback menu speed
        menuWidth = pushy.width() + "px"; //jQuery fallback menu width

    function togglePushy(){
        body.toggleClass(pushyActiveClass); //toggle site overlay
        pushy.toggleClass(pushyClass);
        container.toggleClass(containerClass);
        push.toggleClass(pushClass); //css class to add pushy capability
    }

    function openPushyFallback(){
        body.addClass(pushyActiveClass);
        pushy.animate({left: "0px"}, menuSpeed);
        container.animate({left: menuWidth}, menuSpeed);
        push.animate({left: menuWidth}, menuSpeed); //css class to add pushy capability
    }

    function closePushyFallback(){
        body.removeClass(pushyActiveClass);
        pushy.animate({left: "-" + menuWidth}, menuSpeed);
        container.animate({left: "0px"}, menuSpeed);
        push.animate({left: "0px"}, menuSpeed); //css class to add pushy capability
    }

    menuBtn.click(function() {
        togglePushy();
    });
});
5
  • Doesn't look like jquery plugin to me. Try just togglePushy(); Commented Aug 13, 2014 at 8:10
  • Will not work, since this code is wrapped in a anonymous function which is passed to $... Commented Aug 13, 2014 at 8:10
  • I tried togglePushy(); and it says ReferenceError: togglePushy is not defined Typing $.togglePushy(); will cause TypeError: undefined is not a function Commented Aug 13, 2014 at 8:11
  • Well, since togglePushy() is the only line in the click handler, is there a specific reason that you can't just trigger menuBtn.click()? Commented Aug 13, 2014 at 8:15
  • menuBtn is also undefined. i don't know how to access properties and methods inside this object Commented Aug 13, 2014 at 8:18

3 Answers 3

1

Maybe you can change togglePushy to something like this:

$.togglePushy = function(){ 
    body.toggleClass(pushyActiveClass); //toggle site overlay
    pushy.toggleClass(pushyClass);
    container.toggleClass(containerClass);
    push.toggleClass(pushClass); //css class to add pushy capability
}

Now you should be able to access it as $.togglePushy()

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

Comments

0

I know not the best of the solution. But you can do this by keeping your functions outside the domaready event handler like following.

function togglePushy(){
    body.toggleClass(pushyActiveClass); //toggle site overlay
    pushy.toggleClass(pushyClass);
    container.toggleClass(containerClass);
    push.toggleClass(pushClass); //css class to add pushy capability
}

function openPushyFallback(){
    body.addClass(pushyActiveClass);
    pushy.animate({left: "0px"}, menuSpeed);
    container.animate({left: menuWidth}, menuSpeed);
    push.animate({left: menuWidth}, menuSpeed); //css class to add pushy capability
}

function closePushyFallback(){
    body.removeClass(pushyActiveClass);
    pushy.animate({left: "-" + menuWidth}, menuSpeed);
    container.animate({left: "0px"}, menuSpeed);
    push.animate({left: "0px"}, menuSpeed); //css class to add pushy capability
}

$(function() {
    var pushy = $('.pushy'), //menu css class
        body = $('body'),
        container = $('#container'), //container css class
        push = $('.push'), //css class to add pushy capability
        siteOverlay = $('.site-overlay'), //site overlay
        pushyClass = "pushy-left pushy-open", //menu position & menu open class
        pushyActiveClass = "pushy-active", //css class to toggle site overlay
        containerClass = "container-push", //container open class
        pushClass = "push-push", //css class to add pushy capability
        menuBtn = $('.menu-btn, .pushy a'), //css classes to toggle the menu
        menuSpeed = 200, //jQuery fallback menu speed
        menuWidth = pushy.width() + "px"; //jQuery fallback menu width



    menuBtn.click(function() {
        togglePushy();
    });
});

Then call the togglePushy() directly.

Comments

0

Your togglePushy() function is defined only in the context (scope) of the jQuery closure (anonymous function). Define it in the global scope instead (elsewhere in the file and not as a "function parameter").

If you need variables from that scope, encapsulate them in a namespace (an object), or declare it as window.togglePushy() = function() { /* ... */}.

or

$(document).ready(function() {
  ...
  .....
  window.togglePushy()= function() {
    //to do
  } 
});

or

$(document).ready(function(){
    $('button').click(function(){
        $.togglePushy();
    });
});

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.