SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamically resizing a DIV based on the size of another DIV.

    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:

    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. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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>


Bookmarks

Posting Permissions

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