Mike Vierwind
Mike Vierwind

Reputation: 1520

equalHeight with resize for responsive

I have a code with equalHeight. To set colums the same height. But i used window resize. That the script is only works on desktop and tablets and not and mobile. I have this script. This script is working, but how can i make this script better? Because i used now two times the same function.

How can i make this better?

var viewportWidth = $(window).width();
if ((viewportWidth >= 760)) {
    setTimeout(function() {
        equalHeight($('#footer .column'));
    }, 250);
};
$(window).resize(function() {
    var viewportWidth = $(window).width();
    if ((viewportWidth >= 760)) {
        setTimeout(function() {
            equalHeight($('#footer .column'));
        }, 250);
    };
});

Upvotes: 0

Views: 87

Answers (3)

asifsid88
asifsid88

Reputation: 4701

Try this way

$(document).ready(function() {
    resizeFunction();

    $(window).resize(function() {
        resizeFunction();
    });
});

var resizeFunction = new function() {
    var viewportWidth = $(window).width();
    if ((viewportWidth >= 760)) {
        setTimeout(function() {
            equalHeight($('#footer .column'));
        }, 250);
    };
}

Upvotes: 0

Eli
Eli

Reputation: 14827

You can define a custom function and call it whenever you need:

function changeWidth() {
    var viewportWidth = $(window).width();
    if ((viewportWidth >= 760)) {
        setTimeout(function() {
            equalHeight($('#footer .column'));
        }, 250);
    };
}

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

Upvotes: 1

dfsq
dfsq

Reputation: 193291

You can avoid duplicates by triggering resize event like this:

$(window).resize(function() {
    var viewportWidth = $(window).width();
    if ((viewportWidth >= 760)) {
        setTimeout(function() {
            equalHeight($('#footer .column'));
        }, 250);
    };
})
.trigger('resize');

Upvotes: 0

Related Questions