Equalizer function on resize

Question

I've function JS for superimpose 2 blocs (without absolute position in CSS). So i add height + margin-bottom identical.

My function work, but on resize, i don't understand why it does not work. The value don't change ..

Do you have any idea ?

var visual = document.getElementById('js-visual');

function equalizerVisualPageHeader() {

    var maxHeight = -1,
        elems = document.getElementsByClassName('equalizer');

    for (var i = 0; i < elems.length; i++) {
        maxHeight = maxHeight > elems[i].offsetHeight ? maxHeight : elems[i].offsetHeight;
    }

    for (var i = 0; i < elems.length; i++) {
        elems[i].style.height = maxHeight + 'px';
    }

    var visualHeight = visual.offsetHeight;

    visual.style.marginBottom = '-' + visualHeight + 'px';

}

if (visual != undefined) {
    equalizerVisualPageHeader();
}

window.addEventListener('resize', function() {
    equalizerVisualPageHeader();
});

Thank you !

Answer 1

You can use this .

 window.onresize = function () {
        var w = window,
        d = document,
        e = d.documentelement,
       g = d.getelementsbytagname('body')[0],
       x = w.innerwidth || e.clientwidth || g.clientwidth,
        y = w.innerheight || e.clientheight || g.clientheight;
           $("#style-1").height(y); 
        }