PDA

Click to See Complete Forum and Search --> : extract div width (by setting left, right styles)

yilangmok
07-28-2005, 04:50 AM
I have a <div> who's style I have set with: "position:absolute; left:10px; right:10px"

I need to find the width of the <div> so that I can calculate the number of "cells" that it takes to cover the <div>. I have tried extracting this value by using document.getElementById("elem").style.width but all I get is "", both in Firefox and IE. Is there a way to find this width?

On a side note, the above style renders a <div> which spans the width of the page in Firefox, but not in IE. Is there a way to achieve this in IE?

Thanks in advance!
Kor
07-28-2005, 05:14 AM
use offset attributes

element.offsetWidth
element.offsetHeight

the returned values are numbers (not strings as ##px returned by element.style.left or element.style.top methods).

Anyway style.attribute method wount work if there is no locally style set (that means inside the tag).

Note: offset attributes are read only.
shinujohn
07-28-2005, 05:15 AM
hi yilangmok,
to get the current width and height of an elemnt, try
element.offsetWidth;
element.offsetHeight;

you can make your div spannig the whole page by setting
style="width:100%";


did i help you?
shinu.
coothead
07-28-2005, 05:42 AM
Hi there yilangmok,

and a warm welcome to these forums. :)

Just to be sure, here is a working example...
<!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" xml:lang="en" lang="en">
<head>
<title>offsetWidth and offsetHeight</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
<meta name="Content-Script-Type" content="text/javascript"/>
<meta name="Content-Style-Type" content="text/css"/>

<style type="text/css">
/*<![CDATA[*/
#elem {
position:absolute;
top:40px;
left:40px;
right:40px;
background-color:#eef;
}
#elem p {
font-family:verdana,arial,helvetica,sans-serif;
font-size:14px;
color:#006;
text-align:justify;
margin:30px;
padding:30px;
background-color:#fff;
border:1px solid #009;
}
/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
function findDimensions() {
var w=document.getElementById('elem').offsetWidth+"px";
var h=document.getElementById('elem').offsetHeight+"px";

alert('The div id="elem"\n has a width equal to '+w+'\n and a height equal to '+h);
}
onload=findDimensions;
//]]>
</script>

</head>
<body>

<div id="elem">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus.
Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti.
Nunc vulputate magna non magna. Aenean lorem eros, adipiscing quis, semper non, dictum a,
nunc. Curabitur ut sem. Pellentesque a est id neque hendrerit ultrices. Donec vulputate tincidunt
turpis. Curabitur dignissim vestibulum nunc. Aliquam felis lorem, ultrices sit amet, convallis a,
accumsan vel, ante. Proin aliquam turpis sed augue. In pellentesque, magna a pulvinar adipiscing,
est orci adipiscing felis, sed laoreet urna magna quis neque. Proin facilisis aliquet urna.
</p>
</div>

</body>
</html>

coothead
yilangmok
07-28-2005, 05:43 AM
Thanks. Unfortunately, the offset* functions return undefined. Here is my code:

#map-div {
position:absolute;
left:10px; right:270px; top:10px; bottom:10px;
overflow:hidden;
}

...
<div id="map-div"></div>
...

alert(mapDiv.style.offsetWidth + " " + mapDiv.style.offsetHeight);

and it results in "undefined undefined".



As to the page spanning question, I need to have a 300px margin to the right, which is why I'm using both "left" and "right".

Thanks!
yilangmok
07-28-2005, 05:45 AM
hm...just saw the third post...testing it out first

Thanks for all the help!
Kor
07-28-2005, 05:45 AM
mapDiv.style.offsetWidth

I said clearely
element.offsetWidth
not
element.style.offsetWidth
yilangmok
07-28-2005, 05:48 AM
Oh! Of course!! Stupid me.

Thank you all for your help!