Getting the height and width of content fitting DIV element.

Hey,
I'm having an issue getting the height and width of DIV elements that have resized themselves to fit their content.

Note: I do not have a problem getting the height and width of DIV elements that I have set using Javascript. The probel is that this value appears to stick. I.e. the height is set to 150px, then the content is changed and the DIV cosumes as much height as is required (clearly more than 150px), however analysing the DOM indicates that the height is the same (though it is clearly not).

I want to know how to get hold of the 'actual' size of a DIV element that is manipulated by the content of the DIV.

I am also interested in a solution that works in IE and Firefox (at least).

Cheers.

alpha_foobar

Junior Poster

182 posts since May 2005

Reputation Points: 20

Solved Threads: 5

6 Years Ago

0

What properties are you using?

tgreer

Made Her Cry

Team Colleague

2,118 posts since Dec 2004

Reputation Points: 227

Solved Threads: 37

6 Years Ago

0

I was using style.width and style.height, but I have also tried offsetWidth and offsetHeight...

If you view these in the mozilla dom inspector, you see that they maintain the original height and width that you set. Not the height and width that has been forced by the content.

Does anyone know how to get the actual height and width of a DIV element after it has been modified by content? I could see any attribute in the DOM inspector that looked like it related to the content modified size.

alpha_foobar

Junior Poster

182 posts since May 2005

Reputation Points: 20

Solved Threads: 5

6 Years Ago

0

offsetHeight and offsetWidth were going to be my recommendations. I'll play around with this. So you have an initial height/width set by CSS, then you add content, presumably with JavaScript, and now want the new size of the DIV, correct?

tgreer

Made Her Cry

Team Colleague

2,118 posts since Dec 2004

Reputation Points: 227

Solved Threads: 37

6 Years Ago

Show Comments

1

There seems to be a bug with offset properties in moz at the moment as its returning the style value and not the offset value. However I came up with a workaround so that it displays the offsetHeight in moz. Code is as follows

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Get Modified Height</title>
<style type="text/css">
#Layer1 {
position:absolute; 
width:50px; 
height:15px; 
z-index:1; 
left: 151px; 
top: 165px; 
visibility: visible;
}

#Layer2 {

position:absolute; 
width:150px; 
height:150px; 
z-index:2; 
left: 300px; 
top: 200px; 
visibility: visible;

}
</style>
<script type="text/javascript">
<!--
function modHT (id) {  
newdim = document.getElementById(id).innerHTML= 'hello there my name is eddie and I am making a new height';
}

function getDim (id) {  
document.getElementById(id).style.height="auto";
// match box models
if (document.all) {
gh = document.getElementById(id).offsetHeight+10;
}
else {
gh = document.getElementById(id).offsetHeight;
}
alert (gh)
}
 
//-->
</script>

</head>

<body onload="modHT ('Layer1'); getDim('Layer1')">

<div id="Layer1"></div>
<div id="Layer2">
<a href="#" onmousedown="getDim('Layer1')">Get Height</a>
</div>
</body>
</html>

Eddie Traversa

DHTML Nirvana
http://dhtmlnirvana.com/

Spiritual Blog
http://www.truthrealization.com/index.php

Eddie Traversa

Newbie Poster

20 posts since Jul 2005

Reputation Points: 11

Solved Threads: 0

6 Years Ago

0

The work-around is to set the style.property to "auto"?

tgreer

Made Her Cry

Team Colleague

2,118 posts since Dec 2004

Reputation Points: 227

Solved Threads: 37

6 Years Ago

0

Yeah setting it via js dynamically seems to let moz read the value. Im going to file this as a regression bug though as that shouldnt be needed for offsetHeight etc...

Eddie Traversa

DHTML Nirvana
http://dhtmlnirvana.com/

Spiritual Blog

http://www.truthrealization.com/index.php

Eddie Traversa

Newbie Poster

20 posts since Jul 2005

Reputation Points: 11

Solved Threads: 0

6 Years Ago

0

I need something that works in IE as well... target environment is IE (unfortunately).

alpha_foobar

Junior Poster

182 posts since May 2005

Reputation Points: 20

Solved Threads: 5

6 Years Ago

0

that works in IE as well

Eddie Traversa

DHTML Nirvana
http://dhtmlnirvana.com/

Spiritual Blog
http://www.truthrealization.com/index.php
Reply With Quote

Eddie Traversa

Newbie Poster

20 posts since Jul 2005

Reputation Points: 11

Solved Threads: 0

6 Years Ago

0

Hey there peoples,
I have discovered that if you set the height and width to auto initially, then you don't have to worry about this.... of course I am not sure if I can set it to auto initially...

I have made a few mods and tested in IE and Mozilla. Also if you do need to set an initial height and with, then you will need to set the height and width to auto for it to update.

thanks for your help!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Get Modified Height</title>
<style type="text/css">
	#Layer1 {
		position:absolute; 
		width: auto; 
		height: auto; 
		z-index:1; 
		border: 1px dotted #639ACE;
		left: 151px; 
		top: 165px; 
		visibility: visible;
	}
	
	#Layer2 {
		position:absolute; 
		width: auto; 
		height: auto; 
		z-index:2; 
		left: 300px; 
		top: 200px; 
		visibility: visible;
	}
</style>

<script type="text/javascript">
<!--
	function modHT (id) {  
		document.getElementById(id).innerHTML = 'hello there my name is eddie and I am making a new height';
	}
	
	function clearDiv (id) {  
		document.getElementById(id).innerHTML = "";
	}
	
	function getHeight (id) {  
		var gh = document.getElementById(id).offsetHeight;
		alert (gh);
	}

	function getWidth (id) {  
		var gh = document.getElementById(id).offsetWidth;
		alert (gh);
	}
//-->
</script>

</head>

<body onload="">

<div id="Layer1">
</div>

<div id="Layer2">
	<a href="javascript:modHT('Layer1')">Mod</a>
	<a href="javascript:clearDiv('Layer1')">Clear</a>
	<a href="javascript:getHeight('Layer1')">Get Height</a>
	<a href="javascript:getWidth('Layer1')">Get Width</a>
</div>
</body>
</html>

alpha_foobar

Junior Poster

182 posts since May 2005

Reputation Points: 20

Solved Threads: 5

4 Years Ago

0

But what if the implicit CSS style value of the div is 'display:none'.. Do you thinkg there is any way to get the size of the div even the CSS style definition is 'display:none'.. ?

possitive

Newbie Poster

2 posts since Aug 2007

Reputation Points: 10

Solved Threads: 0

4 Years Ago

0

hello how are you?
i have same problem to getting div height.
if you have got solution plz tell me thanks
below it is problem.

Hey, I'm having an issue getting the height and width of DIV elements that have resized themselves to fit their content.

Note: I do not have a problem getting the height and width of DIV elements that I have set using Javascript. The probel is that this value appears to stick. I.e. the height is set to 150px, then the content is changed and the DIV cosumes as much height as is required (clearly more than 150px), however analysing the DOM indicates that the height is the same (though it is clearly not).

I want to know how to get hold of the 'actual' size of a DIV element that is manipulated by the content of the DIV.

I am also interested in a solution that works in IE and Firefox (at least).

Cheers.

raoisrar

Newbie Poster

1 post since Nov 2007

Reputation Points: 10

Solved Threads: 0

4 Years Ago

0

You can. Just set them to auto in the stylesheet. They are valid styles.

MidiMagic

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730