Medien & Phantastik > Multimedia - Software & Betriebsysteme
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: ---<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: "Details"</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>
--- Ende Code ---
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:
--- Zitat von: Gummibär am 21.11.2009 | 02:18 ---Und wie müsste man einen Link gestalten, dass man mit ihm alle Spoiler einer bestimmten Klasse auf "angezeigt" bzw. "versteckt" setzen kann?
--- Ende Zitat ---
so z. B.
--- Code: --- <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: "Details"</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: "Details"</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: "Details"</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: "Details"</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>
--- Ende Code ---
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: --- <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: " Kampf "</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: " Magie "</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: " Norden "</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: " Süden "</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>
--- Ende Code ---
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.
Navigation
[0] Themen-Index
[#] Nächste Seite
Zur normalen Ansicht wechseln