Spoiler-Button

Antworten
  • Seite 1 von 4
#1
09.12.2007 18:40 (zuletzt bearbeitet: 09.12.2007 19:04)
avatar  WolverineX
#1 Spoiler-Button
avatar
WolverineX
Mitglied
Halli Hallo,
ich versuche nun schon seit einiger Zeit eine Spoiler-Funktion (wie im Gulliboard) einzubauen.
Dabei klickt man einen Button an und es erscheint der Text, wird er nochmals angeklickt, verschwindet er wieder.

Ich habe schon folgenden Code:

<div>
<div class="pre-spoiler">
<input name="button" type="button" style="width:50px;font-size:10px;margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show';}" value="Spoiler">
</div>

<div>
<div class="spoiler" style="display: none;">versteckter Text</div>
</div>
</div>


Dieser funktioniert soweit in einer normalen HTML-Datei.

Das Problem:
Ich will nicht immer den gesamten Code irgendwo herauskopieren müssen, wenn ich ihn verwenden will. Außerdem wäre es super, wenn alle Mitglieder diese Funktion auch zur Verfügung hätten.
Leider kann ich als Forum-Code nur eine Zeile definieren (was ja noch gehen würde), die allerdings nicht richtig mit JavaScript darin funktioniert. Und direkt in die Symbol-Bar kann ich es auch nicht einbauen.
Wie bekomme ich nun den Code per Button o.ä. eingefügt?


Perfekt wäre es, wenn man einen Foren-Code erstellen könnte, der so: [spoiler][/spoiler] aussieht und dann autom. die Funktion verfügbar macht.

Ich habe auch schon versucht, hinter onclick=... die Funktion von woanders aufzurufen, aber so funktioniert es leider auch nicht.



Hoffe, dass ich mich verständlich ausgedrückt habe und es nicht zu viel Info/Text auf einmal ist. Vielleicht ist hier ja ein "Durchchecker", der so etwas kann...

Vielen Dank für alle Antworten im Voraus!
_________________
http://forum.florian-zier.de
http://friends-of.xobor.de


 Antworten

 Beitrag melden
#2
10.12.2007 10:05
avatar  sabine99
#2 RE: Spoiler-Button
avatar
sabine99
Mitglied

Hallo,

du solltest Skript und Button trennen, dass heißt in den Headerbereich des Forums kommt dein Skript als Funktion

<script type="text/javascript">
function spoil(me) {
if (me.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {
me.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';
me.innerText = '';
me.value = 'Hide';
} else {
me.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
me.value = 'Show';
}}
</script>

und in den Code kommt einmal als [spoiler]

<div><div class="pre-spoiler"><input name="button" type="button" style="width:50px;font-size:10px;margin:0px;padding:0px;" onClick="spoil(this);" value="Spoiler"></div><div><div class="spoiler" style="display: none;">

und als [/spoiler]

</div></div></div>

http://www.f1tippclub.de - http://forum.f1tippclub.de

 Antworten

 Beitrag melden
#3
10.12.2007 14:43 (zuletzt bearbeitet: 10.12.2007 14:45)
avatar  WolverineX
#3 RE: Spoiler-Button
avatar
WolverineX
Mitglied
Tausend Dank!

Da hatte ich ja echt Glück, dass es jemand besser weiß! ;-)

Ich habe schon so etwas onClick="spoil(this);" versucht, leider ohne erfolg. (Da waren auch die Klammern leer)

Ich arbeite mich im Moment nur Stück für Stück an Java bzw. JavaScript, werde aber vorraussichtlich bald etwas effektiver Lernen.


@sabine99: Nochmal Danke für die schnelle und wunderbare Hilfe, nun ist es auch egal, wie viele Spoiler eingebaut werden, da es immer funktioniert!
Vorher ging es nur mit massenhaft Code oder mehrere Buttons öffneten den Inhalt des ersten und so Zeugs...
_________________
http://forum.florian-zier.de
http://friends-of.xobor.de


 Antworten

 Beitrag melden
#4
13.12.2007 16:50 (zuletzt bearbeitet: 13.12.2007 16:50)
avatar  Firesword1978
#4 RE: Spoiler-Button
avatar
Firesword1978
Mitglied
Wo werden die Farbwerte des Textes angegeben. (Vor dem Klick, nach dem Klick) Kann die Stelle nicht finden...



 Antworten

 Beitrag melden
#5
14.12.2007 16:04
avatar  WolverineX
#5 RE: Spoiler-Button
avatar
WolverineX
Mitglied

Was meinst du damit?

Wenn du farbigen Text im Spoiler haben willst, dann kannst du diesen einfach wie immer markieren und über die Symbol-Bar die Farbe auswählen.

_________________
http://forum.florian-zier.de
http://friends-of.xobor.de


 Antworten

 Beitrag melden
#6
22.12.2007 17:23
avatar  Firesword1978
#6 RE: Spoiler-Button
avatar
Firesword1978
Mitglied

Nicht jeder benutzt die Farben des Standart...
aber egal ich verzichte auf die Funktion.



 Antworten

 Beitrag melden
#7
15.01.2008 09:53
avatar  kleenecaro
#7 RE: Spoiler-Button
kl
kleenecaro
Mitglied


was mache ich falsch ?

Der Code erscheint nicht im eingabefeld :(

Board:91777


 Antworten

 Beitrag melden
#8
15.01.2008 16:02
avatar  WolverineX
#8 RE: Spoiler-Button
avatar
WolverineX
Mitglied

<script type="text/javascript">
function spoil(me) {
if (me.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {
me.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';
me.innerText = '';
me.value = 'Hide';
} else {
me.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
me.value = 'Show';
}}
</script>

in den Header.

In den Forencodes diese zwei angeben.
[spoiler]:
<div><div class="pre-spoiler"><input name="button" type="button" style="width:50px;font-size:10px;margin:0px;padding:0px;" onClick="spoil(this);" value="Spoiler"></div><div><div class="spoiler" style="display: none;">

und als [/spoiler]:
</div></div></div>



In der Symbol-Bar Code um [spoiler] [/spoiler] einzufügen eingeben. Fertig!

_________________
http://forum.florian-zier.de
http://friends-of.xobor.de


 Antworten

 Beitrag melden
#9
15.01.2008 18:28
avatar  kleenecaro
#9 RE: Spoiler-Button
kl
kleenecaro
Mitglied


Vielen Dank ,hat super geklappt :)

Board:91777


 Antworten

 Beitrag melden
#10
15.01.2008 19:57 (zuletzt bearbeitet: 15.01.2008 19:58)
avatar  Wolfgang
#10 RE: Spoiler-Button
avatar
Wolfgang
Mitglied

Hallo Sabine99,
bei sehr langen Texten finde ich am Ende einen Button zum Schließen sehr sinnvoll, der aber erst zu sehen sein sollte, wenn der Spoiler geöffnet ist!
Der aber auch wahlweise weggelassen werden kann.
Ich habe es soweit hinbekommen, aber bei mir ist der Schließen-Button immer sichtbar.

Hast Du eine Idee, wie man diesen zusätzlichen Button richtig einbindet?


Danke schon mal im Voraus
Gruß
Wolfgang
Forum für Hilfe, Tricks & Tipps / Foren-Nr.: 104774 / Template: Business (V4) / Browser: Edge





 Antworten

 Beitrag melden
#11
15.01.2008 20:14 (zuletzt bearbeitet: 15.01.2008 20:15)
avatar  WolverineX
#11 RE: Spoiler-Button
avatar
WolverineX
Mitglied
Hat sich evtl. erledigt!

@wolf.andres:
Bitte Einträge im eigenen Forum checken! Habe es denke ich hinbekommen!
Viel Spaß!

Rand und Schriftgröße sollten leicht änderbar sein...
_________________
http://forum.florian-zier.de
http://friends-of.xobor.de


 Antworten

 Beitrag melden
#12
16.01.2008 13:47
avatar  Wolfgang
#12 RE: Spoiler-Button
avatar
Wolfgang
Mitglied


Hallo.
Auch hier nochmal herzlich Dank für Deine tolle Arbeit.
Funktioniert einfach super.

Gruß
Wolfgang

Forum für Hilfe, Tricks & Tipps / Foren-Nr.: 104774 / Template: Business (V4) / Browser: Edge





 Antworten

 Beitrag melden
#13
22.01.2008 11:17
avatar  slocs
#13 RE: Spoiler-Button
sl
slocs
Mitglied

hi

erstmal super idee und danke für die prompte umsetzung :D

aber ich hab noch ne frage *lästigbin*

wie änder ich jetzt den style vom button oder die schriftfarbe?

lg slocs


 Antworten

 Beitrag melden
#14
22.01.2008 11:28
avatar  Vitalis
#14 RE: Spoiler-Button
avatar
Vitalis
Profi

im og Codeabschnitt:

...
<input name="button" type="button" style="color:#000000; width:50px; font-size:10px; margin:0px; padding:0px;" onClick="spoil(this);" value="Spoiler">
...
das Rotmarkierte symbolisiert die Schriftfarbe!

oder besser (mit CSS)
...
<input name="button" type="button" onClick="spoil(this);" value="Spoiler">
...
und in der CSS-Datei: Admin -> Layout -> CSS:
.pre-spoiler input
{
	color:#000000;
	width:50px;
	font-size:10px;
	margin:0px;
	padding:0px;
}


 Antworten

 Beitrag melden
#15
22.01.2008 12:13
avatar  slocs
#15 RE: Spoiler-Button
sl
slocs
Mitglied

geil super danke dir :D


 Antworten

 Beitrag melden
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!