CODEWITHSUNDEEP
javascript
Steve
Steve

Reputation: 1765

Javascript: make two div same height

Caveat: I'm not a developer.

At this site, I have an issue where a slider's height will not match the height of the div to the right of it:

<div id="front-page-slide">
    <div id="slider">[rev_slider alias="home"]</div>
    <div id="boxes">
        <table width="459" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td bgcolor="#8A0E02" style="color: #FFF; padding: 1em; font-size: 1em;">Freightplus know what they are doing. I was very satisfied with their work and will use them for any further freight needs. 
              <br />
              <br />
            -Customer 1</td>
          </tr>
          <tr>
            <td><iframe src="https://player.vimeo.com/video/43915936?title=0&byline=0&portrait=0" width="459" height="auto" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></td>
          </tr>
          <tr>
            <td><img src="http://freightplus.com/beta/wp-content/uploads/2017/01/freight-plus-map.jpg" alt="Freight Plus" /></td>
          </tr>
          <tr>
            <td><img src="http://freightplus.com/beta/wp-content/uploads/2017/01/freight-plus2.jpg" alt="Freight Plus" /></td>
          </tr>
        </table>
    </div>.
</div>

<script type="text/javascript">
    var left=document.getElementById('slider').style.height;
    var right=document.getElementById('boxes').style.height;
    if(left>right) {
        document.getElementById('boxes').style.height=left;
    }
    else {
        document.getElementById('slider').style.height=right;
    }
</script>

The above Javascript fires after the HTML code, but is not taking effect.

Upvotes: 0

Views: 1340

Answers (2)

psycho
psycho

Reputation: 102

Seems your style.height is empty for both slider and boxes divs, use clientHeight instead. Use window.onload function to make sure your code runs just after element loads.

<script type="text/javascript">
    window.onload = function() {
        var left=document.getElementById('slider').clientHeight;
        var right=document.getElementById('boxes').clientHeight;
        if(left>right) {
            document.getElementById('boxes').style.height=left+"px";
        }
        else {
            document.getElementById('slider').style.height=right+"px";
        }
    };
</script>

Upvotes: 0

Jaromanda X
Jaromanda X

Reputation: 1

left and right will be '' because neither of those divs have any inline style

You'll want to use getBoundingClientRect

var left=document.getElementById('slider').getBoundingClientRect().height;
var right=document.getElementById('boxes').getBoundingClientRect().height;
if(left>right) {
    document.getElementById('boxes').style.height=left + 'px';
}
else {
    document.getElementById('slider').style.height=right + 'px';
}

Upvotes: 2

Related Questions