Get Auto Height

**Dal** · 08-10-2008, 11:29 PM

Ive created a news ticker which just scrolls up. I declare the height of this ticker as say 200(px) and as the style.top is decreased so is this value. Once the height has been moved, ie 200px has passed the div layer is reset back to zero.

I over looked one thing when I built this!

I dont actually know the height

200px was a working example and because the content is variable by extremes I dont know what it is until the content is there.

setting a div as auto height would tell the browser to expand until it fits but Im sure at some point the browser will know the true height in px. How do I tap into this with javascript as style.height is not set when dealing with the style value auto?

Thanks
Dal

**jscheuer1** · 08-11-2008, 02:55 AM

element.offsetHeight

Once the element is rendered, its offsetHeight will be a number, specifically the number of pixels high that it is. Ex:

Code:

var h = document.getElementById('some_id').offsetHeight;

**Dal** · 08-11-2008, 03:14 AM

Thanks, just what I was looking for. Although Im sure offset means something different, if I off-set something I generally would mean position not height like offset the mouse 200 woulnt make the mouse icon bigger... do you know what I mean?

Anyway the important thing is that it works.

Thanks jscheuer1 aka John

Kind regards
Dal

**jscheuer1** · 08-11-2008, 03:23 AM

The offsetWhatever is a getter, not a setter. You can get the offsetTop, offsetLeft, offsetWidth, or offsetHeight. The last two are the most reliable cross browser. You cannot set any of these values though, they are numbers and represent pixel units. You can set these properties indirectly by (in the case of width and height if allowed for that element) using the element's attributes. Otherwise you may use the element's style to set them.

**Dal** · 08-11-2008, 03:40 AM

I was just on about the naming convention used as "offset"

Definintion of offset;
In computer science, an offset within an array or other data structure object is an integer indicating the distance (displacement) from the beginning of the object up until a given element or point, presumably within the same object.

This is from http://en.wikipedia.org/wiki/Offset_(computer_science) not the most reliable

dictionary.com;
offset programming
An index or position in an array, string, or block of memory usually a non-negative integer.

So offset as I thought has nothing to do with the actual dimensions of an object but as you have pointed out it works this way.

No further explaination is required as it works, just thought it was a bit wierd thats all.

Kind regards
Dal

**magiel** · 11-28-2009, 08:16 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.

Code:

<html>
<head>
<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
		getElementProperties(targetElement);
	}
	
function getElementProperties(targetElement)
	{
		targetClass=targetElement.className;
		if (!targetClass=="controls"||targetClass=="") {
			targetTagType=targetElement.tagName;
			targetId=targetElement.id;
			targetHeight=targetElement.height;
			targetOffsetHeight=targetElement.heightoffset;
			targetClientHeight=targetElement.clientHeight;
			targetStyleHeight=targetElement.style.height;
			targetComputedStyleHeight=getStyle(targetId,"height");

			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()
	{
		gv_NrOfLines+=1;
		updateValue(document.getElementById("chkAddUp").checked);
	}

function removeTekst()
	{
		gv_NrOfLines-=1;
		if (gv_NrOfLines<0) gv_NrOfLines = 0;
		updateValue(document.getElementById("chkAddUp").checked);
	}

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

<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>

</body>
</html>

**jscheuer1** · 11-28-2009, 08:48 PM

Code:

<html>
<head>
<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
		getElementProperties(targetElement);
	}
	
function getElementProperties(targetElement)
	{
		targetClass=targetElement.className;
		if (!targetClass=="controls"||targetClass=="") {
			targetTagType=targetElement.tagName;
			targetId=targetElement.id;
			targetHeight=targetElement.height;
			targetOffsetHeight=targetElement.offsetHeight;
			targetClientHeight=targetElement.clientHeight;
			targetStyleHeight=targetElement.style.height;
			targetComputedStyleHeight=getStyle(targetElement,"height");

			alert("You clicked on a " + targetTagType + " element.\nId = " + targetId + "\n\nHeight = " + targetHeight + "\nOffset Height = " + 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()
	{
		gv_NrOfLines+=1;
		updateValue(document.getElementById("chkAddUp").checked);
	}

function removeTekst()
	{
		gv_NrOfLines-=1;
		if (gv_NrOfLines<0) gv_NrOfLines = 0;
		updateValue(document.getElementById("chkAddUp").checked);
	}

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

<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>

</body>
</html>

Thread: Get Auto Height

Thread Tools

Search Thread

Get Auto Height

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

heightoffset doesn't get actual height of a div

Bookmarks

Bookmarks

Posting Permissions