Question

I found this jQuery code that allows to center a div that doesn’t have fixed dimensions both horizontally and vertically. It works with the window height and width. So when I resize the window, the div is still centered within the window.

My issue is that, right now, it doesn’t work unless I resize the window first. So if I just load the page, the div isn’t centered unless I manually resize the window.

This, of course, is not ideal. So I’m trying to find a way around it. But my jQuery skills being very limited I’m stuck right now.

Here’s the page I’m working on: http://dev.manifold.ws/test2/ (try resizing the window to see what I’m describing)

And here’s the jQuery I’m using:

$(document).ready(function(){

$(window).resize(function(){

    $('.img-holder').css({
        position:'absolute',
        left: ($(window).width() - $('.img-holder').outerWidth())/2,
        top: ($(window).height() - $('.img-holder').outerHeight())/2
    });

});
// This is suppose to initially run the function but it doesn't seem to work
$(window).resize();

});

Does anyone have an idea of how to fix this?
Thanks!

-Thom

Answer 1

$(document).ready(function(){
    doResize();
    $(window).on('resize', doResize);
});

function doResize() {
    $('.img-holder').css({
        position:'absolute',
        left: ($(window).width() - $('.img-holder').outerWidth())/2,
        top: ($(window).height() - $('.img-holder').outerHeight())/2
    });
}

FIDDLE