Alexander hier: CSS und JavaScript: anderes CSS bei deaktiviertem JavaScript

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?

  1. 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

  2. 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


    Kai

    --
    Der vertuschte Gefahrstoff: Dihydrogenmonoxid
    ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|
  3. 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

  4. 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