Hallo.
Habe ein Problem mit dem Spoiler-Button und den "Auflistungszeichen" <li> + </li>.

In meinem Forum habe ich diese Zeichen (Auflistungspunkte) in den Forum-Code umgesetzt.

Werden diese Auflistungszeichen im Spoiler verwendet, verschwindet der Abschluß-Button nach dem Anklicken, auch wenn der Spoiler wieder geöffnet wird.
Wird die Seite neu aufgerufen, ist er wieder da.

Weist Du hier weiter?

Gruß
Wolfgang

Also ich habe das mal mit der HTML-Variante in meinem Test-Thread probiert.

Hier auch mein Code:

Ich muss mich gleich in meinem ersten Beitrag mal bei Dir / Euch bedanken. Habe diesen Spoiler soeben bei mir eingebaut und der ist ja sowas von Klasse.

Mit einem Spoiler kann ein ausgewählter Text-Abschnitt ausgeblendet werden.
Bei dieser neuen Version steht ein weiterer Ausblenden-Button am Ende.
So können lange Texte, ohne nach oben zu scrollen, geschlossen werden.

JavaScript muss aktiviert sein, damit der Button funktioniert.
(Erklärung zum Spoiler-Button)


Zuerst muss im Template Element "Obere Leiste" folgender Quelltext zwischen den Head-Tags eingefügt werden:

<script language="javascript" type="text/javascript">
// Spoiler Klapp-Funktion
function spoiler_on(me) {
	if (me.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display != 'block') {
		me.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display = 'block';
		me.innerText = '';
		me.value = 'Hide';
	}
	else {
		me.parentNode.parentNode.getElementsByTagName('span')[1].getElementsByTagName('span')[0].style.display = 'none';
		me.value = 'Show';
	}
}
function spoiler_off(me) {
	me.parentNode.style.display = 'none';
	me.parentNode.parentNode.parentNode.getElementsByTagName('span')[0].getElementsByTagName('input')[0].value = 'Show';
}
</script>

<style type="text/css">
/* Spoiler */
.spoiler_button {
	width:50px;font-size:10px;margin:0px;padding:0px;
}
.spoiler_inhalt {
	display:none;border:double;width:95%;padding:10px;overflow:auto;
}
.spoiler_hide {
	font-size:10px;margin:0px;padding:0px;
}
</style>

[spoiler]

<span><span><input name="button" type="button" class="spoiler_button" onClick="spoiler_on(this);" value="Spoiler" onmouseover="this.style.cursor='pointer';"></span><span><span class="spoiler_inhalt">

[/spoiler]

<br /><br /><input name="button" type="button" class="spoiler_hide" onClick="spoiler_off(this);" value="ausblenden" onmouseover="this.style.cursor='pointer';"></span></span></span>

<A HREF="javascript:insert('[spoiler]','[/spoiler]')"><img src="http://www.bilder-hochladen.net/files/585t-5.png" title="[spoiler] versteckter Text [/spoiler]" border=0 width="48" height="17"></A>

Hallo Florian,
läßt sich die Funktion des Spoilers so umdrehen, das er am Anfang geöffnet ist?
Man könnte Ihn dann z.B. zum Ausblenden von Textstellen verwenden.

Läßt sich der Zustand des Spoilers auch über ein Cookie speichern?

Währe super, wenn Du hier eine Lösung siehst.

Bis dann
Wolfgang

Hallo Wolfgang,
um welchen Spoiler dreht es sich nun überhaupt?
Um einen der hier entwickelten (mit/ohne Ausblendebutton), oder den aktuellen von HPM?

Standardmäßig einblenden könnte gehen.
Ändere einfach mal

style="display:none;"
 

beim ausgeblendeten Element in

style="display:block;"
oder
style="display:inline-block;"
 

Dann sollte es beim Laden der Seite wohl angezeigt werden.


Die Sache mit dem Cookie sehe ich problematisch.
Die Spoiler haben jeweils keine eigene und konstante ID.
Die Nummer des Spoilers nach dem Quellcode kann sich auch durch neue oder gelöschte Beiträge verschieben.
Dann würden die falschen Spoiler ein-/ausgeblendet.

Hallo Florian,
besten Dank für die Anwort.
Mit den "Div's" im JavaScript funktioniert es. Leider verursachen sie immer einen Zeilenumbruch.

+ Ich habe mir vorgestell, dass der Anfangsbuchstabe den Ausblendeffekt auslöst.
+ Der ausgeblendete Text sollte ein Pluszeichen hinterlassen
+ Die Ausblendung sollte auch mitten im Text möglich sein
+ Die Einstellung sollte gespeichert werden

Hier das Script das nicht richtig funktioniert will:

- Der Text wird umgebrochen
- Ein Text zwischen den Ausblendungen wird ans Ende gesetzt

Hallo Wolfgang,
ich schätze, dass ich etwas in die Richtung habe.

Also erstmal, falls ich das nun richtig verstanden habe, das finde ich eine super Idee.
Evtl. kann man dies auch in umgekehrter Variante irgendwie einsetzen, dass man erst Textteile aufklappen muss, wenn man sie will, eine Art Mini-Spoiler eben.

Ich habe inzwischen auch ein kleines Beispiel hier im Forum eingebaut, um die Funktion einmal zu demonstrieren.
Das Skript und der Style habe ich ausgelagert, um die Länge des Forencodes in der Administration nicht zu lang für das Textfeld werden zu lassen, außerdem kann ich so das Aussehen jederzeit ohne Forencodes anzufassen verändern.


Du benötigst zum Einbau einen "Erweiterten Forencode":

[spoil=
...
+{{text}}]
 

<span><span onclick="spoiler_text(this);" onmouseover="this.style.cursor='pointer';" title="Zum Ausblenden anklicken" class="spoiler_text_link">
...
<font></font></span><span class="spoiler_text_content" style="display:inline;">{{text}}</span></span>
 

In einem Beitrag kannst du dies nun folgendermaßen einbinden (Beachte das kleine "+" als Trennzeichen, optional auch ein anderes Zeichen...):

[spoil=ANFANGSBUCHSTABE+AUSGEBLENDETER_TEXT]
 
 [spoil=B+eispiel hier im Forum...]
 

Aber beachte:
Das "+" als Trennzeichen im Forencode ist nur geschmackssache und sagt, wie man den Foren-Code schreiben muss.
Blendet man den Text aus, erscheint auf jeden Fall ein "+" hinter dem Anfangsbuchstaben.
Ändern kannst du die Einblendung hinter dem Buchstaben in folgender Skript-Zeile:

me.getElementsByTagName('font')[0].innerHTML = '+';
 

Setze z.B. den HTML-Code eines kleinen Bildchens da ein.
Ich habe es kurz ausprobiert, fand aber ein Bild als zu "globig" und störend, ein "+"-Zeichen ist angenehmer anzusehen. (Geschmackssache )



Diese Variante erfüllt nun folgende Bedingungen:
+ Anfangsbuchstabe blendet den Text aus.
+ Ein "+"-Zeichen wird dem Buchstaben angehängt.
+ Kein Umbruch mitten im Text (HTML-Codes müssen dazu in einer Zeile direkt aneinander stehen bleiben! - doof, ist aber so)
+ Textstellen innerhalb des Absatzes können nahtlos mittendrin ausgeblendet werden.

- Einstellung wird nicht gespeichert.


Der Speicherung stehe ich nach wie vor skeptisch gegenüber.
Manuell IDs zu vergeben finde ich zu aufwendig und auch zu fehleranfällig.
Autom. können sie auch nicht vergeben werden, ergäben auch nur Probleme bei neuen oder gelöschten Beiträgen.
Man müsste sie fast an deren Inhalt unterscheiden.
Das Cookie würde aber viel zu stark aufgebläht.
Und bei jedem Seitenstart zu prüfen, würde das Forum nur unnötig ausbremsen.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Spoiler</title>
 
<script language="JavaScript" type="text/javascript">
function spoiler_text(me) {
	var spoiler_obj = me.parentNode.getElementsByTagName('span')[1];
	if (spoiler_obj.style.display != 'inline') {
		spoiler_obj.style.display = 'inline';
		me.getElementsByTagName('font')[0].innerHTML = '';
		me.title = 'Zum Ausblenden anklicken';
	}
	else {
		spoiler_obj.style.display = 'none';
		me.getElementsByTagName('font')[0].innerHTML = '+';
		me.title = 'Zum Einblenden anklicken';
	}
}
</script>
<style type="text/css">
.spoiler_text_link {
	color:#ff0000;
	font-weight:bolder;
	border-bottom:1px dotted red;
}
.spoiler_text_content {
	border-bottom:1px solid red;
}
</style>
 
</head>
 
<body>
 
Dies ist ein
<span><span onclick="spoiler_text(this);" onmouseover="this.style.cursor='pointer';" title="Zum Ausblenden anklicken" class="spoiler_text_link">T<font></font></span><span class="spoiler_text_content" style="display:inline;">est-Text, der ausgeblendet werden kann.</span></span>
Weitere Text-Teile dazwischen
<span><span onclick="spoiler_text(this);" onmouseover="this.style.cursor='pointer';" title="Zum Ausblenden anklicken" class="spoiler_text_link">s<font></font></span><span class="spoiler_text_content" style="display:inline;">ind auch kein Problem,</span></span>
genauso wie danach.
 

</body>
</html>
 

Hier habe ich nun noch einen Quellcode, bei dem der ausblendbare Text nur beim Hovern unterstrichen wird:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Spoiler</title>
 
<script language="JavaScript" type="text/javascript">
function spoiler_text(obj) {
	var spoiler_obj = obj.parentNode.getElementsByTagName('span')[1];
	if (spoiler_obj.style.display != 'inline') {
		spoiler_obj.style.display = 'inline';
		obj.getElementsByTagName('font')[0].innerHTML = '';
		obj.title = 'Zum Ausblenden anklicken';
	}
	else {
		spoiler_obj.style.display = 'none';
		obj.getElementsByTagName('font')[0].innerHTML = '+';
		obj.title = 'Zum Einblenden anklicken';
	}
}
function spoiler_text_mouseover(obj) {
	obj.style.cursor = 'pointer';
	obj.parentNode.getElementsByTagName('span')[1].style.borderBottom =  '1px solid red';
		
}
function spoiler_text_mouseout(obj) {
	obj.parentNode.getElementsByTagName('span')[1].style.borderBottom =  'inherit';
}
</script>
<style type="text/css">
.spoiler_text_link {
	color:#ff0000;
	font-weight:bolder;
	border-bottom:1px dotted red;
}
.spoiler_text_content:hover {
	border-bottom:1px solid red !important;
}
</style>
 
</head>
 
<body>
 
Dies ist ein
<span><span onclick="spoiler_text(this);" onmouseover="spoiler_text_mouseover(this);" onmouseout="spoiler_text_mouseout(this);" title="Zum Ausblenden anklicken" class="spoiler_text_link">T<font></font></span><span class="spoiler_text_content" style="display:inline;">est-Text, der ausgeblendet werden kann.</span></span>
Weitere Text-Teile dazwischen
<span><span onclick="spoiler_text(this);" onmouseover="spoiler_text_mouseover(this);" onmouseout="spoiler_text_mouseout(this);" title="Zum Ausblenden anklicken" class="spoiler_text_link">s<font></font></span><span class="spoiler_text_content" style="display:inline;">ind auch kein Problem,</span></span>
genauso wie danach.
 
 
</body>
</html>
 

Hallo Florian,
einfach Klasse, was so möglich ist!!!

Viele Grüße und besten Dank für Deine umfangreiche Hilfe
Wolfgang

Hier gibt es nun nochmal eine leicht überarbeitete Version.
Sie ist nun nicht mehr unbedingt von einem Doctype abhängig.

Außerdem wurde ein kleiner Bug behoben, durch den im IE ohne Doctype-Angabe der Text beim Hovern des Anfangsbuchstabens die Unterstreichung bestehen blieb und evtl. aber auch nicht beim Hovern des Textes gesetzt wurde.
Danke dafür auch noch an Wolfgang, der dies entdeckt und auch gleich behoben hat.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Spoiler</title>
 
<script language="JavaScript" type="text/javascript">
function spoiler_text(obj) {
	var spoiler_obj = obj.parentNode.getElementsByTagName('span')[1];
	if (spoiler_obj.style.display != 'inline') {
		spoiler_obj.style.display = 'inline';
		obj.getElementsByTagName('font')[0].innerHTML = '';
		obj.title = 'Zum Ausblenden anklicken';
	}
	else {
		spoiler_obj.style.display = 'none';
		obj.getElementsByTagName('font')[0].innerHTML = '+';
		obj.title = 'Zum Einblenden anklicken';
	}
}
function spoiler_text_mouseover(obj) {
	obj.style.cursor = 'pointer';
	obj.parentNode.getElementsByTagName('span')[1].style.borderBottom =  '1px solid red';	
}
function spoiler_text_mouseout(obj) {
	obj.parentNode.getElementsByTagName('span')[1].style.borderBottom =  'inherit';
}
</script>
<style type="text/css">
.spoiler_text_link {
	color:#ff0000;
	font-weight:bolder;
	border-bottom:1px dotted red;
}
</style>
 
</head>
 
<body>
 
 
Dies ist ein
<span><span onclick="spoiler_text(this);" onmouseover="spoiler_text_mouseover(this);" onmouseout="spoiler_text_mouseout(this);" class="spoiler_text_link" title="Zum Ausblenden anklicken!">T<font></font></span><span onmouseover="spoiler_text_mouseover(this);" onmouseout="spoiler_text_mouseout(this);" class="spoiler_text_content" style="display:inline;" title="Zum Ausblenden markierten Anfangsbuchstaben klicken!">est-Text, der ausgeblendet werden kann.</span></span>
Weitere Text-Teile dazwischen
<span><span onclick="spoiler_text(this);" onmouseover="spoiler_text_mouseover(this);" onmouseout="spoiler_text_mouseout(this);" class="spoiler_text_link" title="Zum Ausblenden anklicken!">s<font></font></span><span onmouseover="spoiler_text_mouseover(this);" onmouseout="spoiler_text_mouseout(this);" class="spoiler_text_content" style="display:inline;" title="Zum Ausblenden markierten Anfangsbuchstaben klicken!">ind auch kein Problem,</span></span>
genauso wie danach.
 
 
</body>
</html>
 

Die Pseudoklasse ":hover" wird nun nicht mehr unbedingt benötigt.


Zum Schluss noch ein kleines Beispiel zum Quellcode.