Question

I have just currently started learning jQuery and I seem to be able to get it work how I want but I feel that the way that I am writting it is not very efficient. Could anyone assist me in this example below:

$('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});

    $(window).resize(function() {
        $('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});
    });

So here I am positioning a div in the center of the screen. And then it also does it again on window resize as its contents width properties are percentage values. It works perfectly but I can’t help but feel that there must be a better way to write this. Any help would be greatly appreciated. Thank you

Answer 1

You can cache the object and trigger the resize event, this way the resize handler is executed on DOM Ready.

$(window).resize(function() {
    var $elem = $('.tiles-wrapper');
    $elem.css({
        top: '50%',
        left: '50%',
        margin: '-' + ($elem.height() / 2) + 'px 0 0 -' + ($elem.width() / 2) + 'px'
    });
}).resize()