Reputation: 333

Javascript calling a function within a function

I'm using a jquery plugin for a slider. It contains a pauseSlide function which I am trying to call from outside. Here is the plugin:

(function ($) {
    $.fn.liteSlider = function (options) {

        var defaults = {
            content: '.content',
            width: 500,
            height: 250,
            autoplay: false,
            delay: 3,
            buttonsClass: '',
            activeClass: '',
            controlBt: '',
            playText: ' Play',
            pauseText: 'Pause'
        };

        var options = $.extend(defaults, options);

        var slideNo = 1;
        var timer = 0;
        var playStatus = options.autoplay;
        var thisClass = ($(this).attr('class')).split(' ');
        var theClass = '.' + thisClass[0];
        var count = 0;
        var slides;
        var currentSlide = 1;
        var delay = parseInt(options.delay) * 1000;

        $(this).children(options.content).each(function () {
            slides = ++count;
        });

        function wrapContent(ele) {
            ele.wrap('<div class="sliderContentsWrap" />');
        }

        function applyCss(ele) {
            $('.sliderContentsWrap').css({
                padding: 0,
                margin: 0,
                width: options.width,
                height: options.height,
                overflow: 'hidden',
                position: 'relative'
            });

            ele.css({
                padding: 0,
                margin: 0,
                width: options.width * slides,
                height: options.height,
                position: 'absolute'
            });

            ele.children(options.content).css({
                float: 'left',
                width: options.width,
                height: options.height
            });
        }

        function resetButtons() {
            i = 0;
            $('.' + options.buttonsClass).each(function () {
                i++;
                $(this).addClass('bt' + i);
                $(this).attr('rel', i);
            });
        }

        function goToSlide(theSlide) {

            var animateLeft = -(options.width) * (parseInt(theSlide) - 1);
            $('.sliderContentsWrap' + ' ' + theClass)
                .animate({
                left: animateLeft
            });

            $('.' + options.buttonsClass).each(function () {
                $(this).removeClass(options.activeClass);
                if ($(this).hasClass('bt' + theSlide)) {
                    $(this).addClass(options.activeClass)
                }
            });

            currentSlide = theSlide;
        }

        function autoplay() {
            if (currentSlide < slides) {
                goToSlide(parseInt(currentSlide) + 1);
            } else {
                goToSlide(1);
            }
        }

        function playSlide() {
            clearInterval(timer);
            timer = setInterval(function () {
                autoplay();
            }, delay);

            $(options.controlBt).text(options.pauseText);
            playStatus = true;
        }

        function pauseSlide() {
            clearInterval(timer);
            $(options.controlBt).text(options.playText);
            playStatus = false;
        }

        function init(ele) {
            wrapContent(ele);
            applyCss(ele);
            resetButtons();

            if (options.autoplay == true) {
                playSlide()
            } else {
                pauseSlide();
            }
        }

        return this.each(function () {
            init($(this));

            $('.' + options.buttonsClass).click(function (e) {
                e.preventDefault();
                pauseSlide();
                goToSlide($(this).attr('rel'));
            });

            $(options.controlBt).click(function (e) {
                e.preventDefault();
                if (playStatus == true) {
                    pauseSlide()
                } else {
                    playSlide()
                };
            });

        });

    };

    //added this
    $.liteSlider = {
        pause: function() {
            alert('clicked');
            pauseSlide();
        }
    };   

})(jQuery);

Outside of this I am using $.liteSlider.pause(); which displays the alert but it doesn't run the pauseSlide() function. Any suggestions?

Upvotes: 1

Answers (3)

Flo Schild

Reputation: 5304

Regarding the plugins authoring of jQuery, especially the namespacing point: http://docs.jquery.com/Plugins/Authoring#Namespacing

[...] you should collect all of your plugin's methods in an object literal and call them by passing the string name of the method to the plugin. [...]

(function($) {
    var YourPluginMethods = {
        init: function (options) {
            return this.each(function () {

            });
        },
        pauseSlide : function(options) {
            return this.each(function () {
                // Do some stuff for each instance of your plugin here
            });
        }
    };

    $.fn.YourPlugin = function(method) {        
        // Method calling logic
        if (YourPluginMethods[method]) {
            return YourPluginMethods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (!method || typeof method === 'object') {
            return YourPluginMethods.init.apply(this, arguments);
        } else {
            $.error('Method ' +  method + ' does not exist on jQuery.YourPlugin');
        }
    };
})(jQuery);

$('your-selector').YourPlugin('pauseSlide', {
    speed: 'slow'
});

Once you have declared your methods this way, your can call it on any HTML selector.

Upvotes: 3

Benjamin

Reputation: 749

pauseSlide is out of scope. An easy way around this might be to declare var pauseSlide; somewhere in scope, then assign it later.

(function ($) {
    var pauseSlide;

    $.fn.liteSlider = function (options) {

        var defaults = {
            content: '.content',
            width: 500,
            height: 250,
            autoplay: false,
            delay: 3,
            buttonsClass: '',
            activeClass: '',
            controlBt: '',
            playText: ' Play',
            pauseText: 'Pause'
        };

        var options = $.extend(defaults, options);

        var slideNo = 1;
        var timer = 0;
        var playStatus = options.autoplay;
        var thisClass = ($(this).attr('class')).split(' ');
        var theClass = '.' + thisClass[0];
        var count = 0;
        var slides;
        var currentSlide = 1;
        var delay = parseInt(options.delay) * 1000;

        $(this).children(options.content).each(function () {
            slides = ++count;
        });

        function wrapContent(ele) {
            ele.wrap('<div class="sliderContentsWrap" />');
        }

        function applyCss(ele) {
            $('.sliderContentsWrap').css({
                padding: 0,
                margin: 0,
                width: options.width,
                height: options.height,
                overflow: 'hidden',
                position: 'relative'
            });

            ele.css({
                padding: 0,
                margin: 0,
                width: options.width * slides,
                height: options.height,
                position: 'absolute'
            });

            ele.children(options.content).css({
                float: 'left',
                width: options.width,
                height: options.height
            });
        }

        function resetButtons() {
            i = 0;
            $('.' + options.buttonsClass).each(function () {
                i++;
                $(this).addClass('bt' + i);
                $(this).attr('rel', i);
            });
        }

        function goToSlide(theSlide) {

            var animateLeft = -(options.width) * (parseInt(theSlide) - 1);
            $('.sliderContentsWrap' + ' ' + theClass)
                .animate({
                left: animateLeft
            });

            $('.' + options.buttonsClass).each(function () {
                $(this).removeClass(options.activeClass);
                if ($(this).hasClass('bt' + theSlide)) {
                    $(this).addClass(options.activeClass)
                }
            });

            currentSlide = theSlide;
        }

        function autoplay() {
            if (currentSlide < slides) {
                goToSlide(parseInt(currentSlide) + 1);
            } else {
                goToSlide(1);
            }
        }

        function playSlide() {
            clearInterval(timer);
            timer = setInterval(function () {
                autoplay();
            }, delay);

            $(options.controlBt).text(options.pauseText);
            playStatus = true;
        }

        pauseSlide = function() {
            clearInterval(timer);
            $(options.controlBt).text(options.playText);
            playStatus = false;
        }

        function init(ele) {
            wrapContent(ele);
            applyCss(ele);
            resetButtons();

            if (options.autoplay == true) {
                playSlide()
            } else {
                pauseSlide();
            }
        }

        return this.each(function () {
            init($(this));

            $('.' + options.buttonsClass).click(function (e) {
                e.preventDefault();
                pauseSlide();
                goToSlide($(this).attr('rel'));
            });

            $(options.controlBt).click(function (e) {
                e.preventDefault();
                if (playStatus == true) {
                    pauseSlide()
                } else {
                    playSlide()
                };
            });

        });

    };

    //added this
    $.liteSlider = {
        pause: function() {
            alert('clicked');
            pauseSlide();
        }
    };

Upvotes: 0

Morgan ARR Allen

Reputation: 10678

The problem is that the call to pauseSlide is not in the same scope as the declaration.

Upvotes: 0

Javascript calling a function within a function

Answers (3)

Related Questions