Question

I’ve this calling:

$(document).ready(function () {
    $("#back").DynamicallyCentering({
        Alignment: "Vertical",
        Speed: 5
    });
    $(window).resize(function () {
        $("#back").DynamicallyCentering({
            Alignment: "Vertical",
            Speed: 5
        });
    });
});

DynamicallyCentering plugin:

jQuery.fn.DynamicallyCentering = function(Options) {
    var Block = $(this);
    var Defaults = {
        Alignment: "Both",
        Speed: 0
    };
    var Options = $.extend(Defaults, Options);
    var FormatedAlignment = Defaults.Alignment.toLowerCase();
    var VerticalFormula = ($(window).height() / 2) - (Block.height() / 2);
    var HorizontalFormula = ($(window).width() - Block.width()) / 2 + $(window).scrollLeft();
    StaticPositioning = function() {
        var PositioningSource;
        if (FormatedAlignment == "vertical") {
            var PositioningSource = Block.css("margin-top", VerticalFormula);
        } else if (FormatedAlignment == "horizontal") {
            var PositioningSource = Block.css("margin-left", HorizontalFormula);
        } else {
            var PositioningSource =
            Block.css("margin", VerticalFormula + "px " + HorizontalFormula + "px");
        }
        return PositioningSource;
    }
    StaticPositioning();
};​

As you can see, I’ve a little plugin that ‘r trying to center dynamically a layer (in this case, “#back”), and this isn’t looking right for me. Then I ask: is this the right way to dynamically centering my layer?

=== Edit ===

Sorry for the question without clearly. To be more specific in my question, I bring more details:

• I have one necessity: centering dynamically a container;

I can do this with jQuery. My code was posted before in this same thread, and he works fine. But I don’t know if I’m doing that in the right way. Can you all understand me? As you can see in my code’s calling, I’m repeating code, and this looking wrong for me.

Anyone know if have a better way to do this using the OOP concept or not?

Thanks in advance.

Answer 1

This code looks and works fine for me. If you’re referring to the repeated code of calling your plugin twice, you can extract that into another function:

var center = function() {
    $("#back").DynamicallyCentering({
            Alignment: "Vertical",
            Speed: 5
        });
}

center();
$(window).resize(center);