JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Getting the height and width of content fitting DIV element.

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply
1 2

•
•
Join Date: May 2005
Posts: 182
Reputation: alpha_foobar is an unknown quantity at this point 
Solved Threads: 3
alpha_foobar's Avatar
alpha_foobar alpha_foobar is offline Offline
Junior Poster

Getting the height and width of content fitting DIV element.

 
0
  #1
Jul 17th, 2005
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.
alphafoobar
Senior Java Developer
web2.0 javascript/ajax developer & entrepreneur
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2004
Posts: 1,655
Reputation: tgreer is an unknown quantity at this point 
Solved Threads: 35
Team Colleague
tgreer tgreer is offline Offline
Made Her Cry

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

 
0
  #2
Jul 18th, 2005
What properties are you using?
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2005
Posts: 182
Reputation: alpha_foobar is an unknown quantity at this point 
Solved Threads: 3
alpha_foobar's Avatar
alpha_foobar alpha_foobar is offline Offline
Junior Poster

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

 
0
  #3
Jul 18th, 2005
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.
alphafoobar
Senior Java Developer
web2.0 javascript/ajax developer & entrepreneur
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2004
Posts: 1,655
Reputation: tgreer is an unknown quantity at this point 
Solved Threads: 35
Team Colleague
tgreer tgreer is offline Offline
Made Her Cry

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

 
0
  #4
Jul 18th, 2005
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?
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2005
Posts: 20
Reputation: Eddie Traversa is an unknown quantity at this point 
Solved Threads: 0
Eddie Traversa Eddie Traversa is offline Offline
Newbie Poster

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

 
1
  #5
Jul 19th, 2005
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2004
Posts: 1,655
Reputation: tgreer is an unknown quantity at this point 
Solved Threads: 35
Team Colleague
tgreer tgreer is offline Offline
Made Her Cry

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

 
0
  #6
Jul 19th, 2005
The work-around is to set the style.property to "auto"?
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2005
Posts: 20
Reputation: Eddie Traversa is an unknown quantity at this point 
Solved Threads: 0
Eddie Traversa Eddie Traversa is offline Offline
Newbie Poster

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

 
0
  #7
Jul 19th, 2005
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
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2005
Posts: 182
Reputation: alpha_foobar is an unknown quantity at this point 
Solved Threads: 3
alpha_foobar's Avatar
alpha_foobar alpha_foobar is offline Offline
Junior Poster

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

 
0
  #8
Jul 21st, 2005
I need something that works in IE as well... target environment is IE (unfortunately).
alphafoobar
Senior Java Developer
web2.0 javascript/ajax developer & entrepreneur
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2005
Posts: 20
Reputation: Eddie Traversa is an unknown quantity at this point 
Solved Threads: 0
Eddie Traversa Eddie Traversa is offline Offline
Newbie Poster

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

 
0
  #9
Jul 21st, 2005
that works in IE as well



Eddie Traversa

DHTML Nirvana
http://dhtmlnirvana.com/

Spiritual Blog
http://www.truthrealization.com/index.php
Reply With Quote
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2005
Posts: 182
Reputation: alpha_foobar is an unknown quantity at this point 
Solved Threads: 3
alpha_foobar's Avatar
alpha_foobar alpha_foobar is offline Offline
Junior Poster

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

 
0
  #10
Jul 21st, 2005
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>
alphafoobar
Senior Java Developer
web2.0 javascript/ajax developer & entrepreneur
Reply With Quote Quick reply to this message  
Reply
1 2

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser bug calendar captchaformproblem checkbox child close column createrange() css cursor date debugger dependent disablefirebug dom download dropdown editor element embed engine error events explorer ext file form forms getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe images internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jump libcurl maps math media microsoft mimic object onmouseoutdivproblem onreadystatechange parent paypal pdf php player position post problem programming progressbar regex runtime scroll search security select shopping size software sql text textarea unicode w3c web website window windowofwords windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC