Erobo Software | Scripts: Javascript | Calculating offsetHeight and innerHeight of elements returning 0 value when using DOCTYPES

Scripts: Javascript :: Forms :: Library Article #29

Developer's Section

Calculating offsetHeight and innerHeight of elements returning 0 value when using DOCTYPES
By: Erobo Team Member

Hire a Developer for Related Work / Installation | $55 hr

Rating: \| Rate It:
Average Votes: (3102)
Favorites:

In this tutorial we will be looking at a technique to calculate the offsetHeight and innerHeight of html elements when the browser can not correctly determine the value for these properties.

Sometimes when working with Doctype documents you will come across instances where innerHeight and offsetHeight properties of an html element return a 0 value. This usually happens when some of the elements on the html document have a display:none style and are configured to show on hover. Also, sometimes this case is seen on floating elements, and divs with position:absolute style.

Example:

test
innerHeight or offsetHeight
of
some
content
inside

To solve this issue, you could create a helper DOM element that matches the style of the element that you are trying to calculate the height for. Inserting it at the beginning of the document. Calculating the height, and then removing it completes the process easily. Thus providing a convenient way of achiving this goal without any major implications.

See Code Below:

	Code Snippet 1

<div id="test" style="position:absolute;border:1px solid red;display:block;">
<div style="float:left;border:1px solid black;display:block;font-size:16px;"
align="center" id="testdiv">
test<br />
<b>innerHeight</b> or <b>offsetHeight</b><br />
of<br />
some<br />
content<br />
inside<br />
</div>
</div>

<br /><br />
<br /><br />
<br /><br />
<br /><br />
<script language="javascript">
  function testHeight() {
    document.getElementById('testdiv').style.display = "block";
    alert(document.getElementById('testdiv').offsetHeight)
  }

  function testHeight2() {
    document.getElementById('testdiv').style.display = "none";
    alert(document.getElementById('testdiv').offsetHeight)
    document.getElementById('testdiv').style.display = "block";
  }

  function testHeight3() {
    document.getElementById('testdiv').style.display = "none";

    //to solve this problem we are going to create a helper DOM object,
    //insert it to the document using visibility hidden
    //match current style, insert innerHTML and then
    //retrieve innerHeight or offsetHeight and then delete it
    var test = document.createElement("div");

    document.body.appendChild(test);
    test.style.visibility = "hidden";
    test.style.fontSize = "16px";
    test.style.border = "1px solid black";
    test.innerHTML = document.getElementById('testdiv').innerHTML
    var recordedHeight = test.offsetHeight;
    document.body.removeChild(test);
    alert(recordedHeight)

    document.getElementById('testdiv').style.display = "block";
  }
</script>
<input type="button" name="test"
value="Test offsetHeight with display:block (Should return 112px)"
onclick="testHeight();" />
<br />
<input type="button" name="test"
value="Test offsetHeight with display:none (Should return 0)"
onclick="testHeight2();" />
<br />
<input type="button" name="test"
value="Test offsetHeight with display:none but using helper DOM Element (Should return 112px)"
onclick="testHeight3();" />

See other Scripts in Forms

Submit Your Scripts:

System Message:

Your Javascript script has been sent. Please allow 48 hours for processing.

If you would like to have your Javascripts published in this section please fill out
the form below: