Getting DIV size

@kruggerNov 23.2006

Hi,
i have a problem concerning DIV sizes.Actually, i need to know exactly the size (in pixels) of a given DIV. I have used offsetWidth but it gives me a different value from the one i expect (on some machines it is slighly less and on others it is a little more).

Can you please help sort this out.This has bugged me for a few days

Thank you,

Krugger

to post a comment

JavaScript

11 Comments(s) _↴

@ayse_incebulutNov 23.2006 — #

[code=php] 

 <body>
 
 <div id="div" style=" height:100px; width:200px; background-color:yellow" >Burada katman var. </div>
 
 
 <script type="text/javascript">
 
 var div = document.getElementById('div');
 alert(div.style.height);
 alert(div.style.width);
 </script>
 [/code]

@Mr_JNov 23.2006 — #Try setting the line-height and font-size for the div and see what that returns

Something like

<div id="test" style="font-size:14px;line-height:16px;border:1px solid black">

@GotMex_Nov 23.2006 — #Your problem might have something to do with IE not implementing the box model correctly. Say you have <div id="container"> with these properties:

[code=html]#container {
 width: 200px;
 height: 100px;
 padding: 10px;
 border: 10px solid #000;
 }[/code]

IE6 and most other browsers will report offsetWidth as 240px, and offsetHeight as 140px. IE 5/5.5 though, will report offsetWidth as 200px, and offsetHeight as 100px.

@kruggerauthorNov 24.2006 — #Thank you folks for the tips.

I think that I.E 6 actually does not implement the box model fully as you said GotMex?

Oops, i forgot to mention that i needed the width of the DIV in terms of pixels, so div.style.width unfortunately does not work.Can anyone plz help me sort this thing out plz?

@GotMex_Nov 24.2006 — #Now that I think about it... while IE 5/5.5 and sometimes 6 will report the incorrect width according to the W3C standard, they are still giving you the true size of the element (as the browser is rendering it on screen).

What exactly are you trying to do? Or more importantly, what width do you really want. You could always just access the margin, padding, border, and width properties and do your own math to get the number you want.

@kruggerauthorNov 24.2006 — #Yes you are right. In fact, i need the "inner width" of the DIV.That's it.

Can you please help with the math thing cos i've lost javascript practice.

Thanks

Krugger ?

@Mr_JNov 24.2006 — #IE adds padding and border to the inside of the box, Firefox adds the padding and border to the outside of the box so IE will give you

Width = 200

Height = 100

and Firefox will give you

Width = 240

Height = 140

@kruggerauthorNov 27.2006 — #I have another issue concerning the DIV problem.Actually, i have to measure the DIV size. The thing is that is reports some length(say 865px) and it reports the same thing when am using a laptop screen which is smaller than my desktop. It should have shown 700px or so but still it gives me 865.Can you please help me fix this out?

Thank you,

Krugger

@GotMex_Nov 27.2006 — #Can you post your html/css code in question. Or maybe a link to the page so that we can take a look at it? I need to know how you are defining the DIV's width or how it is placed on page to see what the JS is doing.

@kruggerauthorNov 27.2006 — #Hi pal,

here's the piece of HTML that is of interest to us :

You will find the HTML part in section 1 and the Jscript in section 2. It is fairly simply but yet it doesn't work.

Thank you for taking a look at it.

I have changed the Jscript to work on a table but still i get the same nagging pixel size of 865 :eek:

(1) HTML CODE:

<tr id="DisplayHierarchyRow" height="26" runat="server">

<td style="HEIGHT: 29px" width="250" colSpan="4"><nmcwc:checkbox id="DisplayHierarchy" onclick="submitPage();" runat="server" cssclass="normalWhite"

checked="true"></nmcwc:checkbox></td>

<td id="viewRow" vAlign="top" colSpan="9" rowSpan="2" runat="server">

<div id="statesFrame" style="OVERFLOW-X: auto; HEIGHT: 100%; BACKGROUND-COLOR: olive">

<table height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0" id="TableTest">

<tr id="TimeRangeRow" height="26" runat="server">

<td style="HEIGHT: 18px"><asp:table id="TimeRangeTable" runat="server"></asp:table></td>

</tr>

<tr>

<td id="TestTd" style="BACKGROUND: yellow" width="100%" bgColor="#6073b3">

<div id="plageEtats" style="OVERFLOW-Y: auto; BACKGROUND: red; OVERFLOW-X: hidden; WIDTH: 100%; HEIGHT: 100%"><asp:xml id="OperatingStatus" Runat="server" EnableViewState="False"></asp:xml></div>

</td>

</tr>

</table>

</div>

</td>

</tr>

Javascript :

document.getElementById('TableTest').offsetWidth.toString()

@kruggerauthorNov 28.2006 — #Hi pal,

here's the piece of HTML that is of interest to us :

You will find the HTML part in section 1 and the Jscript in section 2. It is fairly simply but yet it doesn't work.

Thank you for taking a look at it.

I have changed the Jscript to work on a table but still i get the same nagging pixel size of 865

(1) HTML CODE:

<tr id="DisplayHierarchyRow" height="26" runat="server">

<td style="HEIGHT: 29px" width="250" colSpan="4"><nmcwc:checkbox id="DisplayHierarchy" onclick="submitPage();" runat="server" cssclass="normalWhite"

checked="true"></nmcwc:checkbox></td>

<td id="viewRow" vAlign="top" colSpan="9" rowSpan="2" runat="server">

<div id="statesFrame" style="OVERFLOW-X: auto; HEIGHT: 100%; BACKGROUND-COLOR: olive">

<table height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0" id="TableTest">

<tr id="TimeRangeRow" height="26" runat="server">

<td style="HEIGHT: 18px"><asp:table id="TimeRangeTable" runat="server"></asp:table></td>

</tr>

<tr>

<td id="TestTd" style="BACKGROUND: yellow" width="100%" bgColor="#6073b3">

<div id="plageEtats" style="OVERFLOW-Y: auto; BACKGROUND: red; OVERFLOW-X: hidden; WIDTH: 100%; HEIGHT: 100%"><asp:xml id="OperatingStatus" Runat="server" EnableViewState="False"></asp:xml></div>

</td>

</tr>

</table>

</div>

</td>

</tr>

Javascript :

document.getElementById('TableTest').offsetWidth.toString()

Also in #JavaScript _↴

javascript window Scrolling Divs & Key Events Communication between windows

Success!

Help @krugger spread the word by sharing this article on Twitter...

Tweet This

Getting DIV size

11 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Getting DIV size

11 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #JavaScript _↴