•
•
•
•
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,750 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,594 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.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 33552 | Replies: 12
 |
•
•
Join Date: May 2005
Location: Wellington, New Zealand
Posts: 182
Reputation: 
Rep Power: 4
Solved Threads: 3
Junior Poster
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.
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.
•
•
Join Date: Dec 2004
Posts: 1,590
Reputation:
Rep Power: 7
Solved Threads: 34
What properties are you using?
•
•
Join Date: May 2005
Location: Wellington, New Zealand
Posts: 182
Reputation:
Rep Power: 4
Solved Threads: 3
Junior Poster
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.
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.
•
•
Join Date: Dec 2004
Posts: 1,590
Reputation:
Rep Power: 7
Solved Threads: 34
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?
•
•
Join Date: Jul 2005
Location: Australia
Posts: 19
Reputation:
Rep Power: 4
Solved Threads: 0
Newbie Poster
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
Eddie Traversa
DHTML Nirvana
http://dhtmlnirvana.com/
Spiritual Blog
http://www.truthrealization.com/index.php
<!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
•
•
Join Date: Dec 2004
Posts: 1,590
Reputation:
Rep Power: 7
Solved Threads: 34
The work-around is to set the style.property to "auto"?
•
•
Join Date: Jul 2005
Location: Australia
Posts: 19
Reputation:
Rep Power: 4
Solved Threads: 0
Newbie Poster
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
DHTML Nirvana
http://dhtmlnirvana.com/
Spiritual Blog
http://www.truthrealization.com/index.php
•
•
Join Date: May 2005
Location: Wellington, New Zealand
Posts: 182
Reputation:
Rep Power: 4
Solved Threads: 3
Junior Poster
I need something that works in IE as well... target environment is IE (unfortunately).
•
•
Join Date: Jul 2005
Location: Australia
Posts: 19
Reputation:
Rep Power: 4
Solved Threads: 0
Newbie Poster
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
DHTML Nirvana
http://dhtmlnirvana.com/
Spiritual Blog
http://www.truthrealization.com/index.php
Reply With Quote
•
•
Join Date: May 2005
Location: Wellington, New Zealand
Posts: 182
Reputation:
Rep Power: 4
Solved Threads: 3
Junior Poster
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!
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>
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
Linear Mode
- Previous Thread: java script calling
- Next Thread: How do I make my window the size of the Image?
