Detecting height of resized <div>

Discussion in 'Javascript' started by Klaus Seidenfaden, Mar 16, 2005.

  1. How can I reliably detect the height of a div after having resized the
    window (causing the contents of the div to become reflowed)?

    <div id="box">
    <div id="content">
    bla, bla, bla!
    </div>
    </div>

    Assume this renders on one line. I can get the height as
    getElementById['content'].offsetHeight, let's say it's 18 (px).
    Then I make the window so narrow that 'content' gets reflowed
    to display as:

    bla,
    bla,
    bla!

    Now I'd like to detect the new height, but .offsetHeight is still 18 - in
    Opera and FF. In IE, it does show the new height (say, 36), but when
    resizing back to 18, IE's .offsetHeight is stuck at 36.

    Is there a way?

    -- Klaus.

    Here's a previous, unanswered posting (posted elsewhere) restating the
    problem *and* background/purpose:

    > My debut with javascript is about implementing a scrollbar for a clipped
    > <div> ("overflow:hidden"). I know I just need to say "overflow:auto",
    > but the standard scrollbar looks bad in the particular page design, so I
    > challenged myself to achieve the scrollbar appearance that the designer
    > made. I might add that the designer had a Flash solution in mind, but
    > besides me not knowing how to code flash, I always feel slightly annoyed
    > about the closed, inexplorable box that a flash movie is, so I decided
    > to take the long avoided leap into DHTML.
    >
    > And I've got it working nicely; besides scolling, it adapts to
    > *vertical* resizing of the window (by resizing the clipped <div> so that
    > more or less of its contents become visible). But in the case of
    > horizontal resizing I don't want a horizontal scrollbar. Instead, the
    > text should become narrower. And it does.
    >
    > BUT here's the problem: Reflowing the content in a narrower <div> makes
    > the <div> *taller*. How do I find its new height? I need to know it so
    > the scrollbar can figure out how much to move the content. The
    > 'offsetHeight' property just stays the same after reflowing, in opera
    > and in FF. In IE, it grows correctly (so I can still scroll to the
    > bottom) while narrowing the window, but does not shrink when the window
    > is widened again (and so, scrolling to top will scroll too far up).
    >
    > Am I a victim of my own ignorance (then there is hope), or is the
    > problem caused by buggy browsers? Or am I just demanding more than DOM
    > provides?
    >




    --
    Using M2, Opera's revolutionary e-mail client: http://www.opera.com/m2/
    Klaus Seidenfaden, Mar 16, 2005
    #1
    1. Advertising

  2. Klaus Seidenfaden

    RobG Guest

    Klaus Seidenfaden wrote:
    > How can I reliably detect the height of a div after having resized the
    > window (causing the contents of the div to become reflowed)?

    [...]
    > Assume this renders on one line. I can get the height as
    > getElementById['content'].offsetHeight, let's say it's 18 (px).


    No, you can't. offsetHeight is not part of the current DOM, it
    is legacy ('DOM 0') from before W3C standards.

    According to the Mozilla site:

    "offsetHeight gets the number of pixels that the current
    element is offset within the offsetParent node"

    <URL:http://www.mozilla.org/docs/dom/domref/dom_el_ref18.html#1027994>

    In other words, you are finding the distance from the top of
    your element to the bottom of its offset parent, which might be
    the same value as the height of the element, but likely not.

    Have a read here:

    <URL:http://www.quirksmode.org/js/findpos.html>

    > Then I make the window so narrow that 'content' gets reflowed
    > to display as:
    >
    > bla,
    > bla,
    > bla!
    >
    > Now I'd like to detect the new height, but .offsetHeight is still 18 - in


    Only if some element above has not re-flowed and moved this
    element down the page, increasing its offsetHeight value.

    > Opera and FF. In IE, it does show the new height (say, 36), but when
    > resizing back to 18, IE's .offsetHeight is stuck at 36.


    Without seeing the HTML for the entire page (or at least to
    where your element is), we can only guess as to why.

    >
    > Is there a way?


    If you want to find the height of an element, there are several
    ways:

    1. obj.style.height - this will tell you what the actual height
    property of the style object has been set at, either inline
    or by scripting but not CSS. If style.height has not been set
    by one of these methods, it is undefined.

    2. the element's height attribute, however this is only
    available for a limited set of elements (iframe, td, th, img,
    object and applet), so it can't be used for a row.

    3. via script: getCurentStyle (IE) or getComputedStyle (the
    rest). However, if it has been set using something other
    than px (say em or %), IE will report whatever the units it's
    been set at. So if your element has its height set as %,
    then that is what IE reports. If the height is not set at
    all, IE reports 'auto' whereas Firefox gives the size in
    pixels always.

    Below is a script to let you play with things:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>blah</title>
    <script type="text/javascript">
    function sayWH(a) {
    var txt = '';
    while (!/table/i.test(a.nodeName)){
    txt += theWH(a) + '<br><br>';
    a = a.parentNode;
    }
    // txt = txt.replace(/\\n/,'<br>');
    document.getElementById('report').innerHTML = txt;
    }

    function theWH(a) {
    var msg= a.nodeName + ':';
    // Check if attributes set:
    if (a.height || a.width) {
    msg += '<br><br>Height attribute: ' + a.height;
    msg += '<br>Width attribute: ' + a.width;
    } else {
    msg += '<br><br>Element height/width attribute: undefined';
    }

    // Check if style attributes set:
    if (a.style) {
    msg += '<br><br>Height style attribute: ';
    msg += (a.style.height)? a.style.height : 'not set';
    msg += '<br>Width style attribute: ';
    msg += (a.style.width)? a.style.width : 'not set';
    } else {
    msg += '<br><br>Style object not supported here';
    }

    // Zilla: getComputedStyle
    if (window.getComputedStyle) {
    var h = document.defaultView.getComputedStyle(a,
    '').getPropertyValue('height');
    var w = document.defaultView.getComputedStyle(a,
    '').getPropertyValue('width');
    msg += '<br><br>Using getComputedStyle (h,w): '
    + h + ', ' + w;

    // IE: currentStyle
    } else if (a.currentStyle) {
    var h = eval('a.currentStyle.height');
    var w = eval('a.currentStyle.width');
    msg += '<br><br>Using currentStyle (h,w): ' + h + ', ' + w;
    }
    return msg;
    }

    function initPage(){
    var d = document.getElementsByTagName('div');
    var i = d.length;
    while (i--){
    d.onclick = function(){sayWH(this);};
    }
    var e = document.getElementById('aDiv');
    e.style.height = '5em';
    e.style.width = '35em';
    }
    </script>
    <style type="text/css">
    div {border: 1px solid red;}
    ..aClass {width: 20em; height: 10em;
    line-height: 10em;}
    #report {font-family: sans-serif; color: #666;
    font-size: 90%;}
    </style>
    </head>
    <body onload="initPage();">
    <table border="1"><tr><td>
    <div>This div: height and width not set at all</div>
    </td></tr><tr><td>
    <div class="aClass">This div: height and width set using
    CSS class</div>
    </td></tr><tr><td style="height: 30px; width: 400px">
    <div style="width: 95%; height: 95%;">This div: height and
    width attributes set using inline style and precentage<br>
    <br><br></div>
    </td></tr><tr><td height="20%" width="50%">
    <div id="aDiv">This div: style height and width set using
    script</div>
    </td></tr></table>
    <span id="report"></span>

    </body>
    </html>



    --
    Rob
    RobG, Mar 17, 2005
    #2
    1. Advertising

  3. On Thu, 17 Mar 2005 03:18:37 GMT, RobG <> wrote:

    > If you want to find the height of an element, there are several
    > ways:
    > [...]
    > Below is a script to let you play with things:
    > [...]


    Thanks, I'll take a look at your suggestions when I get the time, and
    maybe I'll resurface here. :) (I actually had the feeling that
    'offsetHeight' was dubious, offset hints at something distance related...)

    -Klaus.

    --
    Using M2, Opera's revolutionary e-mail client: http://www.opera.com/m2/
    Klaus Seidenfaden, Mar 17, 2005
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. HJ
    Replies:
    5
    Views:
    833
    Jonathan N. Little
    Sep 1, 2006
  2. muggslab

    Div Height = Image height. help

    muggslab, Feb 1, 2010, in forum: HTML and CSS
    Replies:
    1
    Views:
    852
    muggslab
    Feb 1, 2010
  3. john T
    Replies:
    7
    Views:
    211
    Richard Formby
    Feb 19, 2004
  4. Don Vaillancourt

    How to tell height of div where height is not set?

    Don Vaillancourt, Jan 28, 2005, in forum: Javascript
    Replies:
    8
    Views:
    133
    Dietmar Meier
    Jan 31, 2005
  5. Replies:
    0
    Views:
    113
Loading...

Share This Page