tags:

views:

4623

answers:

5
+3  Q: 

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

So I have a div who's content is generated at runtime it initially has no height associated with it. When it's generated according to firebug and from what I can alert with js the div still has a height of 0. However, looking at the read-only properties with firebug I can see that it has an offset height of 34. It's this value that I need. Hopefully it's obvious but in case it isn't, this number is variable, it's not always 38.

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

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

or this with straight js...

document.getElementById("parentDiv").offsetHeight;

But all that is returned is 0. Does it have anything to do with the fact that offset height is a read-only property in this instance? How can I get this height? I mean firebug is figuring it out somehow so it seems like I should be able to.

Edit: Here's a sample of what the div looks like right 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"&gt;&lt;BODY&gt;&lt;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 being generated by a control in a separate library. So here's the actual code creating it in my .aspx page.

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

Ok, it's edited slightly but thats a whole lot more HTML than I had before. The div I was referring to as "parentDiv" before is called "ctl00_BodyContentPlaceHolder_UserControl" up there. That code includes the div in question, it's sibling, parent, grandparent and children. It's almost a direct copy from firebug.

Update: I should have mentioned this is being done in IE 7. It seemed to work fine one time in Firefox, but it's returning 0 now. Does this provide any new insights of possible work-arounds or anything?

... You all must think I'm nuts.

Update: Some styling...

.TransparentBg 
{
    background-color: white;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

.Foreground
{
    position: absolute;
    top: 0px;
}
+1  A: 

Are you sure the element is included in the document tree, and rendered? (ie. not “display: none”, but “visibility: hidden” is OK.)

An element that is not actually taking part in the document render process has no dimensions, and will give an offsetWidth/Height of 0.

ETA after code sample added: with your exact code, I get offsetHeight on the div of ‘17’. The first image is sized correctly, the second has no size.

This is correct as rendered(*). Any images that fail to load are replaced by their alt text as an inline span. Your image has no alt text, so it is replaced by an empty string. Normally, as an inline element, this cannot be set to any particular size. The exception is the first image, because you've given it ‘display: block’, which makes it amenable to the explicit sizing provided by width/height.

In Quirks Mode, you would have got little ‘broken image’ icons sized the same as the images were supposed to be. This does not happen in Standards Mode because it is assumed that you know how to use alt text properly if you're using standards.

Either way, the dimensions measurement works fine for me if I replace the "..." URLs with real working addresses.

(*: although you can't actually see it because of the rather weird ‘overflow-hidden’ on html and ‘left: 1597px;’ combo. Well, unless you have a really wide monitor!)

bobince  2009-03-11 21:54:22
yeah, it's rendered.
Carter  2009-03-11 21:58:56
can you put a test case online? If I use the snippet you posted above and then alert(document.getElementById("parentDiv").offsetHeight), I get the expected height.
bobince  2009-03-11 22:14:30
For the code I have on there now, if I do an alert just like that except for ctl00_BodyContentPlaceHolder_UserControl I get 0 returned.
Carter  2009-03-11 22:40:07
Apologies, the images do have alt text. I edited out the sources, and alt texts. I never knew it would make a difference, learn something new every day! Also I can see it, I do have a large monitor, but the left is generated based on screen resolution. Dropping my resolution will change its val.
Carter  2009-03-12 16:24:38
+1  A: 

Are you sure it's not a Heisenbug? If you are setting the height somewhere programmatically and then trying to read it soon later, there is a chance DOM would not have updated.

Chetan Sastry  2009-03-11 21:58:03
+1  A: 

Loading this file with a valid IMG SRC gives 3 alert boxes of "37". Without valid IMG SRC it gives "17" on all three. What version of Jquery are you using? And which 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"&gt;
<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>

s_hewitt  2009-03-11 22:45:54
I think that is being generated based on screen resolution. The divs in question show up on my screen fine. Every bit of code I posted up there is generated by ASP.Net.
Carter  2009-03-11 22:51:08
Just tested it, and doesn't affect anything. However, I do get the height returned correctly.
s_hewitt  2009-03-11 22:53:49
hmmm, interesting... IE 7, jQuery 1.3.1
Carter  2009-03-11 23:25:25
I get the valid height when I use Firefox for this. That's awesome since it's only going to be used with IE7.
Carter  2009-03-11 23:29:20
I get non-zero answers using jQuery 1.3.2 in IE6 ("34"), IE7 ("38") and FireFox ("37"). If you switch the images from attributes height/width over to style="height/width" then all 3 browsers show "34".
s_hewitt  2009-03-11 23:30:05
Weird, well I updated to 1.3.2 and not Firefox is returning 0, reverted to 1.3.1 and it's still returning 0. I know it returned the right value once though. I'm not crazy!
Carter  2009-03-11 23:43:26
I guess it has to be from some style being inherited elsewhere. I'll look around some more but I'm at a loss.
Carter  2009-03-12 00:16:29
What does the CSS Foreground class look like? Do you have any CSS being applied to the IDs?
s_hewitt  2009-03-12 00:50:32
I included the CSS and I still get the correct heights. Do you get the correct results if you paste my code into an empty HTML file and use it, instead of testing your site?
s_hewitt  2009-03-12 16:55:38
Ha, so I figured it out. Heights weren't being set until an update panel was done doing it's stupid business. Adding an end request to get the height in the doc.ready function returned the correct values. Thanks for all the help, the answer is yours.
Carter  2009-03-12 21:21:04
What does the final javascript and jQuery look like? It sounds like it might be closer to Saneef or Chetan's answers.
s_hewitt  2009-03-12 22:21:54
I don't think anyone really had it, except the first guy who posted but he deleted his. New js: This in doc.ready... Sys.WebForms.PageRequestManager.getInstance().add_endRequest(setControlsTransparentBackgroundHeight);setControls then uses jquery height on the div you've been working on.
Carter  2009-03-13 00:33:50
well perhaps Chetan was sort of close, I think I mis-read his answer a bit.
Carter  2009-03-13 00:35:03
+1  A: 

Try calling the offset function once all the DOM and images are fully loaded using load() instead of document.ready().

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

Saneef  2009-03-11 22:46:23
Thanks for the insight, still no luck though.
Carter  2009-03-11 22:55:37
A: 

because ie sucks!!!!!

noOne  2009-12-11 11:54:49

related questions

What JavaScript patterns do you use most?
Javascript events
What style do you use for creating an "class" in JavaScript?
Graphing JavaScript Library
What's the difference in closure style
Getting the text from a drop-down box
How to specify javascript to run when ModalPopupExtender is shown
Length of Javascript Associative Array
How Do I Post and then redirect to an external URL from ASP.Net?
How to set up a CSS switcher in ASP.NET
Wrapping lists into columns
Javascript keyboard events primer? (or rather: help me with my custom dropdown)
Http Auth in a Firefox 3 bookmarklet
Best Debugging Tools for JavaScript/xulrunner Development
How can I turn a string of HTML into a DOM object in a Firefox extension?
Call ASP.NET Function From Javascript?
Javascript troubleshooting tools in IE
MAC addresses in JavaScript
Capturing TAB key in text box
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
Triple Quotes? How do I delimit a databound Javascript string parameter in ASP.NET?
ASP .Net Custom Client-Side Validation
What JavaScript library would you choose for a new project and why?
Detecting font in JavaScript