jQuery function triggered on window resize but not on page load

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

Answer 2

Try this:

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

$(document).ready(adoptToSize);
$(window).resize(adoptToSize);

Answer 3

Why not

$(document).ready(function() { 
    resize();
});

$(window).resize(function(){
    resize();    
});

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

Answer 4

Try this. You cannot call a callback function like these.

$(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
});

});

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

});

Answer 5

Try something like:

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

  $(function(){ resizeWin() });
  $(window).bind('resize',resizeWin);
}(jQuery, window, undefined);

Answer 6

Remember that $(document).ready happens after the DOM is ready, but before all content is loaded.

Your <img /> may not have loaded when you first trigger the resize function...
Try using the document's load event, or the image's load event.

The best solution here, however, is to give the image a fixed size:

<img src="img/test.jpg" style="width:800px;height:519px;" />

or:

.img-holder img {width:800px;height:519px;}

Answer 7

Bind it both the load and resize event at the same time as below:

$(window).on('load resize', function () {
// your code
});

Hope this helps.