PDA

View Full Version : retrieving the width of an element

haroldb
10-09-2002, 02:13 PM
Hi all,

I'm working on an HTML page containing several <DIV> elements, all positioned absolute, default invisible. Now I'm in need of visualizing the <DIV> element's, one by one and positioning them right next to eachother.

So, I build the code for finding the absolute X,Y coordinates of one element, which works fine. In order to place the next element on the right of the first one, I also need to know the real width of the element. For IE I found document.document.getElementById(..).clientWidth to be doing the job. Does any of you know what equivalent code I may use for netscape browsers?

Thanx in advance,
Harold
Garadon
10-09-2002, 02:26 PM
eh to me it sounds like u could do that in a table

example:


<table>
<tr>
<td>
<div style="visibility:hidden">
</div>
</td>
<td>
<div style="visibility:hidden">
</div>
</td>
<td>
<div style="visibility:hidden">
</div>
</td>
</tr>
</table>
requestcode
10-09-2002, 02:31 PM
for Netscape 4 browsers you can use:
document.div_name.clip.width

For NS6 and IE5+ you can use
document.getElementById("div_name").style.width
Alekz
10-09-2002, 02:55 PM
And the same for IE4 -> style.width
There's no getElementById, but You can get a reference to the layer like that:
oLayer = document.all.tags("DIV")[sID];

Alex
haroldb
10-09-2002, 02:56 PM
Sorry, using a table is not an options :-(

I've tried the style.width element as well, asuming it would give me the widht of the element. The value of that property remains empty however....

below is a test-page. IE only gives the correct width using clientWidth. IE nore Netscape will give me any width using the style.width property

<HTML>
<HEAD></HEAD>
<BODY>
<DIV ID="test" STYLE="position:absolute; top:100px; background-color:silver"> testdiv </DIV>
<script>
document.write('width1 = ' + document.getElementById("test").style.width);
document.write('<BR>')
document.write('width2 = ' + document.getElementById("test").clientWidth);
</script>
</BODY>
</HTML>


is there anything I do wrong?

Harold
Alekz
10-09-2002, 03:06 PM
It's not wrong... You simply have not assigned the style.width attribute and it defaults to 'auto'... Try
currentStyle.width instead of style.width - it will return the string 'auto' :)
Your layer simply does not have a width - it resizes to fit the content...
BTW, scrollWidth instead of clientWidth is more accurate, because the Layer will not resize outside the window or frame... If the content exceeds the window width, then clientWidth will return an incorrect value...

Alex
haroldb
10-09-2002, 03:16 PM
"it resizes to fit the content"...

that's exactly what it should do, and after fitting in all the child-elements I need to know its new width...

So.. suppose I need to place another <DIV> element right next to the one shown. I've got the X,Y positions and now need to know the width, so the next div can be placed at X+width, Y...

Any suggestions?

Harold
Alekz
10-09-2002, 03:27 PM
"it resizes to fit the content"... But will not resize outside the window size... So, if the content exceeds that size it simply won't be shown as if You have set overflow:hidden in the style definition. It does not seem it exists a reasonable way to get the widht for NN6+, Mozilla in that case... or at least I can't found it...

For the rest

NN4
oLayer.clip.width will return the width of the Layer object
oLayer.document.width will return the width of the content.

NN6
parseInt(document.defaultView.getComputedStyle(oLayer, '').getPropertyValue("width")); will return the width of the layer

IE
oLayer.scrollWidth will return the width of the content even if it is partially hidden

Is that You are looking for?

Alex
haroldb
10-09-2002, 03:39 PM
Yessss, that's what I was looking for. It returns the width of the layer in pixels in Netscape

Thanx!!

Harold