Question

I’m trying to augment the (very nice) jQuery Spotlight plugin so that I can programmatically invoke the “hide” behavior.

I’ve moved the related code into a hide() function, and it works fine when invoked from within spotlight itself. But when I try to invoke it from outside of spotlight nothing happens. I’ve checked that spotlight.hide is in fact defined to type function, but invoking it seemingly does nothing.

(function($) {

    $.fn.spotlight = function(options) {

        var hide = function() {
            alert('hiding...');   /* never gets invoked when called from outside spotlight */
            if(settings.animate){
                spotlight.animate({opacity: 0}, settings.speed, settings.easing, function(){
                    if(currentPos == 'static') element.css('position', 'static');
                    element.css('z-index', '1');
                    $(this).remove();
                    // Trigger the onHide callback
                    settings.onHide.call(this);
                });
            } else {
                spotlight.css('opacity', '0');
                if(currentPos == 'static') element.css('position', 'static');
                element.css('z-index', '1');
                $(this).remove();
                // Trigger the onHide callback
                settings.onHide.call(this);
            }
        };

        // Default settings
        settings = $.extend({}, {
            opacity: .5,
            speed: 400,
            color: '#333',
            animate: true,
            easing: '',
            exitEvent: 'click',
            onShow: function(){},
            onHide: function(){}
        }, options);

        // Do a compatibility check
        if(!jQuery.support.opacity) return false;

        if($('#spotlight').size() == 0){
            // Add the overlay div
            $('body').append('<div id="spotlight"></div>');

            // Get our elements
            var element = $(this);
            var spotlight = $('#spotlight');

            // Set the CSS styles
            spotlight.css({
                'position':'fixed', 
                'background':settings.color, 
                'opacity':'0', 
                'top':'0px', 
                'left':'0px', 
                'height':'100%', 
                'width':'100%', 
                'z-index':'9998'
            });

            // Set element CSS
            var currentPos = element.css('position');
            if(currentPos == 'static'){
                element.css({'position':'relative', 'z-index':'9999'});
            } else {
                element.css('z-index', '9999');
            }

            // Fade in the spotlight
            if(settings.animate){
                spotlight.animate({opacity: settings.opacity}, settings.speed, settings.easing, function(){
                    // Trigger the onShow callback
                    settings.onShow.call(this);
                });
            } else {
                spotlight.css('opacity', settings.opacity);
                // Trigger the onShow callback
                settings.onShow.call(this);
            }

            // Set up click to close
            spotlight.live(settings.exitEvent, hide);
        }

        // Returns the jQuery object to allow for chainability.  
        return this;
    };


})(jQuery);

I install it with:

      var spotlight = $('#media-fragment').spotlight({
          opacity: .5,
          speed: 400,
          color: '#333',
          animate: false,
          easing: '',
          exitEvent: 'click',
          onShow: function(){},
          onHide: function(){}
      });

And then to hide it I do:

spotlight.hide();

I’m pretty sure that there is a scope or this issue involved.

Update: full solution at https://gist.github.com/2910643.

Answer 1

Try changing:

var hide = function() {

to:

this.hide = function() {

var defines the scope of the function or variable within the parent scope, i.e. it’s essentially protected. this on the otherhand will explicitly set it on the parent object, prototype, and make it publicly accessible.