How can I change div height automatically on resize with javascript?

Question

Now I have working on window load code, but can't make it work with window resize (height values will increase if I repeat the same function for resize event). Array is to show initial values after onload completed.

var arr = [];

window.onload = function() {
    var newsBlocks = document.getElementsByClassName('news');
    for (var i = 0; i < newsBlocks.length; i++) {
      var newsBlock = newsBlocks[i];
      var left = newsBlock.getElementsByTagName('article')[0];
      var right = newsBlock.getElementsByTagName('article')[1];
      var height = Math.max(left.offsetHeight, right.offsetHeight);
      left.style.height = right.style.height = height.toString() + 'px';
      arr.push(left.style.height);
      console.log(arr);
     }
};

Here is html:

<div class="main">
    <section class="news">
        <article>
            <a href="#" class="news-image"><img src="images/t.png"></a>
            <h2><a href="#">Heading</a></h2>
            <a href="#" class="description">test text</a>
        </article>
        <article>
            <a href="#" class="news-image"><img src="images/t.png"></a>
            <h2><a href="#">Heading</a></h2>
            <a href="#" class="description">a lot of test text here</a>
        </article>
</div>

Pure JavaScript solution is appreciated. Thanks in advance for a help!

Div height will increment on each resize and grow faster than you expect creating huge padding-bottom value illusion :) — Glebcha, Sep 25 '13 at 09:06

score 0 · Answer 1 · edited May 23 '17 at 12:20

0

You should re-organize your code to be able to repaint the whole screen any time, and hook on the resize event, see: JavaScript window resize event

Resize event is called also on mobile devices, when they change orientation.

edited May 23 '17 at 12:20

Community

1
1

answered Sep 25 '13 at 09:04

ern0

3,062
23
35

I used window.onresize of course, but the main problem is that div height will only increment and grow fast6 but I need it to be the max value of tow divs in container that are fluid with width set to 50%. – Glebcha Sep 25 '13 at 09:09

score 0 · Answer 2 · answered Sep 25 '13 at 09:07

0

<div id=div1></div>


<script>
div1.style.height = (your preffered height)
</script>

same you can do with width.

it works for me ...

answered Sep 25 '13 at 09:07

Mayur Gupta

717
2
7
23

score 0 · Answer 3 · answered Sep 25 '13 at 09:10

try the following code. It is working for me.

var buffer = 20; //scroll bar buffer
var divId = document.getElementById('yourDivID');

function pageY(elem) {
    return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}

function resizeDiv() {
    var height = document.documentElement.clientHeight;
    height -= pageY(divId) + buffer;
    height = (height < 0) ? 0 : height;
    divId.style.height = height + 'px';
}

window.onresize = resizeDiv;

Thanks, but didn't work (first element with specified id has padding-bottom illusion). — Glebcha, Sep 25 '13 at 09:50

How can I change div height automatically on resize with javascript?

3 Answers3