Sebastian Becker: cross browser FAQ foldout

Hallo,

ich möchte gerne eine Seite mit FAQs erstellen, bei der die Antworten beim Klicken auf die Fragen ausklappen.

Das Ganze habe ich - für den Internet Explorer optimiert - schon bei Microsoft gesehen:http://office.microsoft.com/assistance/2002/articles/acExOfScenariosUsingXML.aspx

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.

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.

Für alle Hinweise wäre ich sehr dankbar.

Grüße,

Sebastian Becker

  1. hallo Sebastian,

    Das Ganze habe ich - für den Internet Explorer optimiert - schon bei Microsoft gesehen:http://office.microsoft.com/assistance/2002/articles/acExOfScenariosUsingXML.aspx

    Mir wird nicht klar, _was_ du da gesehen haben willst. Dort geschieht nichts, was irgendwie ein "Aufklappen" von Antworten wäre, es handelt sich um ganz normale links, wie sie millionenfach auf Webseiten anzutreffen sind.

    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.

    Ohje, das sind ziemlich heftige Ansprüche. Es würde sich wohl noch machen lassen, daß ein Script "in allen Browsern mit DOM-Unterstützung" funktioniert, aber bereits bei der "Abwärtskompatibilität" wirds problematisch. Wie weit "abwärts" solls denn gehen ? Bis zu Netscape 2.0 ?? Oder nur bis IE 3.0 ??

    Und dann: du müßtest schon erläutern, was denn für ein Script "bei dekativiertem Javascript" noch funktionieren soll  -  das kann ja nur etwas sein, was dann eine andere Programmiersprache nutzt. VB-Script etwa ? Das funktioniert selbstverständlich in so ziemlich allen IE-Versionen, keinesfalls aber in allen Netscape-Versionen und/oder älteren Opera-Versionen oder gar mit dem Konquerer oder einem textbasdierten Browser wie LYNX (mit dem auch Javascript selbst nach erheblichen Fummeleien bestenfalls anfallsweise funktioniert)

    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.

    Sowas ist zumindest mir nicht bekannt, aber vielleicht weiß es doch noch jemand anderes.

    Grüße aus Berlin

    Christoph S.

    1. Hallo,

      ... Dort geschieht nichts, was irgendwie ein "Aufklappen" von Antworten wäre, es handelt sich um ganz normale links, wie sie millionenfach auf Webseiten anzutreffen sind.

      Dann hast Du wohl nicht auf die Links geklickt oder Du benutzt einen ganz speziellen Browser ;-) ...

      Es würde sich wohl noch machen lassen, daß ein Script "in allen Browsern mit DOM-Unterstützung" funktioniert, aber bereits bei der "Abwärtskompatibilität" wirds problematisch. Wie weit "abwärts" solls denn gehen ? Bis zu Netscape 2.0 ?? Oder nur bis IE 3.0 ??

      Bei allen Browsern, die vom Skript nicht unterstützt werden und wenn Javascript nicht unterstützt wird, sollen grundsätzlich alle Fragen und Antworten zu sehen sein.

      Und dann: du müßtest schon erläutern, was denn für ein Script "bei dekativiertem Javascript" noch funktionieren soll  -  das kann ja nur etwas sein, was dann eine andere Programmiersprache nutzt. VB-Script etwa ? Das funktioniert selbstverständlich in so ziemlich allen IE-Versionen, keinesfalls aber in allen Netscape-Versionen und/oder älteren Opera-Versionen oder gar mit dem Konquerer oder einem textbasdierten Browser wie LYNX (mit dem auch Javascript selbst nach erheblichen Fummeleien bestenfalls anfallsweise funktioniert)

      s.o. (ich habe nicht geschrieben, daß das Skript bei deaktiviertem Javaskript noch funktionieren soll)

      Grüße,

      Sebastian

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

  3. Huhu Sebastian!

    Schau dir mal http://dynapi.sourceforge.net/dynapi/ an. Das ist eine CrossbrowserAPI die ständig weiterentwickelt wird.

    Gruß Kristallkind :)