jQuery $(window).resize Chrome not updating

Question

I am using jquery to get the height of a but this changes when someone resizes the browser. I am using the following code:

$(function() {
    var wheight = $('.home').height(); // Get height of browser window
    var wWidth = $(window).width(); // Get width of browser window
    if ( wWidth >= 992 ) {
        $('.home').css('height', wheight);
    }
})
$(window).resize(function() {
    var wheight = $('.home').height(); // Change the height of browser resize
    var wWidth = $(window).width(); // Change the width of browser resize
});

It works fine in Firefox however in Chrome it does not work when you shrink the browser window but it works if you expand the browser window. Any idea how I can fix this?

Answer 1

You are resizing the .home element on document ready. Not when the window is resized. Try:

var wheight, wWidth;

$(function() {

    wheight = $('.home').height();
    wWidth = $(window).width();

    if ( wWidth >= 992 ) {
        $('.home').css('height', wheight);
    }
});

$(window).resize(function() {

    wheight = $('.home').height(); // Change the height of browser resize
    wWidth = $(window).width(); // Change the width of browser resize

    if ( wWidth >= 992 ) {
        $('.home').css('height', wheight);
    }
});

Or even better:

var wheight, wWidth;

$(function () {

    resizeHome();
});

$(window).resize(function () {

    resizeHome();
});

function resizeHome() {

    wheight = $('.home').height(); // Change the height of browser resize
    wWidth = $(window).width(); // Change the width of browser resize

    if (wWidth >= 992) {
        $('.home').css('height', wheight);
    }
}