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

possible duplicate of [jQuery resize function doesn't work on page load](http://stackoverflow.com/questions/2597152/jquery-resize-function-doesnt-work-on-page-load) — davidcondrey, Jun 09 '15 at 09:02

score 5 · Accepted Answer · answered Aug 16 '12 at 18:56

5

$(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

answered Aug 16 '12 at 18:56

adeneo

312,895
29
395
388

Hi adeneo, thanks for your suggestion. Unfortunately, it still doesn't work. Looking at your fiddle, I notice that the only thing that's different from my code is that you assigned fixed width and height to the .img-holder. And it does in fact work when I also assign fixed dimensions to the classe. But I can't do that because it prevents image from resizing when I resize the window. That's the whole point why I was using jQuery to center the image in the first place. Any idea how I could make it work? Thanks! – thom_p Aug 16 '12 at 19:25
You're doing something wrong or I have no idea what you're doing? If you set the image size to 100% it should scale to the parent element, and the `.img-holder` element needs to have a size if you are going to get a width and height to do the resize calculations in your javascript, otherwise it will in most cases just return "auto". – adeneo Aug 16 '12 at 19:29

score 0 · Answer 2 · answered Aug 16 '12 at 18:56

0

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

answered Aug 16 '12 at 18:56

Ridcully

23,362
7
71
86

@ComputerArts Well adeneo was even faster :) – Ridcully Aug 16 '12 at 19:15
Hi Ridcully, thanks for your suggestion. Your code works when I assign fixed dimensions to the img-holder class. But when I don't, I'm still stuck with the same issue. The reason why I don't want to assign fixed dimensions to the img-holder is because I'm using a max-width:100% on img so that they will resize for a smaller window. Any idea how I could make the jQuery work without assigning dimensions to the img-holder div's? Thanks! – thom_p Aug 16 '12 at 19:29
@thom_p: I think Kobi is right, that you should make the first call to adoptToSize() on the load event, not the ready event, because (as jquery proudly states) the ready event is fired as soon as the HTML of the page is loaded, prior to loading all the images and other stuff. At this time (image not loaded) the size of the image is not known yet, so the calculations will not work correctly. At the time the load event is fired, everything should be loaded, so the image's size should be available. – Ridcully Aug 18 '12 at 19:37

score 0 · Answer 3 · answered Aug 16 '12 at 18:57

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

score 0 · Answer 4 · answered Aug 16 '12 at 18:58

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

});

Kobi · Answer 5 · 2012-08-16T19:09:59.757

0

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

edited Aug 16 '12 at 19:09

answered Aug 16 '12 at 19:03

Kobi

135,331
41
252
292

OK, didn't get too far with CSS. I'm pretty sure you can use `display:table-cell` to vertically align the content, but I think you will need a few more elements. – Kobi Aug 16 '12 at 19:34
Hi Kobi, you're right, it is working when I give a fixed size to the image or the div. However, the reason why I'm relying on jQuery to center the image is because I'm using a max-width:100% on img so that they'll resize when the window is smaller. But if I assign fixed dimensions to the img or the div, it no longer resizes when the window is smaller. Any idea how to make the jQuery work without having to give a fixed size to the image or div? Thanks! – thom_p Aug 16 '12 at 19:35
@thom_p - Hello - Try to use the `load` event: `$(document).on('load` instead of `$(document).ready(`. – Kobi Aug 16 '12 at 19:52

score 0 · Answer 6 · answered Aug 16 '12 at 19:04

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

score 0 · Answer 7 · answered Apr 28 '16 at 16:45

0

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

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

Hope this helps.

answered Apr 28 '16 at 16:45

anti000gravity

403
3
7

jQuery function triggered on window resize but not on page load

7 Answers7

Linked