SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: DIV height

  1. #1
    SitePoint Zealot Drew630's Avatar
    Join Date
    Nov 2001
    Location
    Maryland
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DIV height

    Is there a way to find tha height of a DIV based on the content between the <div> and </div> tags?

    Drew
    ~Drew

    There Is No Greater Joy Than Soaring High On The Wings Of Your Dreams, Except Maybe The Joy Of Watching A Dreamer Who Has Nowhere To Land But In The Ocean Of Reality.

  2. #2
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    document.getElementById('container').scrollHeight
    It works in IE and Mozilla, in Opera I think it's giving me the value of the height currently show in the window...
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  3. #3
    SitePoint Zealot Drew630's Avatar
    Join Date
    Nov 2001
    Location
    Maryland
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, that seemed to do the trick.

    Drew
    ~Drew

    There Is No Greater Joy Than Soaring High On The Wings Of Your Dreams, Except Maybe The Joy Of Watching A Dreamer Who Has Nowhere To Land But In The Ocean Of Reality.

  4. #4
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    There is a property called offsetHeight that works in ie,mozilla and opera.

    document.getElementById('id').offsetHeight

    Here's a demonstration of it in action:

    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    
    function getElHeight(el)
    {
      alert(document.getElementById(el).offsetHeight);
    }
    
    function setElHeight(el)
    {
      document.getElementById(el).style.height = document.getElementById('l').offsetHeight;
    }
    
    function addPara(from,to)
    {
    	var myTextNode = document.createTextNode(document.getElementById(from).innerHTML);
    	var myNewPTAGnode = document.createElement("P");
    	myNewPTAGnode.appendChild(myTextNode);
    
    	document.getElementById(to).appendChild(myNewPTAGnode);
    }
    </script>
    </head>
    
    <body>
    <div id="r"
    style="border-left: 1px solid #999; width:2px;
    float: right; margin-left: -19%; height: 10px;">
    </div>
    <div id="l" style="border: 1px solid black; padding: 6px; width: 80%;">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras mollis volutpat libero.
    Curabitur tellus tellus, cursus et, ultrices sit amet, tristique at, mi. Sed velit.
    Sed ornare ultrices turpis.
    </div>
    <a href="javascript: void( addPara('para','l') );">add a paragraph</a> -
    <a href="javascript: void( getElHeight('l') );">get .offsetHeight of left div</a> -
    <a href="javascript: void( setElHeight('r') );">set height of right div to
    the value of the left div's .offsetHeight</a>
    <div id="para" style="display: none;">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras mollis volutpat libero.
    Curabitur tellus tellus, cursus et, ultrices sit amet, tristique at, mi. Sed velit.
    Sed ornare ultrices turpis.
    </div>
    </body>
    </html>
    -xDev

  5. #5
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    offsetHeight = useful, thanks.
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.


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
  •