Content-Slider: Inhalt anzeigen auch wenn Javascript deaktiviert?

**illplanet** · 11.09.2013, 10:22

Zur Zeit ist es so, dass alle Inhaltselemente innerhalb des Contao 3 Content-Slider Umschlags nicht angezeigt werden, falls Javascript deaktiviert ist. Es wäre doch eigentlich sehr praktisch, wenn die einzelnden Slides in einem solchen Fall ohne die Sliderfunktion einfach untereinander angezeigt würden. Hat jemand eine Idee, wie sich das vielleicht umsetzen lässt?
Eine Alternative wäre den Slider nur anzeigen zu lassen wenn, Javascript aktiviert ist (display: none/ block mittels Javascript switchen sofern Javascript aktiviert). Den Slider Inhalt kann man dann nochmals ohne Slider-Umschlag in einen div-Container packen, diesen standardmäßig anzeigen lassen und nur ausblenden, falls Javascript aktiv ist. Allerdings habe ich dann den doppelten Quelltext, was ich eigentlich gerne vermeiden möchte.

**illplanet** · 17.09.2013, 10:18

Anyone?

elChupete · 04.05.2014, 11:56

Ich pushe das hier mal, da ich das gleiche Problem / Frage habe.

Gibt es eine Möglichkeit bei deaktiviertem Java Script zumindest das erste der Inhaltselemente anzeigen zu lassen, so dass das Layout bei deaktiviertem Script nicht zerschossen wird?

Oder anders gefragt. Wie bekomme ich eine CSS Only Fallback Lösung für den Contao eigenen Slider hin?

**marcos** · 07.05.2014, 09:40

Hallo zusammen

Ich würde das mit dem Include-Elemente (Inhaltselement) lösen und dies ein ein Noscript-Tag packen.

Also das würde im Backend dann wiefolgt aussehen:

Element: Content-Slider Anfang
Element: Text 1 (ID: 10)
Element: Text 2 (ID: 11)
Element: Content-Slider Ende
Element: HTML mit <noscript>
Element: Include-Elemente (Inhaltselement ID: 10)
Element: Include-Elemente (Inhaltselement ID: 11)
Element: HTML mit </noscript>

Somit habt ihr ein Fallback, wenn kein JS aktiviert ist, ihr müsst aber nicht zwei identische Inhalte pflegen da sie ja verlinkt sind.
Das ganze ist ungetestet, sollte aber eigentlich funktionieren.

Gruss
Marco

elChupete · 08.05.2014, 17:54

Werde ich am Wochenende mal probieren

elChupete · 09.05.2014, 22:28

Hallo Marcos,

Deine Lösung funktioniert fast...

Wenn Java deaktiviert ist, wird der

Element: Content-Slider Anfang
Element: Text 1 (ID: 10)
Element: Text 2 (ID: 11)
Element: Content-Slider Ende

leider trotzdem in die Seite gebaut. Allerdings weil slider sind die einzelnen Elemente in den Unsichtbaren Bereich verschoben

Ich habe in meinem Slider 8 Bilder, die je 400 pixel hoch sind. Es kommt also zunächst mal ein 2400 Pixel hoher leerer Bereich und dann das Bild was im <noscript> eingebettet ist.

Kann man es noch irgendwie hinbiegen, dass der Contentslider Teil nur eingebettet wird, wenn Script auch aktiv ist?

elChupete · 10.05.2014, 20:55

Ist zwar etwas Bastelei aber funktioniert:

Das Slidereröffnungselement bekommt eine zusätzliche Klasse (in diesem Beispiel nojs)

Dieses wird erstmal per CSS auf display:none gesetzt

.nojs {
display:none;
}

Dann wird ein neues Modul (HTML) im Theme abgelegt mit folgendem Inhalt (jquery muss aktiviert sein)

Modul NOJS
<script>
$(document).ready(function() {
$('.nojs').css('display', 'block');
});
</script>

Dieses JS Script schaltet die Klasse .nojs auf sichtbar

Dieses Modul wird in dem Artikel der den SLider hat vor dem Eröffnungselement eingebunden.

Wenn JS aktiviert ist, wird dadurch der Slider sichtbar. Wenn JS deaktiviert ist, bleibt der Slider unsichtbar.

Die Alternative die angezeigt wird, wenn JS deaktiviert ist, wird wie von MArco beschrieben gebaut

Also

Element: Modul:NOJS
Element: Content-Slider Anfang mit Klasse nojs
Element: Text 1 (ID: 10)
Element: Text 2 (ID: 11)
Element: Content-Slider Ende
Element: HTML mit <noscript>
Element: Include-Elemente (Inhaltselement ID: 10)
Element: Include-Elemente (Inhaltselement ID: 11)
Element: HTML mit </noscript>

**Broichi** · 04.06.2015, 13:36

Hallo,

der Beitrag ist zwar etwas älter, aber ich hätte da eine Frage.

Was ist mit "HTML mit <noscript>" gemeint? Ein Inhaltselement mit dem Typ "HTML" und als Code "<noscript>"?
Das klappt bei mir nicht. Da kommt dann der Hinweis mit einem X vor der Zeile: "Start tag seen without seeing a doctype first. Excepted e.g. <!DOCTYPE html>. Excepted closing tag. Unexcepted end of file". Nach dem Speichern kommt "Ein Fehler ist aufgetreten." Und der Inhalt des Codes wurde entfernt.

Was muss ich machen?

Vielen Dank.

Gruß

Martin