Sven Rautenberg: cross browser FAQ foldout

Beitrag lesen

Ich suche nun ein Skript mit in etwa derselben Funktionalität, das aber mindestens in allen Browsern mit DOM-Unterstützung funktioniert und zudem abwärtskompatibel ist - d.h. bei älteren Browsern und bei deaktiviertem Javascript sollen alle Antworten permanent zu sehen sein.

Lobenswert, daß ganze auch abwärtskompatibel zu gestalten. Damit ergeben sich für die Entwicklung der Seite gewisse Dinge, die einfach "zwingend" sind, und der Lösungsweg im Prinzip von allein. ;)

Die Fragen sollen also ohne Javascript auch zu sehen sein. Dann müssen sie auch ohne CSS zu sehen sein. Die erste Aufgabe lautet also: Erstelle eine Seite völlig ohne Javascript und CSS, die die FAQ beinhaltet und so erscheint, wie du es auf diesem niedrigen Level gerne hättest.

Um die Sache einfach zu machen: Die Fragen sollten Links sein, auf die man klicken kann und die dann zur Antwort springen - naja, im Prinzip können die irgendwohin springen, wichtig ist, daß es Links sind - sonst macht Netscape 4 etwas mehr Probleme später.

Zweite Aufgabe: Die Antworten müssen alle in <DIV> gepackt werden. Gestalte einen solchen Layer nach deinen Wünschen (also evtl. mit Tabelle oder Rahmen drumrum). Erst jetzt kommt CSS und Javascript zum Einsatz: Die Layer werden alle absolut positioniert (ausprobieren, welche Stelle "passend" zur Frage ist), und die Links mit den Fragen kriegen alle ein "onclick"-Event zugewiesen, welches eine Funktion aufruft, die den passenden Layer anzeigt. Wichtig am Ende von "onclick": "return false", um zu verhindern, daß der href-Link ausgeführt wird.

Beispiel: <a href="#frage1" onclick="showlayer('frage1');return false;">Wie lautet denn die Antwort auf Frage 1?</a>

Aufgabe 2a: Die Layer müssen in irgendeiner Weise auch wieder verschwinden! Möglich wäre, im Layer selbst ein "onmouseout" zu platzieren, dabei muß aber ZWINGEND(!!!) sichergestellt sein, daß der Layer auch im Bereich der Maus auftaucht. Außerdem mußt du für Netscape 4 dem DIV manuell einen Eventhandler definieren (einfach im DIV "onmouseout" schreiben funktioniert NICHT!)

Alternativ bietest du bei der Antwort einen Link "zurück zur Frage" an, der ebenfalls onClick den Layer wieder schließt - Vorgehensweise dafür wie bei der Frage.

Dritte Aufgabe: Wenn dir das simple Anzeigen nicht gefällt, schreibe eine bessere Javascript-Funktion, die toller animiert.

Bevor ich mir nun die Arbeit mache, das Ganze neu zu programmieren oder das MS-Skript zu modifizieren hier also erstmal meine Frage, ob es bereits ein fertiges Skript mit den gewünschten Eigenschaften gibt.

Fertige Sachen haben immer den Nachteil, daß sie nie so richtig passen. Abgesehen davon sind sie meist nicht abwärtskompatibel, und noch darüber hinaus nicht mal kompatibel mit allen modernen Browsern.

- Sven Rautenberg