PDA

View Full Version : 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:


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


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