www.webdeveloper.com
Results 1 to 6 of 6

Thread: Resizing child elements when parent Div is resized.

  1. #1
    Join Date
    Jan 2009
    Posts
    7

    Question 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.

    Any help would be appreciated,
    Cheers!
    James.

  2. #2
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    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&#37;;border:2px outset black"></textarea>
    </div>
    <button onclick="document.getElementById('rSizeMe').style.width='300px'">Resize</button>
    </body>
    </html>
    54 68 65 42 65 61 72 4D 61 79

  3. #3
    Join Date
    Jan 2009
    Posts
    7
    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.

  4. #4
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    Been a while since I needed to do that, let me search my archives and get back to you.
    54 68 65 42 65 61 72 4D 61 79

  5. #5
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    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&#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.
    54 68 65 42 65 61 72 4D 61 79

  6. #6
    Join Date
    Jan 2009
    Posts
    7
    Hey thanks for the info. I think I can modify that code to work for what I need.

    James.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles