Geek Answers Handbook

Why does jquery return 0 for offsetHeight when firebug says it's 34?

So, I have a div whose content is generated at runtime, initially it does not have the height associated with it. When it is generated according to firebug and from what I can warn with js, the div still has a height of 0. However, looking at the read-only properties with firebug, I see that it has an offset height of 34. This is the value that I need. I hope this is obvious, but if it is not, this number is a variable, it is not always 38.

So, I thought I could just get this by doing this through jquery ...

$("#parentDiv").attr('offsetHeight');

or is it with direct js ...

 document.getElementById("parentDiv").offsetHeight;

But all that returns is 0. Does this have anything to do with the fact that the offset height is a read-only property in this case? How can I get this height? I mean, Firebug figured it out somehow it seems like I should be able to.

Edit: Here is an example of what the div looks like now ...

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8"> <HTML style="OVERFLOW: hidden; HEIGHT: 100%" xmlns="http://www.w3.org/1999/xhtml"><BODY><FORM id="aspnetForm" name="aspnetForm" action="blah.aspx" method="post"><DIV id="container"> <DIV id="ctl00_BodyContentPlaceHolder_Navigation" style="Z-INDEX: 1; LEFT: 1597px; POSITION: absolute; TOP: 67px"> <DIV class="TransparentBg" id="TransparentDiv" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; HEIGHT: 94px; TEXT-ALIGN: center"> </DIV> <DIV class="Foreground" id="ForegroundId" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; TEXT-ALIGN: center"> <DIV id="ctl00_BodyContentPlaceHolder_Navigation1" style="WIDTH: 52px; COLOR: black; HEIGHT: 52px; BACKGROUND-COLOR: transparent; -moz-user-focus: normal"> <IMG style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale src='../images/image.gif'); CURSOR: pointer" height="52" hspace="0" src="..." width="52" /> </DIV> <DIV id="ctl00_BodyContentPlaceHolder_UserControl" name="ctl00_BodyContentPlaceHolder_UserControl"> <IMG style="DISPLAY: block; VERTICAL-ALIGN: bottom; CURSOR: pointer" height="17" src="..." width="16" /> <IMG style="VERTICAL-ALIGN: top; CURSOR: pointer" height="17" src="..." width="16" /> </DIV> </DIV> </DIV> </DIV></FORM></BODY></HTML>

This code is generated by a control in a separate library. So here is the actual code creating it on my .aspx page.

 <blah:blahControl ID="control" runat="server" />

Well, he edited a little, but it's a lot more HTML than before. The div, which I had in mind as "parentDiv", was previously called "ctl00_BodyContentPlaceHolder_UserControl". This code includes a question about the division, this is a brother, parent, grandfather and grandmother and children. This is almost a direct copy of firebug.

Update: I should have mentioned that this is done in IE 7. It seemed to work fine once in Firefox, but now it returns 0. Does this mean any new information about possible workarounds or something else?

... you all must think that I am nuts.

Update: Some styles ...

 .TransparentBg { background-color: white; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } .Foreground { position: absolute; top: 0px; }
+7
javascript jquery dom
source share
5 answers

Are you sure this is not Heisenbug ? If you arbitrarily set the height somewhere programmatically, and then try to read it in the near future, there is a possibility that the DOM has not been updated.

+4
source share

Are you sure that the element is included in the document tree and displayed? (i.e. not "display: none", but "visibility: hidden" is ok.)

An element that is not actually involved in the process of rendering the document is dimensionless and will give offsetWidth / Height 0.

ETA after adding sample code: with your exact code, I get offsetHeight on div from '17. The first image is the right size, the second size is not the size.

This is correct as shown (*). Any images that do not load are replaced with their alt text as an inline range. Your image does not have text text, so it is replaced by an empty string. Usually, as an inline element, this cannot be set for any particular size. The first image is an exception because you gave it "display: block", which makes it available for the explicit size provided by the width / height.

In Quirks mode you will have few “broken images” that will be the same size as the images. This does not happen in standard mode, as it is assumed that you know how to use alt text correctly if you use standards.

In any case, measuring dimensions works fine for me if I replace the "..." URLs with real work addresses.

(*: although in fact you do not see it because of the rather strange "overflow-hidden in html and" on the left: 1597px; combo. Well, if you do not have a really wide monitor!)

+5
source share

Downloading this file to a valid IMG SRC gives you 3 "37" alert windows. Without a valid IMG SRC, he gives “17” for all three. What version of jQuery are you using? And what version of FireFox / IE?

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8"> <HTML style="OVERFLOW: hidden; HEIGHT: 100%" xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <script type="text/javascript" src="jquery.js"></script> </HEAD> <BODY> <FORM id="aspnetForm" name="aspnetForm" action="blah.aspx" method="post"> <DIV id="container"> <DIV id="ctl00_BodyContentPlaceHolder_Navigation" style="Z-INDEX: 1; LEFT: 1597px; POSITION: absolute; TOP: 67px"> <DIV class="TransparentBg" id="TransparentDiv" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; HEIGHT: 94px; TEXT-ALIGN: center"> </DIV> <DIV class="Foreground" id="ForegroundId" style="MARGIN-TOP: 10px; MARGIN-RIGHT: 10px; TEXT-ALIGN: center"> <DIV id="ctl00_BodyContentPlaceHolder_Navigation1" title="Click to pan the map." style="WIDTH: 52px; COLOR: black; HEIGHT: 52px; BACKGROUND-COLOR: transparent; -moz-user-focus: normal"> <IMG style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale src='../images/image.gif'); CURSOR: pointer" height="52" hspace="0" src="..." width="52" /> </DIV> <DIV id="ctl00_BodyContentPlaceHolder_UserControl" name="ctl00_BodyContentPlaceHolder_UserControl"> <IMG style="DISPLAY: block; VERTICAL-ALIGN: bottom; CURSOR: pointer" height="17" src="je_fanmap_unavailable.JPG" width="16" /> <IMG style="VERTICAL-ALIGN: top; CURSOR: pointer" height="17" src="je_fanmap_unavailable.JPG" width="16" /> </DIV> </DIV> </DIV> <script type="text/javascript"> $(window).load(function () { alert($("#ctl00_BodyContentPlaceHolder_UserControl").attr('offsetHeight')); alert(document.getElementById("ctl00_BodyContentPlaceHolder_UserControl").offsetHeight); alert($("#ctl00_BodyContentPlaceHolder_UserControl").height()); }); </script> </DIV> </FORM> </BODY>

+1
source share

Try calling the offset function as soon as all the DOMs and images have fully loaded using load() instead of document.ready().

 $(window).load(function () { //Put the code for the height here });
+1
source share

I just discovered a problem when I was getting offsetHeight of an element when the document was ready, but it was in a container that was hidden .

The result is offsetHeight 0, but firebug said it has a height of 32.

0
source share

More articles:


All Articles