Access a jQuery subfunction

Question

it is my first time posting here, so please, be gentle when educating me :P

I have this plugin:

(function($) {

        $.fn.slimScroll = function(o)
        {

            var ops = o;
            //do it for every element that matches selector
            this.each(function(){

            var isOverPanel, isOverBar, isDragg, queueHide, barHeight,
                divS = '<div></div>',
                minBarHeight = 30,
                wheelStep = 30,
                o = ops || {},
                cwidth = o.width || 'auto',
                cheight = o.height || '250px',
                size = o.size || '7px',
                color = o.color || '#000',
                position = o.position || 'right',
                opacity = o.opacity || .4,
                alwaysVisible = o.alwaysVisible === true;

                //used in event handlers and for better minification
                var me = $(this);

                //wrap content
                var wrapper = $(divS).css({
                    position: 'relative',
                    overflow: 'hidden',
                    width: cwidth,
                    height: cheight
                }).attr({ 'class': 'slimScrollDiv' });

                //update style for the div
                me.css({
                    overflow: 'hidden',
                    width: cwidth,
                    height: cheight
                });

                //create scrollbar rail
                var rail  = $(divS).css({
                    width: '15px',
                    height: '100%',
                    position: 'absolute',
                    top: 0
                });

                //create scrollbar
                var bar = $(divS).attr({ 
                    'class': 'slimScrollBar ', 
                    style: 'border-radius: ' + size 
                    }).css({
                        background: color,
                        width: size,
                        position: 'absolute',
                        top: 0,
                        opacity: opacity,
                        display: alwaysVisible ? 'block' : 'none',
                        BorderRadius: size,
                        MozBorderRadius: size,
                        WebkitBorderRadius: size,
                        zIndex: 99
                });

                //set position
                var posCss = (position == 'right') ? { right: '1px' } : { left: '1px' };
                rail.css(posCss);
                bar.css(posCss);

                //wrap it
                me.wrap(wrapper);

                //append to parent div
                me.parent().append(bar);
                me.parent().append(rail);

                //make it draggable
                bar.draggable({ 
                    axis: 'y', 
                    containment: 'parent',
                    start: function() { isDragg = true; },
                    stop: function() { isDragg = false; hideBar(); },
                    drag: function(e) 
                    { 
                        //scroll content
                        scrollContent(0, $(this).position().top, false);
                    }
                });

                //on rail over
                rail.hover(function(){
                    showBar();
                }, function(){
                    hideBar();
                });

                //on bar over
                bar.hover(function(){
                    isOverBar = true;
                }, function(){
                    isOverBar = false;
                });

                //show on parent mouseover
                me.hover(function(){
                    isOverPanel = true;
                    showBar();
                    hideBar();
                }, function(){
                    isOverPanel = false;
                    hideBar();
                });

                var _onWheel = function(e)
                {


                    //use mouse wheel only when mouse is over
                    if (!isOverPanel) { return; }

                    var e = e || window.event;

                    var delta = 0;
                    if (e.wheelDelta) { delta = -e.wheelDelta/120; }
                    if (e.detail) { delta = e.detail / 5; }

                    //scroll content
                    scrollContent(0, delta, true);

                    //stop window scroll
                    if (e.preventDefault) { e.preventDefault(); }
                    e.returnValue = false;


                    clearTimeout(queueHide);
                    queueHide = setTimeout(function()
                    {
                        hideBar();

                    }, 1000);

                }


                var scrollContent = function(x, y, isWheel)
                {

                    //ensure bar is visible
                    showBar();

                    var delta = y;

                    if (isWheel)
                    {
                        //move bar with mouse wheel
                        delta = bar.position().top + y * wheelStep;

                        //move bar, make sure it doesn't go out
                        delta = Math.max(delta, 0);
                        var maxTop = me.outerHeight() - bar.outerHeight();
                        delta = Math.min(delta, maxTop);

                        //scroll the scrollbar
                        bar.css({ top: delta + 'px' });

                    }

                    //calculate actual scroll amount
                    percentScroll = parseInt(bar.position().top) / (me.outerHeight() - bar.outerHeight());
                    delta = percentScroll * (me[0].scrollHeight - me.outerHeight());

                    //scroll content

                    me.scrollTop(delta);

                }

                /*
                test = setInterval(function()
                {
                    showBar();

                    delta = $("#inner").prop("scrollHeight");

                    scrollContent(0, delta, true);


                }, 3000);
                */

                var attachWheel = function()
                {
                    if (window.addEventListener)
                    {
                        this.addEventListener('DOMMouseScroll', _onWheel, false );
                        this.addEventListener('mousewheel', _onWheel, false );
                    } 
                    else
                    {
                        document.attachEvent("onmousewheel", _onWheel)

                    }
                }

                //attach scroll events
                attachWheel();

                var getBarHeight = function()
                {
                    //calculate scrollbar height and make sure it is not too small
                    barHeight = Math.max((me.outerHeight() / me[0].scrollHeight) * me.outerHeight(), minBarHeight);
                    bar.css({ height: barHeight + 'px' });
                }


                //set up initial height
                getBarHeight();


                function define_delta(newdelta)
                {
                    delta = newdelta;               
                }

                var showBar = function()
                {
                    //recalculate bar height
                    getBarHeight();
                    clearTimeout(queueHide);

                    //show only when required
                    if(barHeight >= me.outerHeight()) {
                        return;
                    }
                    bar.fadeIn('fast');
                }

                var hideBar = function()
                {
                    //only hide when options allow it
                    if (!alwaysVisible)
                    {
                        queueHide = setTimeout(function(){
                            if (!isOverBar && !isDragg) { bar.fadeOut('fast'); }
                        }, 1000);
                    }
                }

            });

            //maintain chainability
            return this;
        }


})(jQuery);

What this plugin does is making a scrollbar like the one in Facebook where you can scroll an overflown div by mouse scroll or by draging the "scroll" div.

What I want to do is make a function that let's me tell the plugin the position of the scrollbar and the position of the overflown div from outside the function.

Example:

I call the plugin like this:

$('#inner').slimScroll({ height: '515px' });

And I sometimes I would like to add this:

$('#inner').slimScroll().define_delta(1500);

For that, I created the subfunction inside the plugin which changes the position of the delta variable that the script uses to position the scrollbar and the content. But I am no able to call the function. I tried several ways.

The method's one in the jQuery example page, but from one method I can't access the other method variables and change them...

I tried everything and searched here and everywhere, but my programming knowdlege and language are very limited, so this is kind of last attempt.

Answer 1

When you start learning about making a plugin, you'll see there are public and private functions. Public functions are more easily accessible from outside of the plugin. As a side, here is a nice plugin pattern resource.

So, I don't see any public functions in this plugin, but I think the easiest method/work-around would be to add a bind/trigger method. Basically it is done like this. Somewhere in the code, add this function:

me.bind('scrollContent', function(e,y){
    scrollContent(0,y,true);
});

me refers to the element the plugin was called on. The scrollContent function is the function that actually scrolls the content and moves the bar. 0 is the horizontal position of the window but oddly is isn't even referenced inside of the function, so I just set it to zero as a filler. y is the vertical position, but it is only used by the mousewheel calculations inside the function. true is a flag to tell the function that it is being called by the mousewheel function. I set this flag to true because the y isn't used to position the window, but in the mousewheel calculation of the delta to move the window down. Otherwise the delta is determined by the actual window position.

Now to use this method, just trigger an event named scrollContent on the element

$('#slimScroll').trigger('scrollContent', [1] );

The distance, it appears, is actually the number of wheelStep values to scroll down (default is 30). So can set that to a smaller number at the top of the plugin or modify it inside of the bind function since it is a global variable inside of the plugin. But please note it will effect the mousewheel functionality as well. Oh, and note that all values inside of the trigger function need to be in square brackets (made into an array).

Additionally, I made a demo :)