943,724 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Getting the height and width of content fitting DIV element.
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Jul 17th, 2005
0

Getting the height and width of content fitting DIV element.

Expand Post »
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.
Reputation Points: 20
Solved Threads: 5
Junior Poster
alpha_foobar is offline Offline
182 posts
since May 2005
Permalink
Jul 18th, 2005
0

Re: Getting the height and width of content fitting DIV element.

What properties are you using?
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
Permalink
Jul 18th, 2005
0

Re: Getting the height and width of content fitting DIV element.

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.
Reputation Points: 20
Solved Threads: 5
Junior Poster
alpha_foobar is offline Offline
182 posts
since May 2005
Permalink
Jul 18th, 2005
0

Re: Getting the height and width of content fitting DIV element.

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?
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
Permalink
Jul 19th, 2005
1

Re: Getting the height and width of content fitting DIV element.

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
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Get Modified Height</title>
  5. <style type="text/css">
  6. #Layer1 {
  7. position:absolute; 
  8. width:50px; 
  9. height:15px; 
  10. z-index:1; 
  11. left: 151px; 
  12. top: 165px; 
  13. visibility: visible;
  14. }
  15.  
  16. #Layer2 {
  17.  
  18. position:absolute; 
  19. width:150px; 
  20. height:150px; 
  21. z-index:2; 
  22. left: 300px; 
  23. top: 200px; 
  24. visibility: visible;
  25.  
  26. }
  27. </style>
  28. <script type="text/javascript">
  29. <!--
  30. function modHT (id) {  
  31. newdim = document.getElementById(id).innerHTML= 'hello there my name is eddie and I am making a new height';
  32. }
  33.  
  34. function getDim (id) {  
  35. document.getElementById(id).style.height="auto";
  36. // match box models
  37. if (document.all) {
  38. gh = document.getElementById(id).offsetHeight+10;
  39. }
  40. else {
  41. gh = document.getElementById(id).offsetHeight;
  42. }
  43. alert (gh)
  44. }
  45.  
  46. //-->
  47. </script>
  48.  
  49. </head>
  50.  
  51. <body onload="modHT ('Layer1'); getDim('Layer1')">
  52.  
  53. <div id="Layer1"></div>
  54. <div id="Layer2">
  55. <a href="#" onmousedown="getDim('Layer1')">Get Height</a>
  56. </div>
  57. </body>
  58. </html>


Eddie Traversa

DHTML Nirvana
http://dhtmlnirvana.com/

Spiritual Blog
http://www.truthrealization.com/index.php
Reputation Points: 11
Solved Threads: 0
Newbie Poster
Eddie Traversa is offline Offline
20 posts
since Jul 2005
Permalink
Jul 19th, 2005
0

Re: Getting the height and width of content fitting DIV element.

The work-around is to set the style.property to "auto"?
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
Permalink
Jul 19th, 2005
0

Re: Getting the height and width of content fitting DIV element.

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
Reputation Points: 11
Solved Threads: 0
Newbie Poster
Eddie Traversa is offline Offline
20 posts
since Jul 2005
Permalink
Jul 21st, 2005
0

Re: Getting the height and width of content fitting DIV element.

I need something that works in IE as well... target environment is IE (unfortunately).
Reputation Points: 20
Solved Threads: 5
Junior Poster
alpha_foobar is offline Offline
182 posts
since May 2005
Permalink
Jul 21st, 2005
0

Re: Getting the height and width of content fitting DIV element.

that works in IE as well



Eddie Traversa

DHTML Nirvana
http://dhtmlnirvana.com/

Spiritual Blog
http://www.truthrealization.com/index.php
Reply With Quote
Reputation Points: 11
Solved Threads: 0
Newbie Poster
Eddie Traversa is offline Offline
20 posts
since Jul 2005
Permalink
Jul 21st, 2005
0

Re: Getting the height and width of content fitting DIV element.

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!

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Get Modified Height</title>
  6. <style type="text/css">
  7. 	#Layer1 {
  8. 		position:absolute; 
  9. 		width: auto; 
  10. 		height: auto; 
  11. 		z-index:1; 
  12. 		border: 1px dotted #639ACE;
  13. 		left: 151px; 
  14. 		top: 165px; 
  15. 		visibility: visible;
  16. 	}
  17.  
  18. 	#Layer2 {
  19. 		position:absolute; 
  20. 		width: auto; 
  21. 		height: auto; 
  22. 		z-index:2; 
  23. 		left: 300px; 
  24. 		top: 200px; 
  25. 		visibility: visible;
  26. 	}
  27. </style>
  28.  
  29. <script type="text/javascript">
  30. <!--
  31. 	function modHT (id) {  
  32. 		document.getElementById(id).innerHTML = 'hello there my name is eddie and I am making a new height';
  33. 	}
  34.  
  35. 	function clearDiv (id) {  
  36. 		document.getElementById(id).innerHTML = "";
  37. 	}
  38.  
  39. 	function getHeight (id) {  
  40. 		var gh = document.getElementById(id).offsetHeight;
  41. 		alert (gh);
  42. 	}
  43.  
  44. 	function getWidth (id) {  
  45. 		var gh = document.getElementById(id).offsetWidth;
  46. 		alert (gh);
  47. 	}
  48. //-->
  49. </script>
  50.  
  51. </head>
  52.  
  53. <body onload="">
  54.  
  55. <div id="Layer1">
  56. </div>
  57.  
  58. <div id="Layer2">
  59. 	<a href="javascript:modHT('Layer1')">Mod</a>
  60. 	<a href="javascript:clearDiv('Layer1')">Clear</a>
  61. 	<a href="javascript:getHeight('Layer1')">Get Height</a>
  62. 	<a href="javascript:getWidth('Layer1')">Get Width</a>
  63. </div>
  64. </body>
  65. </html>
Reputation Points: 20
Solved Threads: 5
Junior Poster
alpha_foobar is offline Offline
182 posts
since May 2005

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Repeated onClick doesn't work in IE ?
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: rotating image script





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC