$(window).resize(); doesn't work

Question

I've got a problem with window.resize . My code js/jquery is here

var x = $(window).width();
var y = $(window).height();
var z = $('#card').height();
var a = z + 140; // !!!zmienic gdy zmiana marginesu z gory lub paddingu (100 margin + 20x2 padding)
var b = 1.78 * y;
var c = 1.78 * a;
function updateBodySize(){
    x = $(window).width();
    y = $(window).height();
    z = $('#card').height();
    a = z + 140; // !!!zmienic gdy zmiana marginesu z gory lub paddingu (100 margin + 20x2 padding)
    b = 1.78 * y;
    c = 1.78 * a;
    if (c>b) {
        if (x>c) {
            $('body').css({'background-size': x + 'px auto'});
        }
        else {
            $('body').css({'background-size': 'auto ' + c + 'px'});
        }
        $('body').css({'height': a + 'px'});
    }
    else {
        if (x>b) {
            $('body').css({'background-size': x + 'px auto'});
        }
        else {
            $('body').css({'background-size': 'auto ' + b + 'px'});
        }
        $('body').css({'height': y + 'px'});
    }
}
$(document).ready(updateBodySize()); //kiedy zaladowany
$(window).resize(updateBodySize());  //kiedy zmiana rozmiaru

Comments are in Polish but they aren't important. I want to run function updateBodySize every time browser is resized, but now this function runs only when document is ready (so i know that function works correct) (line last but one) and it looks like the last line is ignored. Is this line wrong $(window).resize(updateBodySize()); ? Or is something worng with my function? I checked this code in Chrome 33.

Answer 1

Your final two lines seem to be the problem here:

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

Should be:

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

Note the dropping of the () from updateBodySize - your aim is to pass the function updateBodySize to .ready and .resize , not its result . By call the function instead, what you're doing is passing the result of updateBodySize() to the .ready and .resize functions, in effect:

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

Which, as you've noticed, does nothing except what updateBodySize() does first (two) times you called it. Drop the () and it will be treated as the event handler you expect.

PS :

Unless you're using the first block of

var x = $(window).width();
var y = $(window).height();
var z = $('#card').height();
var a = z + 140;
var b = 1.78 * y;
var c = 1.78 * a;

before your function block, you can drop it, since you redefine those var inside the function, so it'll calculate them independantly any time it's called.

Answer 2

I think you have to use this, because the way you are doing it, the function is executed and the return value of the function is set as the callback function, which will not work:

$(document).ready(function() {
    updateBodySize();
}); //kiedy zaladowany
$(window).resize(function() {
    updateBodySize();
});  //kiedy zmiana rozmiaru

Answer 3

Try this:

$(function(){updateBodySize();}); //kiedy zaladowany
$(window).resize(function(){updateBodySize();}); 

Answer 4

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

Answer 5

Or you could try this:

window.onresize = updateBodySize;