Client- Seitige Scripte (wie z.B. JavaScript) werden von uns nur wenn unbedingt nötig eingesetzt, warum sollte bekannt sein…
Nun kam aber unser Element “News-Abo / Netzwerke” (links unten – EDIT: Funktion wurde mittlerweile entfernt und anders aufgeteilt) dazu, mit einigen Infos zu unseren News und Network- Zugehörigkeiten. Immer anzeigen wollten wir sie nicht, also per Variable auf Klick einblenden bzw. ausblenden. Hier hat aber unser WordPress- Blog etwas dagegen gehabt – externe Variablenübergabe wird da aus Sicherheitsgründen blockiert. Also nun doch JavaScript…
Sämtliche JavaScripte arbeiten bei solchen Anforderungen mit dynamischen Austausch des CSS- Attributes “display”, leider nur mit der Ausgangssituation “display:none”. Besucher mit deaktiviertem JavaScript würden also nichts sehen! Eine Lösung wollte gefunden werden – und die war wieder einmal einfacher als vermutet…
Doch mal von vorne:
Das einfachste “Ein- und Ausblenden JavaScript”:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
Der passende Link dazu:
<a href="javascript: toggle_visibility('abolist');" title="Bereich aufklappen">NEWS-ABO / NETZWERKE</a>
Funktioniert prächtig, setzt aber den CSS- Inline- Style “display:none;” beim betroffenen Element (hier das Element mit der ID “abolist” – ursprünglich die Liste mit den Links) voraus – bei deaktiviertem JavaScript wäre dieses Element (in unserem Fall eben die gesamte Liste (siehe Quelltext)) also NICHT sichtbar und auch nicht aufrufbar!
Grübel – grübel – wie läßt sich eine “Noscript”- Version am Einfachsten realisieren – und es war eben einfacher als vermutet: die Einführung eines eigentlich sinnfreien Elements mit der o.g. ID, in dem die eigentliche Liste eingebunden ist – per JavaScript geschrieben, inkl. “display:none”.
Beispiel unserer Anwendung (Quellcode):
<script type="text/javascript">
/* <![CDATA[ */
document.write('<div id="abolist" style="display:none;">');
/* ]]> */
</script>
Dies öffnet ein “Div”- Element, aber nur wenn JavaScript im Browser aktiviert ist – und eben mit dem verlangtem css- Attribut “display:none”.
Danach kommt der Inhalt – die eigentliche Linkliste…
Nach dieser Liste wird selbstverständlich der “Div”- Schließer benötigt – wieder per JavaScript geschrieben:
<script type="text/javascript">
/* <![CDATA[ */
document.write('</div>');
/* ]]> */
</script>
Somit bekommen User mit aktivierten JavaScript die funktionstüchtige “Toggle- Scriptversion” vorgesetzt – per Klick läßt sich der bestimmte Bereich aus- und einblenden.
Besucher mit deaktiviertem JavaScript sehen die gesamte Liste immer – ein durchaus akzeptabler, und vor allem nach w3c.org valider Kompromiss…
Dominic 31.08.2008 - 15:21 Uhr
Jaja, das Einfachste ist of so einfach ;-)