Thema: Spoiler-Funktion in Dokumente einbauen

[Gummibär]

Ich brauche ein Programm, das die "Spoiler"-Funktion dieses Forums leicht in Dokumente (z.B. HTML, aber es ginge auch PHP usw.) einfügen kann.

Klicke auf "Details":

(Klicke zum Anzeigen/Verstecken)

Dies ist die Spoiler-Funktion: Text ein- und ausblenden per Klick.

Also im Prinzip möchte ich ein Textverarbeitungsprogramm / Webseitenerstellungsprogramm, bei dem man diese Funktion hier aus dem Forum nutzen kann, um ein längeres Dokument zu schreiben. (Naja, es sollte nicht unbedingt "Spoiler" heißen, sondern besser beliebig beschriftet werden können)


Idealerweise sollte es möglich sein, dass jemand, der das Dokument liest, die Spoiler sowohl einzeln ein- und ausblenden kann, als auch alle Spoiler gleichzeitig ein- und ausblenden kann. Dass man als Spieler also alle Spoiler ausblenden kann und dann nur die "ungefährlichen" aufklappt. Und als Spielleiter direkt alle Spoiler aufklappt, oder auch nur alle Spoiler zu der Region, in der der Kampagne spielt. Das Einbinden dieser Zusatzfunktion darf auch mit mäßigem Aufwand verbunden sein, das einfügen eines einzelnen Spoilers sollte aber sehr einfach sein, da ich sehr, sehr, sehr viele Spoiler verwenden möchte.


Ich besitze Kenntnisse in HTML (und Java, aber nicht zur Webseitenerstellung) und sehr geringe Kenntnisse in PHP und XML.


Kann mir da bitte jemand helfen? Ein kostenloses Programm wäre natürlich vorteilhaft.

[oliof]

Da brauchst du ein bißchen Javascript und die Möglichkeit einem Dom-Object die style-Definition "display: none" anzuhexen. Das solltest Du hier im Quellcode doch nachschauen können.

[Gummibär]

Danke, das hilft mir schon mal weiter!

Ich habe mal wieder zu kompliziert gedacht und wollte den Text in eine andere Datei auslagern und diese dann da rein laden, was ohne Tool viel Aufwand macht.

Ich habe keine Erfahrung mit Javascript, wenn ich den folgenden Abschnitt (hier aus der Seite kopiert und nur durch Zeilenumbrüche ergänzt) einfach per Copy&Paste übernehme, kann ich dann beliebig viele Spoiler erzeugen?

Code: [Auswählen]

<div class="spoiler"><div class="spoilerheader">

<a href="javascript:void(0)" onClick="n = this.parentNode.parentNode.lastChild; if(n.style.display == 'none') { n.style.display = 'block'; } else { n.style.display = 'none'; } return false;">Spoiler: &quot;Details&quot;</a>

(click to show/hide)

</div>
<div class="spoilerbody" style="display: none">Dies ist die Spoiler-Funktion: Text ein- und ausblenden per Klick.</div></div>
Und wie müsste man einen Link gestalten, dass man mit ihm alle Spoiler einer bestimmten Klasse auf "angezeigt" bzw. "versteckt" setzen kann?


Und kann mir jemand einen kostenlosen, Javascript-fähigen HTML-Editor empfehlen? Ich habe seinerzeit Notepad benutzt, aber das muss ja auch komfortabler gehen...
Ist es möglich, dass man die Spoiler auch im Bearbeitungsmodus ein- und ausblenden kann?


Damit hier keine Doppelarbeit gemacht wird (ich hätte nie gedacht, dass mir da so schnell geholfen werden kann), weise ich darauf hin, dass ich die Frage auch in einem anderen Forum gestellt habe.

[kirilow]

Und wie müsste man einen Link gestalten, dass man mit ihm alle Spoiler einer bestimmten Klasse auf "angezeigt" bzw. "versteckt" setzen kann?

so z. B.

Code: [Auswählen]

        <script type="text/javascript">

            function showAll(){
                var divs = document.getElementsByTagName("div");
                for(var i = 0; i < divs.length; i++){
                    if(divs[i].className == 'spoilerbody'){
                        divs[i].style.display = 'block'
                    }
                }
            }
            function hideAll(){
                var divs = document.getElementsByTagName("div");
                for(var i = 0; i < divs.length; i++){
                    if(divs[i].className == 'spoilerbody'){
                        divs[i].style.display = 'none'
                    }
                }
            }
        </script>
        <a href="javascript:void(0)" onClick="showAll()">Alle Einblenden</a><br>
        <a href="javascript:void(0)" onClick="hideAll()">Alle Ausblenden</a>
        <div class="spoiler"><div class="spoilerheader">

                <a href="javascript:void(0)" onClick="n = this.parentNode.parentNode.lastChild; if(n.style.display == 'none') { n.style.display = 'block'; } else { n.style.display = 'none'; } return false;">Spoiler: &quot;Details&quot;</a>

                (click to show/hide)

            </div>
        <div class="spoilerbody" style="display: none">Dies ist die Spoiler-Funktion: Text ein- und ausblenden per Klick.</div></div>
        <div class="spoiler"><div class="spoilerheader">

                <a href="javascript:void(0)" onClick="n = this.parentNode.parentNode.lastChild; if(n.style.display == 'none') { n.style.display = 'block'; } else { n.style.display = 'none'; } return false;">Spoiler: &quot;Details&quot;</a>

                (click to show/hide)

            </div>
        <div class="spoilerbody" style="display: none">Dies ist die Spoiler-Funktion: Text ein- und ausblenden per Klick.</div></div>
        <div class="spoiler"><div class="spoilerheader">

                <a href="javascript:void(0)" onClick="n = this.parentNode.parentNode.lastChild; if(n.style.display == 'none') { n.style.display = 'block'; } else { n.style.display = 'none'; } return false;">Spoiler: &quot;Details&quot;</a>

                (click to show/hide)

            </div>
        <div class="spoilerbody" style="display: none">Dies ist die Spoiler-Funktion: Text ein- und ausblenden per Klick.</div></div>
        <div class="spoiler"><div class="spoilerheader">

                <a href="javascript:void(0)" onClick="n = this.parentNode.parentNode.lastChild; if(n.style.display == 'none') { n.style.display = 'block'; } else { n.style.display = 'none'; } return false;">Spoiler: &quot;Details&quot;</a>

                (click to show/hide)

            </div>
        <div class="spoilerbody" style="display: none">Dies ist die Spoiler-Funktion: Text ein- und ausblenden per Klick.</div></div>

Schöner geht sowas aber mit z. B. jquery, aber das hier reicht für das Gewünschte vermutlich aus.

Grüße
kirilow

[Gummibär]

Danke für die Hilfe, ich habe jetzt die Lösung!

Code: [Auswählen]

<script type="text/javascript">

            function showAll(){
                var divs = document.getElementsByTagName("div");
                for(var i = 0; i < divs.length; i++){
                    if(divs[i].className == 'meisterinfo' || divs[i].className == 'optionalregel'){
                        divs[i].style.display = 'block'
                    }
                }
            }
            function hideAll(){
                var divs = document.getElementsByTagName("div");
                for(var i = 0; i < divs.length; i++){
                    if(divs[i].className == 'meisterinfo' || divs[i].className == 'optionalregel'){
                        divs[i].style.display = 'none'
                    }
                }
            }
            function showAllOptionalregel(){
                var divs = document.getElementsByTagName("div");
                for(var i = 0; i < divs.length; i++){
                    if(divs[i].className == 'optionalregel'){
                        divs[i].style.display = 'block'
                    }
                }
            }
            function hideAllOptionalregel(){
                var divs = document.getElementsByTagName("div");
                for(var i = 0; i < divs.length; i++){
                    if(divs[i].className == 'optionalregel'){
                        divs[i].style.display = 'none'
                    }
                }
            }
            function showAllMeisterinfo(){
                var divs = document.getElementsByTagName("div");
                for(var i = 0; i < divs.length; i++){
                    if(divs[i].className == 'meisterinfo'){
                        divs[i].style.display = 'block'
                    }
                }
            }
            function hideAllMeisterinfo(){
                var divs = document.getElementsByTagName("div");
                for(var i = 0; i < divs.length; i++){
                    if(divs[i].className == 'meisterinfo'){
                        divs[i].style.display = 'none'
                    }
                }
            }
        </script>
        <a href="javascript:void(0)" onClick="showAll()">Alle Einblenden</a><br>
<br>
        <a href="javascript:void(0)" onClick="hideAll()">Alle Ausblenden</a><br>
<br>
        <a href="javascript:void(0)" onClick="showAllOptionalregel()">Alle Optionalregeln Einblenden</a><br>
<br>
        <a href="javascript:void(0)" onClick="hideAllOptionalregel()">Alle Optionalregeln Ausblenden</a><br>
<br>
        <a href="javascript:void(0)" onClick="showAllMeisterinfo()">Alle Meisterinformationen Einblenden</a><br>
<br>
        <a href="javascript:void(0)" onClick="hideAllMeisterinfo()">Alle Meisterinformationen Ausblenden</a><br>
<br>
        <div class="spoiler"><div class="spoilerheader">

                <a href="javascript:void(0)" onClick="n = this.parentNode.parentNode.lastChild; if(n.style.display == 'none') { n.style.display = 'block'; } else { n.style.display = 'none'; } return false;">Optionalregel: &quot; Kampf &quot;</a>

                (Zum Ein-/Ausblenden klicken.)

            </div>
        <div class="optionalregel" style="display: none">Dies ist die Spoiler-Funktion: Text ein- und ausblenden per Klick.</div></div>



        <div class="spoiler"><div class="spoilerheader">

                <a href="javascript:void(0)" onClick="n = this.parentNode.parentNode.lastChild; if(n.style.display == 'none') { n.style.display = 'block'; } else { n.style.display = 'none'; } return false;">Optionalregel: &quot; Magie &quot;</a>

                (click to show/hide)

            </div>
        <div class="optionalregel" style="display: none">Dies ist die Spoiler-Funktion: Text ein- und ausblenden per Klick.</div></div>
        <div class="spoiler"><div class="spoilerheader">

                <a href="javascript:void(0)" onClick="n = this.parentNode.parentNode.lastChild; if(n.style.display == 'none') { n.style.display = 'block'; } else { n.style.display = 'none'; } return false;">Meisterinformation: &quot; Norden &quot;</a>

                (click to show/hide)

            </div>
        <div class="meisterinfo" style="display: none">Dies ist die Spoiler-Funktion: Text ein- und ausblenden per Klick.</div></div>
        <div class="spoiler"><div class="spoilerheader">

                <a href="javascript:void(0)" onClick="n = this.parentNode.parentNode.lastChild; if(n.style.display == 'none') { n.style.display = 'block'; } else { n.style.display = 'none'; } return false;">Meisterinformation: &quot; Süden &quot;</a>

                (click to show/hide)

            </div>
        <div class="meisterinfo" style="display: none">Dies ist die Spoiler-Funktion: Text ein- und ausblenden per Klick.</div></div>
Die Spoiler müssen dann aber alle in der gleichen Datei liegen, oder? Wäre es ohne Änderung zumindest möglich, per Frame oder PHP eine weitere Datei einzubinden, auf die das Ein-/Ausblenden auch wirkt?




Wäre danach nur noch die Frage offen, ob es einen HTML-Editor gibt, bei dem man diese Funktion auf einen Button legen kann, so dass der komplette Code für einen Spoiler per Button eingefügt wird. Aber das wäre nur noch das Sahnehäubchen.

[kirilow]

Die Spoiler müssen dann aber alle in der gleichen Datei liegen, oder? Wäre es ohne Änderung zumindest möglich, per Frame oder PHP eine weitere Datei einzubinden, auf die das Ein-/Ausblenden auch wirkt?

Nein, so ohne weiteres ginge das nicht. Um diesen Effekt zu erreichen müsstest Du serverseitig auch was machen. Es böte sich an, dafür einen cookie zu setzen und dann nachfolgende Seiten gleich passend zu initialisisieren.

Wäre danach nur noch die Frage offen, ob es einen HTML-Editor gibt, bei dem man diese Funktion auf einen Button legen kann, so dass der komplette Code für einen Spoiler per Button eingefügt wird. Aber das wäre nur noch das Sahnehäubchen.

Sowas gibt es sicherlich, ich kenne mich aber mit html-Editoren nicht aus. Vielleicht solltest Du dafür einfach ein neues Thema aufmachen?

Grüße
kirilow

[oliof]

Das ginge mit jedem skriptbaren Editor, ist aber eine sehr generische Frage.

[Arbo]

Mal ganz blöde Frage: Ließen sich die "Spoiler" nicht auch in Endnoten umwandeln? Diese umgewandelten dann einfach "nur" verlinken (zur jeweiligen Stelle) und dann dürfte es doch auch gehen, oder?

Arbo

[Gummibär]

Ich möchte gerne (meine eigenen) Rollenspielregeln aufbereiten, so dass man die gewünschten Arten von Informationen lesen kann, ohne dass man mit ungewünschten Informationen zugespammt wird.

Es gibt zum einen Regelstufen, so dass man, um die Grundregeln zu lernen, erstmal nur die Basisregeln einblendet. Wenn man allgemein - oder in einem Bereich - detailliertere Regeln verwenden möchte, kann man diese einblenden.

Außerdem sollen weiterführende Informationen zu den Regeln angeboten werden: Welchen Zweck hat diese Regel, auf welchen Prinzipien beruht sie. Diese Informationen sind nicht nötig, um das Spiel zu spielen, jedoch evtl. sinnvoll, wenn man den Zweck nicht sofort versteht, wenn man sich überlegt, ob man die Regel verwenden möchte oder wenn man über die Regel diskutieren und sie weiterentwickeln möchte.

Das ganze sieht momentan so aus:

http://home.arcor.de/ste.schuetz/regeln.htm

Für weitere Tipps wäre ich sehr dankbar!

Das System soll am Ende recht komplexe Regeln anbieten, für die Leute, die das so wünschen. Wer das nicht mag, soll aber darauf verzichten können. Um beide Zielgruppen anzusprechen, ist es wichtig, dass man die komplexeren Regeln eines bestimmten Gebietes (z.B. Steigern) direkt lesen kann, aber auch, dass man alle komplexeren Regeln ausblenden kann und nicht gleich "erschlagen" wird, sonst legt man das System ja gleich weg.

Bei DSA 4 ist das meiner Meinung nach nicht gelungen, die Regeln sind extrem kompliziert, man kann viele Regeln aber nicht weglassen ohne negative Konsequenzen, das System ist unübersichtlich und es wird oft nicht klar, warum eine Regel so ist, wie sie ist.




Ein Fehler ist noch drin:
Ich möchte gerne per CSS einstellen, welche Bereiche standardmäßig ein- und ausgeblendet sind. Wenn ich dann etwas ausblende, muss ich 2x klicken, weil der Wert im Dokument zuerst auf "display: block" gesetzt wird, obwohl das schon im CSS drin steht und anschließend auf "display: none".




@ Cpt. Arbo Enterhaken

Für welche Unterpunkte würdest du denn Endnoten bevorzugen und für welche nicht? Und werden die in einem sehr langen Dokument nicht unbrauchbar?