CSS und JavaScript: anderes CSS bei deaktiviertem JavaScript

[Alexander hier]

Hallo,

ich hätt' da gerne mal ein Problem:
Also, ich habe HTML-Quellcode mit zahlreichen Tabellenelementen, die mit style="display:none;" zunächst alle ausgeblendet und später per JavaScript einzeln ein- (und aus-) geblendet werden können.
Nun möchte ich, daß Browser mit deaktiviertem JavaScript, aber aktiviertem CSS alle Elemente angezeigt bekommen. Daß quasi das display:none überschrieben oder ignoriert wird - aber eben nur für nicht-JavaScript-fähige Browser.
Und HMTL-konform soll das natürlich auch sein.
Ich dachte zunächst an <noscript>, aber das läßt sich nicht einbauen.

Hat da jemand einen Tip, wie ich das "noscript"-Problem angehen kann?

[bascombe]

he

Zeige zu Beginn alle Inhalte an. Bei Usern mit Javascript blendest du mit einer Funktion, die onload startet, aus, was du nicht gleich zeigen möchtest.?

gruß bascombe

[Kai345]

Grütze .. äh ... Grüße!

Also, ich habe HTML-Quellcode mit zahlreichen Tabellenelementen, die mit style="display:none;" zunächst alle ausgeblendet und später per JavaScript einzeln ein- (und aus-) geblendet werden können.
Nun möchte ich, daß Browser mit deaktiviertem JavaScript, aber aktiviertem CSS alle Elemente angezeigt bekommen. Daß quasi das display:none überschrieben oder ignoriert wird - aber eben nur für nicht-JavaScript-fähige Browser.

Du hast einen Denkfehler: style="display:none" *ist* CSS, wird also nur von CSS-fähigen browsern beachtet.

Vielleicht anders vorzugehen: Alle Elemente per default sichtbar, und beim Ausführen des JS werden die erst mal ausgeblendet. Danach kannst du sie dann wie gewünscht wieder einblenden

Cü
Kai

[molily]

Hallo,

Die Lösung lautet das Konzept »Unobtrusive JavaScript«. Du fügst die interaktive Logik einschließlich der nötigen CSS-Regeln komplett mit JavaScript nachträglich ein, also keine Inline-Styles. In dem Fall reicht es, eine folgende CSS-Regel aufzustellen:

body.javascript-aktiv td.halt-die-bestimmten-zellen { display:none; }

Diese soll aktiv werden, wenn JavaScript aktiv ist, dazu im JavaScript onload (oder am besten nach dem Einlesen des DOM-Baumes, Stichwort DOMContentLoaded) einfach die Klasse »javascript-aktiv« dem body-Element hinzuzufügen.

Mathias

[Alexander hier]

Dankeschön!

Ich habe es nun so hingekriegt, indem ich zuerst nichts ausblende und nach jeder Tabellenzeile (wird per PHP-Schleife aus einer Datenbank geholt) eben diese Zeilen/Zellen per JavaScript (in einer der Zellen) ausblende.

Schönen Abend noch
Alexander