How do run a script on window resize?

Question

I'm using Jquery to keep my aspect ratio when re-sizing. On small screens i want to use this script on a different class. It all seems to work just fine on first load.

But when i resize my window from big >768 to small < 767 the script wont work unless i reload. Strangely when i load the site in a small window <767 and resize it to big >768 the script does work and keeps working when re-sizing. Any idea how to resolve this?

if ($(window).width() > 768) {
    /* square featured-column1 box aanpassing */
    equalheight = function(container) {
        var currentTallest = 0,
            currentRowStart = 0,
            rowDivs = new Array(),
            $el,
            topPosition = 0;
        $(container).each(function() {
            $el = $(this);
            $($el).height('auto')
            topPostion = $el.position().top;

            if (currentRowStart != topPostion) {
                for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
                    rowDivs[currentDiv].height(currentTallest);
                }
                rowDivs.length = 0; // empty the array
                currentRowStart = topPostion;
                currentTallest = $el.height();
                rowDivs.push($el);
            } else {
                rowDivs.push($el);
                currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
            }
            for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
                rowDivs[currentDiv].height(currentTallest);
            }
        });
    }
    $(window).load(function() {
        equalheight('.featured-column');
    });

    $(window).resize(function() {
        equalheight('.featured-column');
    });
    /* Aspect ratio box (responsive rechthoek) aanpassing */
    $(document).ready(function() {
        aspectResize();
        $(window).resize(aspectResize);
    });
    aspectResize = function() {
        var $aspect = $('div.up-to-date-bar');
        var width = $aspect.width();
        $aspect.height(width / 3 * 1);
    }
}
/* Aspect ratio box (responsive rechthoek) aanpassing up-to-date-column*/
if ($(window).width() < 767) {
    $(document).ready(function() {
        aspectResize();
        $(window).resize(aspectResize);
    });
    aspectResize = function() {
        var $aspect = $('div.up-to-date-column');
        var width = $aspect.width();
        $aspect.height(width / 1 * 1);
    }
}

didn't notice there was more code below there. - can you reproduce the issue inside a jsfiddle — wirey00, Sep 24 '14 at 13:59
possible duplicate of [JQuery execution on window resize?](http://stackoverflow.com/questions/9828831/jquery-execution-on-window-resize) — Huangism, Sep 24 '14 at 19:08

Clayton Leis · Answer 1 · 2014-09-24T19:28:34.683

0

You can use http://api.jquery.com/resize/ to call a function on window resize.

$( window ).resize(function() {
    // Your code here
});

edited Sep 24 '14 at 19:28

answered Sep 24 '14 at 18:59

Clayton Leis

1,288
9
20

1

Is that what you wanted? A bit of context with your link would have been helpful ;-) – Clayton Leis Sep 24 '14 at 19:29
It's what 'everyone' wanted :) I'm one of the many users lucky enough to be tasked with reviewing low quality questions and answers on this site. Your answer was flagged for review. The comment I left was automatically generated by the review system when I told it that your answer shouldn't be deleted, but needed some work. Thanks for taking the time to add the context -- it all contributes to making the site better. – Software Engineer Sep 24 '14 at 19:32
I used the $( window ).resize(function() top run the "Aspect ratio box" scripts again and it works when resizing. There is still one small thing, when i use the "smaller window" button (to a window <767). After de first load, on the first time the script does not work. When i make the screen bigger again the script works an keeps working. For now not a problem but i still have to test this on a small tablet, big phone what happens when flipping. – user3766894 Sep 25 '14 at 10:45
If you want to manually trigger your resize handler, like on initial page load, you can use `$( window ).resize()`. It's hard to know what exactly is going on without seeing your site in action. Hopefully that helps. – Clayton Leis Sep 25 '14 at 13:57

How do run a script on window resize?

1 Answers1