Question

I have a small function that runs on load and window resize.. but the window resize is not working. Pretttty sure that the syntax is correct.. ’cause I’ve run functions off of window resize before. Can’t quite figure it out?

live site here:
http://guit.dhut.ch/

JavaScript:

(function( $ ){
    $.fn.respond = function() {

    /* initialize function on window load and resize */

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

    /* declare variables */

    var pic = this
    var browserWidth = $(window).width();
    var imgRatio = this.width() / this.height()
    var availableHeight = ($(window).height() - $('header').height() - $('footer').height() - 80)
    var browserRatio = browserWidth / availableHeight

    /* set image's height or width depending on the browser window's size */

    function dimensions() {
        if (browserRatio >= imgRatio ) {
            /* if the browser is landscape, set the image's height to fill the available space */
            //$('body').css('background', 'green');
            pic.height(availableHeight).width('auto');
        } else {
            /* if the browser is portrait, set the image's width to fill the browser width less margins */
            //$('body').css('background', 'red');
            pic.width(browserWidth - 40).height('auto');
        }
        center();
    };

    /* horizontally center content */

    function center() {
        pic.css('margin-left', (browserWidth - pic.width())/2);
    };

};
})( jQuery );

EDIT:

Thanks to @WTK, I’ve got it working. Below is the new code. There were several comments suggesting I use CSS. Here’s why I didn’t: This home page will have both landscape and portrait photos on it. If I were to set a percentage height for the image, say 100% of it’s container, the landscaped images would crop off the page after a certain size. This is pretty light and quick and allows my site to stay fully responsive.

JavaScript:

   (function( $ ){
    $.fn.respond = function() {

        /* initialize function on window load and resize */
        $(document).ready(function() {
            dimensions();
        });
        $(window).load(function() {     
            dimensions();
        });
        $(window).resize(function() {
            dimensions();
        });

        /* declare affected elements */
        var pic = this

        /* set image's height or width depending on the browser window's size */
        function dimensions() {

            /* declare variables */
            var browserWidth = $(window).width();
            var imgRatio = pic.width() / pic.height()
            var availableHeight = ($(window).height() - $('header').height() - $('footer').height() - 80)
            var browserRatio = browserWidth / availableHeight

            if (browserRatio >= imgRatio ) {
                /* if the browser is landscape, set the image's height to fill the available space */
                pic.height(availableHeight).width('auto');
            } else {
                /* if the browser is portrait, set the image's width to fill the browser width less margins */
                pic.width(browserWidth - 40).height('auto');
            }
            /* horizontally center content */
            pic.css('margin-left', (browserWidth - pic.width())/2);
        };


    };
})( jQuery );

Answer 1

At first glance, the reason its not reacting to resize event properly is because dimensions() and center() functions use variables initialized only once, while they should be computed at the time resize event occures. Otherwise you try to react to resize event but you’re using the same values over and over again, e.g. no matter what size browser is the availableHeight variable has the same value it had when you ran respond function for the first time.