Objekt existiert erst nach alert ?

[Rene]

Hallo zusammen,

ich habe eine textarea mit der id 'notesArea' diese ist 100px hoch und disabled.

Ich habe sie zudem ein icon zum ein- und ein icon zum ausblenden der textarea.
Beim Onclick auf das einblenden-icon wird die Funktion scrollBox() aufgerufen.

function scrollBox()
{
    var objBox = document.getElementById('notesArea');
    //alert("fjhfhk");
    objBox.scrollTop = objBox.scrollHeight;
}

Nun sollte die textarea angezeigt werden und die letzten Zeilen darin angezeigt werden.

Die Anzeige klappt jedoch greift das runterscrollen nur im Firefox im IE gehts nicht!
Wenn ich das alert einkommentiere funzt es auch im IE.
Was ich aber niemandem zumuten möchte dass da immer ein alert erscheint.

PS:

• keine anderen Browser getestet
• Die Funktion zum runterscrollen wird auch bei onload ausgeführt da ich später den Anzeigestatus der textarea sichern möchte.

Kennt jemand den Fehler?
Wie kann ich das lösen?

Grüße
René

[LX]

Im IE sind manche Eigenschaften nicht sofort verfügbar. Mit einem einfachen window.setTimeout kann man sich da leicht behelfen.

Gruß, LX

[Gunnar Bittersmann]

@@LX:

nuqneH

Im IE sind manche Eigenschaften nicht sofort verfügbar. Mit einem einfachen window.setTimeout kann man sich da leicht behelfen.

Und dies nur für IE.

Wobei die dafür angegebene Verzögerungszeit auch 0 sein darf. WTF?

Qapla'

[Struppi]

Im IE sind manche Eigenschaften nicht sofort verfügbar. Mit einem einfachen window.setTimeout kann man sich da leicht behelfen.

Und dies nur für IE.

Nein, auch Firefox hat solche Probleme.

Struppi.

[LX]

Hallo, Gunnar!

Ein setTimeout(fn, 0) hat zur Folge, dass fn aus dem momentanen Thread ausgekoppelt wird, d.h. alles weitere, was zeitgleich passieren soll, zuerst ausgeführt wird.

Der große WTF-Faktor setzt dann ein, wenn man überlegt, dass verschiedene Browser unterschiedlich mit der Reihenfolge der so in den zeitlichen Hintergrund verschobenen Threads umgehen: Der IE hat nämlich einen Script-Stack, der nicht ganz so funktioniert, wie der gesunde Menschenverstand dies erwarten würde.

Gruß, LX

[molily]

Hallo,

Und dies nur für IE.

Du preist diese Lösung als besonders vorteilhaft an, dabei ist sie eine der schlechteren. Auf placeholder aus HTML5 wurde in den StudiVZ-Blog-Kommentaren ja schon hingewiesen, dafür gibt es verschiedene brauchbare Implementierungen, die abfragen, ob der Browser das Feature schon unterstützt und sich im nur negativen Falle einschalten. Davon ganz abgesehen:

»Bei dieser Lösung sind Präsentationsschicht (CSS) und Verhaltensschicht (JavaScript) sauber voneinander getrennt.«

Soweit ich das sehe, ist das gerade nicht der Fall. Wenn JS deaktiviert ist, dann sind die Labels komplett unsichtbar. Wenn JS aktiviert ist, dann sind sie für viele Screenreader unsichtbar, weil sie standardmäßig auf display:none gesetzt sind. Außerdem ist die Präsentation feste ins JS gecodet: Da wird ja direkt .style.display = inline/none gesetzt. Wirklich Trennung von CSS und Verhalten wäre, wenn JS nur eine Klasse setzt, um die Änderung des Status widerzuspiegeln. Erst damit greift die nötige, ins CSS ausgelagerte Umformatierung und die Labels werden versteckt bzw. über die Felder gelegt. So könnte man auch ein barrierefreies Verstecken umsetzen (z.B. Off-Left-Methode). Wenn du auf besagte Trennung Wert legst, sollte das JavaScript davon abhängig sein, wie sich dieser Statuswechsel konkret in der Darstellung niederschlägt.
Zudem setzt das Script globale Variablen, da wäre ein anonymer Funktionswrapper (function () { ... })(); sinnvoll.

Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

Und dies nur für IE.
Du preist diese Lösung als besonders vorteilhaft an, dabei ist sie eine der schlechteren.

Hm, aber besser als value und color mit JavaScript hin- und herzuschalten ist sie doch, oder?

Auf placeholder aus HTML5 wurde in den StudiVZ-Blog-Kommentaren ja schon hingewiesen

Yep, war mir neu. Allerdings tut die Kombination von @autofocus und @placeholder nicht das Gewünschte, die Beschriftung sollte ja trotz Focus sichtbar sein.

»Bei dieser Lösung sind Präsentationsschicht (CSS) und Verhaltensschicht (JavaScript) sauber voneinander getrennt.«
Soweit ich das sehe, ist das gerade nicht der Fall.

Hm …

Wenn JS deaktiviert ist, dann sind die Labels komplett unsichtbar.

Ja, die Beschriftung ist ein zusätzliches Gimmick, das nur mit JavaScript zur Verfügung steht. Oops, sehe ich hier eine Ungereimtheit zu „die Beschriftung sollte ja [beim Autofocus] trotz Focus sichtbar sein“? Ja, sehe ich. Entweder die Beschriftung ist zusätzlich oder essentiell.

Alledings geht auf den VZ-Plattformen (wofür ich die Lösung entwickelt hatte) ohne JavaScript sowieso kaum was.

Wie sollte man die Beschriftung ohne JavaScript realisieren? Innerhalb der Eingabefelder belassen? Etwas heller, damit sie die Eingabe nicht stört. Ich bin sicher, sie stört trotzdem.

Mit der CSS-Pseudoklasse :focus ausblenden? Dazu müsste im Markup erst das Eingabefeld, dann dessen Beschriftung stehen. Dann müsste das Eingabefeld aus dem Fluss genommen werden, was wieder ganz andere Probleme bereitet.

Oder die Beschriftung ohne JavaScript außerhalb der Eingabefelder plazieren? Dann passt das Layout u.U. hinten und vorne nicht mehr.

Wenn JS aktiviert ist, dann sind sie für viele Screenreader unsichtbar

Die VZ-Plattformen (wofür ich die Lösung entwickelt hatte), sind in puncto Barrierefreiheit sowieso verbesserungswürdig.

Außerdem ist die Präsentation feste ins JS gecodet: Da wird ja direkt .style.display = inline/none gesetzt.

Ja, das bringt jQuery so mit sich. Aber wer schaut schon in eine Blackbox hinein? ;-) Ohne Framework würde ich nicht mit JavaScript CSS-Eigenschaften direkt ändern und 'foo.style.display = "none";' schreiben, sondern wie du sagst:

Wirklich Trennung von CSS und Verhalten wäre, wenn JS nur eine Klasse setzt, um die Änderung des Status widerzuspiegeln. Erst damit greift die nötige, ins CSS ausgelagerte Umformatierung und die Labels werden versteckt bzw. über die Felder gelegt.

Ja, das predige ich hier auch hin und wieder.

Aber wen jQuery nunmal Methoden hide() und show() bietet, sollte man diese ignorieren mit dem Hintergrundwissen, dass intern foo.style.display gesetzt wird? Oder doch das Framework als Blackbox ansehen und die Methoden, die es nach außen bereitstellt, auch nutzen?

So könnte man auch ein barrierefreies Verstecken umsetzen (z.B. Off-Left-Methode). […] Zudem setzt das Script globale Variablen, da wäre ein anonymer Funktionswrapper (function () { ... })(); sinnvoll.

Ist für eine zukünftige Überarbeitung des Artikels gespeichert. Danke für deine Anmerkungen.

Qapla'

[Struppi]

Die Anzeige klappt jedoch greift das runterscrollen nur im Firefox im IE gehts nicht!
Wenn ich das alert einkommentiere funzt es auch im IE.

Hast du dir mal anzeigen lassen welche Werte du setzt?
Also statt alert("fjhfhk"); einfach mal alert(objBox.scrollHeight);

Wieso eigentlich scrollHeight? So ganz verstehe ich nciht, was du bezwecken willst.

Struppi.

[Rene]

Hallo Leutz,

vielen Dank erstmal für die Ideen.

Ich werds als erstes Mal mit dem Timeout versuchen.
Rückmeldung geb ich auch auf jeden Fall, bitte um Geduld und keine Hektik.

Grüße
René

[Struppi]

Ich werds als erstes Mal mit dem Timeout versuchen.

Wieso? Was hat den die Kontrollausgabe ergeben?

Struppi.