Question

This is my first jQuery plugin and I think it is a pretty awesome one =). The plugin takes an element and ensures that it is always on screen. If the element is too large for the screen then as much of it is shown as possible. You can test a working example by simply scrolling up and down. Notice how the content does its best to stay with you.

My problem is that I don’t know how to handle a change in the window layout. Say a user resizes the window, how do I make my plugin handle it? I basically need to recalculate everything from scratch. I could bind to $(window).resize(), but where do I do that? In my main js block? In my plugin? What do I do inside of it?

I have a feeling that this is relatively straightforward, but my brain is freezing.

Answer 1

I would have a different code structure, something like this:

(function($){
    var _constants = { 
        default: {}
    }
    var _variables = { 
        options: {},
        jElement: undefined
    }

    var _private: {
        init: function(jElement, options){
            _variables.jElement = jElement;
            _variables.options = $.extend({}, _constants.default, options);
            _private.setSize();
            $(window).resize(_private.setSize);
            return jElement;
        },
        setSize: function(){

        }
        //... other private methods go here ...
    }

    $.fn.dynamicSidebar = function(options) {
       return _private.init($(this), options);
    }
)(jQuery);

Edited for relevance