Resizing child elements when parent Div is resized.
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.
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).
HTML Code:
<!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%;border:2px outset black"></textarea></div><button onclick="document.getElementById('rSizeMe').style.width='300px'">Resize</button></body></html>
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.
Couldn't find the example I wanted so let's just modify the example above a little...
HTML Code:
<!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%;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.
Resizing child elements when parent Div is resized.
Reply With Quote
Bookmarks