Dynamically setting DIV height in relation to another DIV

Question

I'm trying to set a div's height in relation to another div. 'gridimg' has an image in it and 'gridtext' has text so when the page is resized, the div containing the text changes height. I have the following code in a .js file:

window.onresize = function resize() {

var right = document.getElementById('gridimg').style.height;
var left = document.getElementById('gridtext').style.height;

document.getElementById('gridimg').style.height=left;

});

I'm trying to get it to call this function when the window is resized so the divs stay the same size but it's not working. I'm new to external javascript so could anyone help me :)

I assume the divs are siblings of each other? Why can't you use something like `flexbox` and avoid JS altogether? — Brett, Apr 04 '17 at 14:59
Also, why is your question tagged `jQuery` when you are not even making use of `jQuery` ? I assume this means an acceptable answer can use jQuery? — Brett, Apr 04 '17 at 15:00
Would flexbox be able to effectively crop an image to the height of a text box as the window is resized? — Drew Marriott, Apr 04 '17 at 15:38
It depends on the method used to put the image in the element. — Brett, Apr 04 '17 at 16:31

score 0 · Accepted Answer · answered Apr 04 '17 at 15:06

0

If you want to read an element height, you have to use the offsetHeight property. The style.height is for setting the height.

http://codepen.io/bajzarpa/pen/oZVOrL

answered Apr 04 '17 at 15:06

Arpad Bajzath

896
8
19

So using yours as an example, what I am looking for is the image div to set to the height of the text div. And then when the page shrinks and the text wraps (text div gets taller) I want the image div to do the same. Does that make sense? – Drew Marriott Apr 04 '17 at 15:34

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

0

I would write a function to check for resize and get the #gridimg height like this answer: Call a function when window is resized

Then watch for it like this:

$(window).resize(function () {
    yourMethod( $('#gritext'));
});

Similar: https://stackoverflow.com/a/15205712/6254070

edited May 23 '17 at 12:17

Community

1
1

answered Apr 04 '17 at 15:06

smurtagh

1,187
9
17

I think this is what I'm looking for but how would I implement it, do I literally wrap my current js code in what you've written? – Drew Marriott Apr 04 '17 at 15:31
You won't need `window.onresize` since the JQuery has the watch and call covered, but if your function works, yes. Your current function is not reusable, but seems like it will work for those specific divs. Just delete the `$(...)` part from the JQuery and call the function. If your function is working and accessible to the global scope, jquery should be able to call it. However, if your specific function is going to be accessible to global scope you should probably rename it to be less generic. I would write the function for you, but is important you learn how =D – smurtagh Apr 04 '17 at 16:24

score 0 · Answer 3 · answered Apr 04 '17 at 15:44

Here's a code snippet showing how to do that, based loosely on the W3 Tryit:

<!DOCTYPE html>
<html>
<body onresize="myFunction()">

<style>
#thetext {
  width: 100%;
  height: 50px;
  display: block;
  clear: both;
  overflow: hidden;
}

#otherdiv {
  background-color: green;
  display: block;
  clear: both;
  overflow: hidden;
}
</style>

<p>Try to resize the browser window to display the windows height and width.</p>

<p id="demo"></p>

<div id="thetext"><strong>Note:</strong> this example will not work properly in IE8 and earlier. IE8 and earlier do not support the outerWidth/outerHeight propery of the window object.</div>

<div id="otherdiv"></div>

<script>
function myFunction() {

    setTimeout(function() {
      var sourceEl = document.getElementById('thetext');
      var targetEl = document.getElementById('otherdiv');

var newHeight = sourceEl.offsetHeight;
//  || sourceEl.getBoundingClientRect().height;

      targetEl.width = sourceEl.offsetWidth;
      targetEl.style.height = newHeight + 'px';

      var w = targetEl.offsetWidth;
      var h = targetEl.offsetHeight;
      var txt = "Target size: width=" + w + ", height=" + h;
      document.getElementById('demo').innerHTML = txt;
    }, 0);
}
</script>

</body>
</html>

Dynamically setting DIV height in relation to another DIV

3 Answers3