capturing the height of a div box

**raman19** · 04-03-2008, 02:48 AM

im pretty new at this. Can someone please explain why this does not work:
function Slide(elementInside)
{

slider = document.getElementById(elementInside);
var sliderHeight;
sliderHeight = slider.style.height;

}
I want to be able to capture the height of any div that is passed into this function. I have the javascript, html and css in 3 different files..

Many thanks.

**Nile** · 04-03-2008, 03:01 AM

Try this:

Code:

function Slide(elementInside){
var slider = document.getElementById(elementInside);
var sliderHeight = slider.style.height; //or you can take the .style out of here and add it to var slider.
// If you want to right it add: document.write(sliderHeight);//
}

**codeexploiter** · 04-03-2008, 03:14 AM

Originally Posted by raman19

im pretty new at this. Can someone please explain why this does not work:
function Slide(elementInside)
{

slider = document.getElementById(elementInside);
var sliderHeight;
sliderHeight = slider.style.height;

}
I want to be able to capture the height of any div that is passed into this function. I have the javascript, html and css in 3 different files..

Many thanks.

The code you've provided seems to be fine except some small things like introduced an item without declaring it. Unlike you've mentioned it will not check whether the send element ID belongs to a div block or not it will try to get an element with the provided ID whether it is div, span, p or any other elements.

I've changed the code a bit so that it will not perform any incorrect operation if the mentioned element is not present

Code:

function Slide(elementInside){
	var slider = document.getElementById(elementInside);
	if(slider){
		var sliderHeight = slider.style.height;
		alert(sliderHeight); //At this point you can return the height to the calling point of this function if you want.
	}
	return;
}

You can shorten the length of the above mentioned function if you want but I thought it would be better if you consider that before doing so.

**raman19** · 04-03-2008, 07:11 PM

Thank you both for looking at this, but i still cant get it to work. Ive included a sample of what i want to do in one simple page. I would really appreciate if you can look at it again. ive tried debugging it using firebug. It seems that the style part of boxInFunction.style.height comes up as undefined. Please help

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.box{
height:100px;
background-color:green;
}
</style>
</head>
<body>
<div id="mybox" class="box" onClick="checkHeight('mybox');">
<h1> This is my box</h1>
</div>
<script type="text/javascript">
function checkHeight(boxname)
{
var boxInFunction =document.getElementById(boxname);
var boxHeight = boxInFunction.style.height;
alert(boxHeight);
}
</script>
</body>
</html>

**raman19** · 04-03-2008, 08:12 PM

it seems that it works fine if in the original div you specify an initial style="height:0px" . then you can read and change the properties as many times as u want .. interesting

raman

Thread: capturing the height of a div box

Thread Tools

Search Thread

capturing the height of a div box

The Following User Says Thank You to Nile For This Useful Post:

The Following User Says Thank You to codeexploiter For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions