Eure Meinung: jquery ausblenden, wenn JS deaktiviert

[rw1981]

Eure Meinung: DIV ausblenden, wenn JS deaktiviert

Hallo zusammen,

ich würde mich sehr freuen, wenn Ihr mir kurz sagen könntet, ob ich mir die folgende Lösung richtig zusammengereimt habe:

Ich möchte, dass ein div-Element ausgeblendet wird, wenn JS deaktiviert ist. Dieses div habe ich per css mit

display:none

ausgeblendet und per jquery foldendes geschrieben:

 <script>
   $(document).ready(function() {
    $('#div').css('display', 'block');
   });
</script>

Weil jquery das div erst sichtbar macht, wird es erst sichtbar, wenn JS aktiviert ist.
Also bei mir funktioniert das, doch ist dieser Weg auch typisch bzw. best practice?

ICH DANKE EUCH

 

[Myhar]

AW: Eure Meinung: jquery ausblenden, wenn JS deaktiviert

Der beste Weg ist, wenn alle benötigten Informationen auch mit deaktiviertem Javascript sichtbar sind. Bei deiner Lösung ist dies nicht der Fall.
Befindet sich in deinem #div jedoch kein relevanter Inhalt, dann kannst du es so lassen.

 

[rw1981]

AW: Eure Meinung: jquery ausblenden, wenn JS deaktiviert

Ok, meinst du, dass die relevanten Inhalte, dann alternativ mit <noscript> ohne JS angezeigt werden sollen, oder?

<style>
   #div-mit-JS { display:none; }
   #div-ohne-JS { display:block; }
</style>

 <script>
   $(document).ready(function() {
   $('#div-mit-JS').css('display', 'block');
   });
</script>      

<div id="div-mit-JS>Inhalte....</div>

<noscript>
   <div id="div-ohne-JS>Inhalte....</div>
</noscript>

Wäre das so logisch bzw. üblich?

 

[Myhar]

AW: Eure Meinung: jquery ausblenden, wenn JS deaktiviert

Nein, den noscript Bereich brauchst du nicht. Da würdest du ja nur Inhalte doppelt definieren, was wohl nicht zielführend ist. Auch ist die Wartung von solchen doppelten Bereichen wohl recht aufwändig.
Einen Ansatz, wie man Inhalte mit JS ein- ausblenden kann (um sie bei deaktiviertem Javascript anzuzeigen) habe . Ich verlinke das nur, weil ich es nicht erneut posten will. Vielleicht sollte ich ein Tutorial daraus machen
Falls dir zu dieser Vorgehensweise etwas unklar ist, dann frag ruhig nach.

 

[rw1981]

AW: Eure Meinung: jquery ausblenden, wenn JS deaktiviert

Ui, das sieht kompliziert aus... da mache ich mich aber gleich mal dran.

Danke auch für dein Angebot Fragen stellen zu dürfen!

Habe ich es richtig verstanden, dass das zusätzliche CSS nur gelesen werden kann, wenn JS aktiviert ist. Ist es aktiviert, dann wird der write-Befehl erkannt und das neue CSS berücksichtigt, wenn JS deaktiviert ist, dann wird die gesamte Zeile überlesen, richtig?

Wieso braucht man aber die auskommentierte CDATA-Zeile?

Und meine letzte Frage: überschreibt das neue CSS-Stylesheet die aufgeführten Selektoren komplett oder nur die einzelnen Deklarationen, die quasi doppelt vorkommen?

Ich danke dir!

 

[Myhar]

AW: Eure Meinung: jquery ausblenden, wenn JS deaktiviert

Es sieht komplizierter aus, als es ist.
Und zur Beantwortung deiner Fragen:
Ja, das hast du richtig verstanden. Wenn JS deaktiviert ist, dann wird das CSS nicht geladen.
<- Ist hier schon super erklärt, ich könnte es nicht besser.

Es überschreibt nur einzelne Deklarationen. Das neue Stylesheet ist bei mir nur ein paar Zeilen lang mit folgenden Klassen. Bei dir würde wahrscheinlich folgende Klasse reichen:

.hiddenWithJS{display:none} /*Klassenname natürlich anpassbar*/

Dann sind alle Elemente, die hiddenWithJS als Klassenname haben, mit aktiviertem JS automatisch versteckt. Und es braucht kein jQuery mehr dafür. Auf user ohne JS hat die Klasse natürlich keinen Einfluss.

 

[rw1981]

AW: Eure Meinung: jquery ausblenden, wenn JS deaktiviert

Ok, im vereinfachten Beispiel von oben, ist das alles ok und logisch und der CSS-Coder für die JS-version ist klein.
Komplizierter wird es aber, wenn man sowohl mit als auch ohne JS eine Bildergalerie zeigen will.

Beipiel:
Eine Bildergalerie soll in Form eines Sliders per JS animiert werden. Für die Animationen werden außerdem CSS-Definitionen benötigt.

Bei dekativiertem JS können die Bilder nicht per animiertem Slider angezeigt werden und sollen deshalb in Tabellenform angezeigt werden.

Jetzt muss ich doch zunächst die CSS-Elemente für die Version ohne JS so definieren, dass sie in Tabellenform erscheinen und anschließend im JS-CSS so definieren (und somit überschreiben), dass sie bei eingeschaltetem JS als Slider angezeigt werden, oder?

Bitte sag ja

 

[Myhar]

AW: Eure Meinung: jquery ausblenden, wenn JS deaktiviert

Das macht das ganze etwas komplizierter, das stimmt.
Aber du hast Recht (also sag ich ja )

Soooo viel mehr Arbeit sollte das aber auch nicht sein, bei deaktiviertem JS einfach die Bilder anzeigen... Also ein display:block (oder inline, je nachdem wie du sie darstellen willst) und das restliche CSS ins Javascript CSS.

 

[rw1981]

AW: Eure Meinung: jquery ausblenden, wenn JS deaktiviert

Super, dankeschön!