jQuery function triggered on window resize but not

问题:

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

回答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

回答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);

回答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
    });
}

回答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
});

});

回答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);

回答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;}

回答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.