View Full Version : Convert auto to pixels

03-30-2009, 10:58 PM
I have a collapsible container that will go from a height of 0 to 200 pixels. One thing I want to consider is the text size being changed while the container is hidden. If the text size is increased the height will need to be increased.

At the moment I am simply keeping the same height but once the JavaScript completes tweening I then set the containers height to auto.

What I would like to know is if it is possible to convert auto to pixels?
I have tried using offsetHeight but because the height is set to 0 it returns 0. Does anyone have any ideas how I can get the height of container in pixels while its height is 0.


03-31-2009, 05:29 PM
Does anyone have any ideas how I can get the height of container in pixels while its height is 0.

Perhaps what you need to do is keep it sized normal but hidden instead of sized to 0 and then before you want to use it, you get the height, then you resize it to 0 and make it visible. Now you got the height and you're back where you want to be.

03-31-2009, 11:45 PM
Thanks TinyScript,

That was actually something I thought about doing not long after writing that post. Initially I had set the visibility to hidden but that just meant there was still an empty space where my div was. My first thought was to then set display to none allowing any content below it to take up the space. This worked but meant the offsetHeight wouldn't return anything as the div wasn't rendered.

This is why I asked the original question. As it turns out there could be a CSS solution where instead of setting it to display none I will simply give it an an absolute position while hidden. This shouldn't disturb any content else where but still keep the offsetHeight readable.

As you partly suggested I can then set the position back to relative, visibility to visible and height to 0 when I want to expand the section.

11-28-2009, 08:19 PM
When you look at the following example you see I cannot find a way to get the current height of the div, when it is filled with some text. If somebody could help me, It will be highly appreciated. Thank in advance.

<script type="text/javascript">
function getElementFromEvent(e)
var targetElement
if (!e) var e = window.event
if (e.target) targetElement = e.target
else if (e.srcElement) targetElement = e.srcElement
if (targetElement.nodeType == 3) // deal with Safari bug
targetElement = targetElement.parentNode

function getElementProperties(targetElement)
if (!targetClass=="controls"||targetClass=="") {

alert("You clicked on a " + targetTagType + " element.\nId = " + targetId + "\n\nHeight = " + targetHeight + "\nHeight Offset = " + targetOffsetHeight + "\nClient Height = " + targetClientHeight + "\nStyle Height = " + targetStyleHeight + "\nComputed Style Height = " + targetComputedStyleHeight)

function getStyle(targetElement,styleProp)
if (targetElement) {
if (targetElement.currentStyle) return targetElement.currentStyle[styleProp];
else if (window.getComputedStyle) return document.defaultView.getComputedStyle(targetElement,null).getPropertyValue(styleProp);

var gv_NrOfLines=0;

function addTekst()

function removeTekst()
if (gv_NrOfLines<0) gv_NrOfLines = 0;

function updateValue(addOnTop)
var currentLineTekst = "Some new Text.";
if (addOnTop) {
for (lineIndex=gv_NrOfLines;lineIndex>0;lineIndex--)
document.getElementById("divId").innerHTML+="("+lineIndex+" of "+(gv_NrOfLines-1)+") "+currentLineTekst+"<br>";
for (lineIndex=0;lineIndex<gv_NrOfLines;lineIndex++) {
document.getElementById("divId").innerHTML+="("+lineIndex+" of "+(gv_NrOfLines-1)+") "+currentLineTekst+"<br>";

<body onmousedown="getElementFromEvent(event)">

<h2>This is a header</h2>
<p id="pId">This is a paragraph. Click on this paragraph, the header, the div or the image to see different height property values.</p>
<input id="btnaddTekst" class="controls" value="add Tekst" type="button" onMouseDown="addTekst();">
<input id="btnremoveTekst" class="controls" value="remove Tekst" type="button" onMouseDown="removeTekst();">
<input id="chkAddUp" class="controls" type="checkbox" checked="checked">Add on Top/Bottum
<div id="divId">Some Text in a div with id = divId</div>
<p><img id="imgId" alt="Add youre image."></p>