Question

With the following function I center an object in the window if the user chooses so :

var showObj = function(obj) {

    setTimeout(function () {
        if(opts.centerObj == true) {
            var cssProps = {
                'position' :'absolute',
                'top' : (($(window).height() - $(obj).outerHeight()) / 2)+'px',
                'left' : (($(window).width() - $(obj).outerWidth()) / 2)+'px'
            }
            obj.css(cssProps).fadeIn('slow');
        }
            else {
                obj.fadeIn('slow');
            }
    }, 1500);

}

But I want to tweak this function or make another one which would center the object if the window resizes.

I’ve seen I can use this :

$(window).resize(function() {
   obj.css(cssProps);
});

But I think I’m wrong,because nothing happens when I resize the window.

So could someone show me how to create that function that does what I need or tweak the current function so it does that ?

Answer 1

That depends on where you are calling cssProps. Since it’s inside a private function it’s not accessible unless you tell it to be. I think the easiest way to do what you want is to pull out the bit of code that creates the JS object and put it into it’s own function.

var showObj = function(obj) {

    setTimeout(function () {
        if(opts.centerObj == true) {
            var cssProps = getProps(obj);
            obj.css(cssProps).fadeIn('slow');
        }
        else {
            obj.fadeIn('slow');
        }
    }, 1500);

}

var getProps = function(obj) {

    return {
        'position' :'absolute',
        'top' : (($(window).height() - $(obj).outerHeight()) / 2)+'px',
        'left' : (($(window).width() - $(obj).outerWidth()) / 2)+'px'
    }
}

$(window).resize(function() {
    var cssProps = getProps(obj);
    obj.css(cssProps);
});