Resizing child elements when parent Div is resized.

This site is best viewed in a modern browser with JavaScript enabled.

Resizing child elements when parent Div is resized.

sheishmaster

Hi guys,

I am fairly new to web development and I have started developing my own site. What I have is a DIV that contains different elements such as a textarea/text box etc.

At the moment I can get the div to be movable & resizable using external js scripts. However, what I need is when I resize the parent div, all child divs/elements resize also (similar to having anchors set on form components in a Win32 application). At the moment they do not stretch so the DIV overlaps.

The idea is to have something similar to an MSN conversation box i.e. you can only resize them to a certain width/height & when you resize the parent the inner elements resize with it.

Any help would be appreciated,
Cheers!
James.

TheBearMay

I'd look to using CSS to set dynamic sizes based on the container object (I'll use inline for the example but you'll want to look at setting up some classes).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Dynamic Sizes</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>
<div style="height:600px;width:800px;border:2px inset blue" id="rSizeMe">
	<textarea style="width:85&#37;;border:2px outset black"></textarea>
</div>
<button onclick="document.getElementById('rSizeMe').style.width='300px'">Resize</button>
</body>
</html>

sheishmaster

Hi, thanks for your reply!

Basically what you have done is pretty much what I am looking to do. However, I need it to be dynamic i.e. the user can resize the parent div with the mouse....as the parent div is resizing the child elements resize accordingly.

Any samples of how this could be achieved?

Thanks.

TheBearMay

Been a while since I needed to do that, let me search my archives and get back to you.

TheBearMay

Couldn't find the example I wanted so let's just modify the example above a little...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Dynamic Sizes</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var tempX;
var tempY;
function getOffsets (evt) {

    if (!evt) {
            tempX = event.clientX + document.body.scrollLeft;
            tempY = event.clientY + document.body.scrollTop;
    }
    else {
            tempX = evt.pageX;
            tempY = evt.pageY;
    }
}
function getOffsetEnd(){
	document.getElementById("rSizeMe").style.width= (tempX-parseInt(document.getElementById("rSizeMe").offsetLeft))+"px";

}
document.onmousemove = getOffsets;
document.onmouseup = getOffsetEnd;
</script>
</head>

<body>
<div style="height:600px;width:800px;border:2px inset blue" id="rSizeMe">
	<textarea style="width:85&#37;;border:2px outset black"></textarea>
</div>
<button onclick="document.getElementById('rSizeMe').style.width='300px'">Resize</button>
</body>
</html>

The key is to determine where the mouse is in relationship to the div. The code above monitors the mouse coordinates, and when the mouse is clicked determines the difference in the width.

sheishmaster

Hey thanks for the info. I think I can modify that code to work for what I need.

James.