User Name Password Register
DaniWeb IT Discussion Community
Home
Forums
Tutorials
Code Snippets
Blogs
Link Directory
All
•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 397,752 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,536 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Join our community!
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Getting the height and width of content fitting DIV element.

•
•
Join Date: May 2005
Location: Wellington, New Zealand
Posts: 182
Reputation: alpha_foobar is an unknown quantity at this point 
Rep Power: 4
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.

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

Help with Code Tags 
<!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>
alphafoobar
Senior Java Developer
web2.0 javascript/ajax developer & entrepreneur
Reply With Quote  
Advertising Opportunities on DaniWeb
Contact Us - Newsletter Archive - Sitemap - Privacy Statement
All times are GMT -4. The time now is 3:31 am.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC