Webkits: Höhe auslesen – zu früh

[Gunnar Bittersmann]

@@alle:

nuqneH

Ein am Ede des body eingebundenes JavaScript (jQuery) verwendet die Höhe eines Elements $('#foo').height(). In Webkits (Chrome, Safari) wird die Höhe jedoch ausgelesen, bevor das Element gerendert wurde; sie stimmt also nicht.

Gibt es da was Besseres als auf $(window).ready() zu warten (da sind etliche Bilder auf der Seite) oder einen Timeout (auf was auch immer für einen Wert) zu setzen? Wie bekomme ich die Höhe des Elements so früh wie möglich, aber so spät wie nötig, d.h. nach dem Rendern?

Qapla'

[suit]

Ich verwende hier $(window).load - das Problem tritt übrigens auch bei .position() oder .offset() auf.

Eine schöne Lösung dafür hab' ich aber auch noch nicht gefunden.

[Gunnar Bittersmann]

@@suit:

nuqneH

Ich verwende hier $(window).load

Das meinte ich natürlich auch; nicht $(window).ready.

Qapla'

[suit]

Irgendwas gabs da aber mal bez. Safari (ggf. auch Webkit allgemein) - irgend ein Bug, den man Fixen konnte in dem man ein setTimeout mit ein paar ms gesetzt hat - ich weiß leider den Kontext nicht mehr.

[Gunnar Bittersmann]

@@suit:

nuqneH

Irgendwas gabs da aber mal bez. Safari (ggf. auch Webkit allgemein) - irgend ein Bug, den man Fixen konnte in dem man ein setTimeout mit ein paar ms gesetzt hat - ich weiß leider den Kontext nicht mehr.

Ein paar sind zuwenig. 10 ms haben bei mir nicht geholfen, 100 ms ja.

Was nicht heißt, dass 100 ms auf jedem System genügend sind.

Qapla'

[dave]

Hi,

ich kann dieses Verhalten nicht nachvollziehen.

Geht's wenn du onDomReady auf die Höhe zugreifst?

~dave

[suit]

ich kann dieses Verhalten nicht nachvollziehen.

Nimm ein _weitaus_ komplexeres Dokument :)

[dave]

Hi,

ich kann dieses Verhalten nicht nachvollziehen.

Nimm ein _weitaus_ komplexeres Dokument :)

Aber in meinem Test ist doch sogar so ein komischer Akzent!!!1
Ich find das voll komplex :-P

Mich würde das Fehlerdokument interessieren.

~dave

[Mitleser]

Gibt es da was Besseres als auf $(window).ready() zu warten (da sind etliche Bilder auf der Seite) oder einen Timeout (auf was auch immer für einen Wert) zu setzen? Wie bekomme ich die Höhe des Elements so früh wie möglich, aber so spät wie nötig, d.h. nach dem Rendern?

Geht das nicht mit CSS-Transitions?!?! SCNR

Spontane Gedanken zur eigentlichen Frage:

• Tangieren denn die noch nicht geladenen Ressourcen die Höhe von #foo? Dann läge die Sache ja auf der Hand.

• Verändert sich das Verhalten, wenn Du #foo kopierst und kurzzeitig (unsichtbar) direkt hinter Body klatschst? Hier würde ich bewusst html() und nicht append & co verwenden, damit hatte ich schon Verzögerungseffekte, wenn auch im Gecko.

• Spinnt nur .height() oder bringen andere Kandidaten(z.B. outerHeight) bessere Ergebnisse?

[molily]

Gibt es da was Besseres als auf $(window).ready() zu warten (da sind etliche Bilder auf der Seite) oder einen Timeout (auf was auch immer für einen Wert) zu setzen?

Herausfinden, warum jQuery fehlerhaft arbeitet, und eine eigene Lösung schreiben.
Was machen die üblichen Verdächtigen denn?

Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

Was machen die üblichen Verdächtigen denn?

Geben alle dasselbe zurück – zu wenig.

Qapla'

[molily]

Ein am Ede des body eingebundenes JavaScript (jQuery) verwendet die Höhe eines Elements $('#foo').height(). In Webkits (Chrome, Safari) wird die Höhe jedoch ausgelesen, bevor das Element gerendert wurde

Das kann m.W. nicht sein, da das Auslesen der Höhe über offsetHeight, getComputedStyle usw. dazu führt, dass das Element gelayoutet und gezeichnet wird.
Bei komplexen Layouts, die nicht komplett fixiert sind, kann dabei natürlich ein Übergangszustand herauskommen, insbesondere wenn noch externe Ressourcen geladen werden.

Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

Das kann m.W. nicht sein,

Live-Demo beim Mittagessen?

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Gibt es da was Besseres als auf $(window).ready() zu warten (da sind etliche Bilder auf der Seite) oder einen Timeout (auf was auch immer für einen Wert) zu setzen?

Habe jetzt beides:

function machWas()  
{  
  if ($('#foo').height() > 42)  
  {  
    /* mach was */  
  }  
}  
  
if ($('#foo').height() > 42)  
{  
  /* mach was */  
}  
else  
{  
  window.setTimeout(machWas, 10);  
  window.setTimeout(machWas, 30);  
  window.setTimeout(machWas, 100);  
  window.setTimeout(machWas, 300);  
  $(window).load(machWas);  
}

Aber schön ist was anderes.

Aber was?

Wie bekomme ich die Höhe des Elements so früh wie möglich, aber so spät wie nötig, d.h. nach dem Rendern?

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Aber schön ist was anderes.

Äußerst unschön daran auch der duplizierte Code. Vielleicht doch (geringfügig) besser so:

function machWas()  
{  
  if ($('#foo').height() > 42)  
  {  
    /* mach was */  
    clearTimeout(t1);  
    clearTimeout(t2);  
    clearTimeout(t3);  
    clearTimeout(t4);  
    $(window).unbind('load', machWas);  
  }  
}  
  
var t1 = window.setTimeout(machWas, 10),  
    t2 = window.setTimeout(machWas, 30),  
    t3 = window.setTimeout(machWas, 100),  
    t4 = window.setTimeout(machWas, 300);  
$(window).load(machWas);  
  
machWas();

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

function machWas()

{
  if ($('#foo').height() > 42)
  {
    /* mach was */
  }
}

  
Endlich mal jemand, der die Einrückungen so handhabt, wie ich und nicht  
  
~~~javascript
function machWas(){  
  if ($('#foo').height() > 42){  
    /* mach was */  
  }  
}

Matthias

[suit]

1TBS, ihr Ketzer!

[Gunnar Bittersmann]

@@suit:

nuqneH

1TBS, ihr Ketzer!

Außerhalb der kleinen Welt des Eingabefeldes hier im Forum, ja. Unbedingt.

Qapla'

[Blaubart]

Tach.

1TBS, ihr Ketzer!

Außerhalb der kleinen Welt des Eingabefeldes hier im Forum, ja. Unbedingt.

Falls Du damit andeuten wolltest, daß hier im Forum keine Tabs funktionieren: Klar, die direkt einzugeben, ist nervig. Wenn Du den Code aber z. B. in einem Editor Deiner Wahl schreibst und dann ins Eingabefeld kopierst, werden die Tabs zumindest durch eine fest Anzahl an Leerzeichen ersetzt. Ist ja auch schon was wert. ;-)

[Kai345]

[latex]Mae  govannen![/latex]

1TBS, ihr Ketzer!

Nö, immer noch nicht ganz.

if (foo == 1) {  
    foobar();  
} else if (bar == 3) {  
    boofar();  
} else {  
    baz();  
}

läßt das keyword „else“ zu sehr untergehen, meiner Meinung nach gehören die (zusammengehörenden) Keywords einer Kontrollstruktur in die jeweils gleiche Einrück-Ebene:

if (foo == 1) {  
    foobar();  
}  
else if (bar == 3) {  
    boofar();  
}  
else {  
    baz();  
}

Stur lächeln und winken, Männer!
Kai

[suit]

läßt das keyword „else“ zu sehr untergehen,

Schlüsselwörter werden vom Editor hervorgeben, genauso wie Klammern - das Argument mit der besseren Lesbarkeit ist heutzutage nicht mehr sehr kräftig.

Selbst in Editoren wie vi und vim hat Syntaxhighlighting schon lange Einzug gehalten.

[molily]

} else if (bar == 3) {

läßt das keyword „else“ zu sehr untergehen

} am Anfang einer Zeile mit irgendetwas danach ist:

• ein Syntaxfehler
• das Ende eines Block-Statements mit einem weiteren neuen Statement in derselben Zeile
• Das Ende des Blocks einer do-while-Schleife
• ein catch- oder finally-Block eines try-catch-Statements
• ein else

Außer dem else kommen diese Fälle selten bis nie vor, oder sollten zumindest selten bis nie vorkommen.

Daher wird } mit irgendwas dahinter so gut wie immer } else sein wird. Wenn darüber noch ein if { steht, dann ist das fast garantiert, wenn der Code einigermaßen sinnvoll formatiert ist.

Ich würde dann eher argumentieren, dass ein eventuell verschachteltes if-Statement im else-Zweig untergeht.

Mathias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Endlich mal jemand, der die Einrückungen so handhabt, wie ich und nicht

Wieso „endlich mal“?

BTW: Die Kommasetzung handhabe ich anders wi^Wals du. ;-)

Qapla'

[Der Martin]

Hallo,

Endlich mal jemand, der die Einrückungen so handhabt, wie ich und nicht
BTW: Die Kommasetzung handhabe ich anders wi^Wals du. ;-)

ich auch - jetzt ist mir auch klar, was mir an diesem Satz (eigentlich Halbsatz) so merkwürdig vorkam. :-)

Ciao,
 Martin

[Matthias Apsel]

Om nah hoo pez nyeetz, Der Martin!

Hallo,

Endlich mal jemand, der die Einrückungen so handhabt, wie ich und nicht
BTW: Die Kommasetzung handhabe ich anders wi^Wals du. ;-)

Endlich mal jemand, der die Einrückungen so handhabt, wie ich.
Endlich mal jemand, der die Einrückungen so handhabt wie ich.

Durch das zweite Komma bekommen die Sätze sogar eine unterschiedliche Bedeutung.

Matthias

[suit]

Warum kein setInterval sagen wir alle 50 ms - warum grade 10, 30, 100 und 300?

[Gunnar Bittersmann]

@@suit:

nuqneH

Warum kein setInterval sagen wir alle 50 ms

Wäre auch denkbar. Aber mitzählen und nach etwa 10 Wiederholungen nicht mehr ausführen, sondern dann auf window.load warten.

warum grade 10, 30, 100 und 300?

Ich dachte, eine (annähernd) geometrische Folge wäre vielleicht angebrachter als eine arithmetische.

Qapla'