Dynamically resizing a DIV based on the size of another DIV

JavaScript
1

Hello everyone,

I am wondering if it’s possible to re-size a div vertically based on the size of another div.

I have this code but it’s malfunctioning. Basically it takes the ID of the two divs and offset their height.

Example: The dynamic div will stretch or re-size vertically based on the size of the content div. So if the contents in the content div is increased, like text size, the the other div stretch to give equal height.

Here is my code:

 <script type="text/javascript">
<!--
function equalize() {

 var content=document.getElementById('content');
 var sideBar=document.getElementById('sideBar');

if(sideBar.offsetHeight>content.offsetHeight) {
  content.style.height=sideBar.offsetHeight+"pt";
}
else {
  sideBar.style.height=content.offsetHeight+"pt";
 }
}
onload=equalize;
//-->
</script>

I’ll appreciate any help!

Novice

2

This will do it for you, although you will need to adapt it to your requirements. The script looks for the target at the end of the script and determines the offsetTop. It then sets the height of the two divs so that they surround the increased text size.

Just hover over the text and the size will increase.

<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Div Change in Height</title>
<style type=“text/css”>
<!–
body { font-family:arial; font-weight:normal; color:#000; background-color:#FFF; }
#divOuter { position:absolute; top:20px; left:100px; width:200px; border:1px solid #F00; }
#divInner { position:relative; top:2px; left:2px; width:150px; border:1px solid #00F; text-align:left; cursor: pointer; }
.initFont { font-size:13px; }
.red { color:#F00; font-weight:bold; }
–>
</style>
<script type=“text/javascript”>
<!–
// mouseover/mouseout processing
function grow(ref)
{ var newFont=(ref==1)?“20px” : “13px”;
var elem=document.getElementById(“divInner”);
elem.style.fontSize=newFont;
// determines position of target
var offsetTrail=document.getElementById(“endTxt”);
var offsetTop=0;
while(offsetTrail) { offsetTop+=offsetTrail.offsetTop; offsetTrail=offsetTrail.offsetParent; }
// for Macs
if(navigator.userAgent.indexOf(“Mac”) != -1 && typeof document.body.leftMargin != “undefined”)
{ offsetTop+=document.body.topMargin;
}
// change height of both divs based on position of target span
var elem=document.getElementById(“divOuter”);
elem.style.height=offsetTop+2+“px”;
//
elem=document.getElementById(“divInner”);
elem.style.height=offsetTop+“px”;
//

}
// --------------
//–>
</script>
</head>

<body>

<div id=“divOuter”>
<div id=“divInner” class=“initFont” onmouseover=“grow(1)” onmouseout=“grow(2)”>
<p class=“red”>Hover over text to change size</p>
<p>Magnus es, domine, et laudabilis valde: magna virtus tua, et sapientiae
tuae non est numerus. et laudare te vult homo.</p>
<p>aliqua portio creaturae tuae, et homo circumferens mortalitem suam,
circumferens testimonium peccati sui et testimonium, quia superbis resistis<span id=“endTxt”>.</span>
</div>
<!-- end divInner –>
</div>
<!-- end divOuter –>

</body>

</html>