Question

I am trying to make a script that will complete an equal height function above a certain resolution.

Once below that resolution I would like the script to turn off as the equal height columns go away on the mobile version of the site.

I would like this to execute on resize as well. Here is my code so far. This doesn’t work at all.

The stretch function does and has been tested outside of the check Width function.

Here is my Code :

Original Stretch Function

$(document).ready(function () {
    var $stretch = $(".eq");
    $stretch.animate({ height: $stretch.parent().height() }, 300 );
});

Resize Function That Does Not Work

$(document).ready(function() {
    // Optimalisation: Store the references outside the event handler:
    var $window = $(window);
    var $stretch = $("#narrow")
    var $stretch2 = $(".eq")

    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize > 440) {
            //if the window is greater than 440px wide then turn on jScrollPane..
            $stretch.animate({ height: $stretch.parent().height() }, 800 );
            $stretch.animate({ height: $stretch2.parent().height() }, 300 );                
        }
    }
    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
});

How can I do this?

Answer 1

For the jquery part

$(window).resize(function() {
    // do your stuff here

    checkWidth();
});

If you use media queries with combination of the js, keep in mind that the media query width and the $(window).width() are different due to scrollbar.