Warum sollte jquery-0 zurück für eine offsetHeight, wenn firebug sagt, es ist 34?

Also ich habe ein div, dessen Inhalt zur Laufzeit generiert es zunächst keine Höhe zugeordnet. Wenn es generiert laut firebug und von dem, was ich kann alert mit js die div hat immer noch eine Höhe von 0. Dennoch, mit Blick auf den nur-lese-Eigenschaften mit firebug kann ich sehen, es hat einen offset Höhe von 34. Es ist dieser Wert, den ich brauche. Hoffentlich ist es offensichtlich, aber in Fall ist es nicht, diese Zahl ist variabel, es ist nicht immer 38.

So, ich dachte, dass ich konnte einfach nicht bekommen, dass, indem Sie diese über jquery...

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

oder dieses mit gerade js...

document.getElementById("parentDiv").offsetHeight;

Aber alle, die zurückgegeben wird, ist 0. Hat es was mit der Tatsache zu tun, dass sich offset-Höhe ist eine nur-lese-Eigenschaft in diesem Beispiel? Wie kann ich diese Höhe? Ich meine firebug ist es herauszufinden irgendwie, so scheint es, wie ich sollte in der Lage sein.

Edit:
Hier ist ein Beispiel, was die div aussieht wie jetzt...

<!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>

Dieser code wird erzeugt, indem eine Steuerung in einer separaten Bibliothek. So, hier ist der eigentliche code zu erstellen ist es meiner .aspx-Seite.

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

Ok, es ist leicht verändert, aber das ist eine ganze Menge mehr HTML als ich vor hatte. Die div meinte ich als "parentDiv" vor "genannt wird, ctl00_BodyContentPlaceHolder_Usercontrol" dort oben. Das code enthält das div-Element in Frage, es sind Geschwister, Eltern, Großeltern und Kinder. Es ist fast eine direkte Kopie von firebug.

Update:
Ich sollte erwähnt haben dies getan, im IE 7. Es schien zu funktionieren eine Zeit, in Firefox, aber es ist jetzt 0 zurückgeben. Bringt das irgendwelche neuen Erkenntnisse der möglichen Workarounds oder so was?

... Sie alle müssen denken, ich sei verrückt.

Update:
Einige 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;
}

Dies sollte markiert sein, unter dom. Es hat nichts zu tun mit jQuery-wie du selbst angemerkt.
Ack. Großbuchstaben FTL!
Ich bin mir nicht sicher, wo ich sagte, es hat nichts zu tun mit jQuery. Ich weiß nicht, was mit dem zu tun hat, dass ist mein problem, ich werf die dom-tag dort, wenn Sie mögen. Die Kappen sind generiert, das ist nicht mein tun.

InformationsquelleAutor |

4

Sind Sie sicher, dass es nicht eine Heisenbug? Wenn Sie die Einstellung der Höhe irgendwo programmgesteuert und dann zu versuchen, es zu Lesen, bald später, gibt es eine chance DOM würde nicht aktualisiert haben.

InformationsquelleAutor Chetan Sastry
5

Sind Sie sicher, dass das element im Dokument-Baum, und gerendert? (dh. nicht "display: none", sondern "visibility: hidden" ist OK.)

Einem element, das nicht auch tatsächlich teilnehmen, das Dokument render-Prozess hat keine Dimensionen, und geben eine offsetWidth/Höhe 0.

ETA nach code-Beispiel Hinzugefügt: mit Ihren genauen code, den ich bekommen offsetHeight auf die div von '17'. Das erste Bild ist richtig dimensioniert, der zweite hat keine Größe.

Dies ist richtig, da gerendert(*). Alle Bilder, die nicht geladen werden, ersetzt werden durch Ihren alt-text als inline-span. Dein Bild hat keinen alt-text, so ist es durch einen leeren string ersetzt. Normalerweise, wie ein inline-element, kann diese nicht festgelegt werden auf eine bestimmte Größe. Die Ausnahme ist das erste Bild, da hast du es gegeben 'display: block', das macht es empfänglich ist für die explizite Dimensionierung zur Verfügung gestellt von der Breite/Höhe.

Im Quirks-Modus, würden Sie haben wenig "broken image" icons Größe die gleichen wie die Bilder werden sollten. Dies geschieht nicht in den Standards-Modus, denn es wird davon ausgegangen, dass Sie wissen, wie Sie den alt-text korrekt an, wenn Sie mit standards.

Entweder Weg, die Dimensionen, die Messung funktioniert gut für mich, wenn ich die Stelle des " ... " - URLs mit real arbeitenden Adressen.

(*: Sie können zwar nicht wirklich sehen, weil das ziemlich seltsam 'overflow-hidden' auf html-und 'Links: 1597px;' combo. Gut, es sei denn, Sie haben eine wirklich wide monitor!)
- ja, es ist gerendert.
- kannst du mal ein TestCase online? Wenn ich das snippet, das Sie oben gepostet und dann alert(document.getElementById("parentDiv").offsetHeight), bekomme ich die erwartete Höhe.
- Für den code habe ich es jetzt, wenn ich eine Warnung nur wie, dass, außer für ctl00_BodyContentPlaceHolder_Usercontrol bekomme ich 0 zurück.
- Entschuldigung, die Bilder haben alt-text. Ich bearbeitete die Quellen, und alt-Texte. Ich wusste nie, es würde einen Unterschied machen, jeden Tag etwas neues lernen! Auch ich kann es sehen, ich habe einen großen monitor, aber die linke generiert basierend auf Bildschirmauflösung. Fallen meine Auflösung ändern Sie den val.
InformationsquelleAutor bobince
1

Versuchen Sie den Aufruf der offset-Funktion, nachdem die DOM-und die Bilder sind voll geladen mit load() statt document.ready().

$(window).load(function () {
//Setzen Sie den code für die Höhe hier
});
- Vielen Dank für die Einsicht, immer noch kein Glück obwohl.
InformationsquelleAutor Saneef

Laden Sie diese Datei mit einem gültigen IMG SRC gibt 3 alert-Boxen von "37". Ohne gültige IMG SRC es gibt "17" auf alle drei.
Welche version von Jquery benutzt du? Und welche version von 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>

Ich denke, die generiert wird, basierend auf Bildschirmauflösung. Die divs in Frage zeigen sich auf meinem Bildschirm in Ordnung. Jedes bisschen code, den ich gepostet bis es generiert wird ASP.Net.
Es gerade getestet, und hat keinen Einfluss auf irgendetwas. Jedoch, ich bekomme die Höhe korrekt zurückgegeben.
hmmm, interessant... IE 7 jQuery 1.3.1
Ich bekomme die gültige Höhe, wenn ich Firefox verwenden für diese. Das ist genial, da es nur noch mit IE7.
Ich bekomme null Antworten mit jQuery 1.3.2 im IE6 ("34"), IE7 ("38") und FireFox ("37"). Wenn Sie wechseln Sie die Bilder von Parametern Höhe/Breite über Stil="Breite/Höhe" und dann alle 3 Browser zeigen "34".
Komisch, naja ich aktualisiert 1.3.2 und Firefox nicht ist 0 zurückgeben, wieder auf 1.3.1 und es ist noch immer 0 zurückgeben. Ich weiß es wieder den richtigen Wert einmal. Ich bin nicht verrückt!
Ich denke, es hat zu sein, von einem Stil geerbt anderswo. Ich werde schauen Sie sich um einige mehr, aber ich bin ratlos.
Was macht die CSS-Vordergrund-Klasse Aussehen? Hast du irgendwelche CSS angewendet wird, um die IDs?
Ich habe die CSS und ich bekomme immer noch die richtigen Höhen. Erhalten Sie die richtigen Ergebnisse, wenn Sie einfügen mein code in eine leere HTML-Datei und verwenden Sie es anstelle der Prüfung Ihrer Website?
Ha, so habe ich es herausgefunden. Höhen waren nicht festgelegt wird, bis ein update-panel fertig war, es zu tun ist dumm-Geschäft. Hinzufügen eines end-Anforderung, um die Höhe in der doc.ready Funktion zurückgegeben die richtigen Werte. Vielen Dank für all die Hilfe, die Antwort liegt bei Ihnen.
Wie sieht die endgültige javascript und jQuery Aussehen? Es klingt wie es könnte näher an Saneef oder Chetan Antworten.
Ich glaube nicht, dass jemand wirklich hatte, außer der erste Kerl, der das geschrieben aber er gelöscht sein. Neue js: Das doc.fertig... Sys.WebForms.PageRequestManager.getInstance().add_endRequest(setControlsTransparentBackgroundheight); setControls dann verwendet jquery die Höhe des div, die Sie gearbeitet haben.
gut, vielleicht Chetan wurde die Art in der Nähe, ich glaube, ich mis-Lesen Sie seine Antwort ein wenig.

InformationsquelleAutor s_hewitt

0

Ich habe gerade ein Problem, wo ich war, die offsetHeight eines Elements, wenn der doc fertig war, aber es war in einem container, der versteckt war.

Führte es in einer offsetHeight Wert von 0, aber firebug sagte, es hatte eine Höhe von 32.

InformationsquelleAutor

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.