Bitte geben Sie einen Grund für die Verwarnung an
Der Grund erscheint unter dem Beitrag.Bei einer weiteren Verwarnung wird das Mitglied automatisch gesperrt.
Spoiler-Button
#1 Spoiler-Button
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!
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>
#3 RE: Spoiler-Button
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...
#4 RE: Spoiler-Button
#5 RE: Spoiler-Button
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.
#6 RE: Spoiler-Button
#7 RE: Spoiler-Button
was mache ich falsch ?
Der Code erscheint nicht im eingabefeld :(
#8 RE: Spoiler-Button
<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!
#9 RE: Spoiler-Button
Vielen Dank ,hat super geklappt :)
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
#11 RE: Spoiler-Button
@wolf.andres:
Bitte Einträge im eigenen Forum checken! Habe es denke ich hinbekommen!
Viel Spaß!
Rand und Schriftgröße sollten leicht änderbar sein...
Hallo.
Auch hier nochmal herzlich Dank für Deine tolle Arbeit.
Funktioniert einfach super.
Gruß
Wolfgang
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;
}
- Informationen
- Aktuelle News
- Forum Tutorials - Tipps und Anleitungen
- SEO / Werbung fürs Forum
- Verwaltung
- Extras
- Design
- Plugin(system)
- Eure Fragen zu Tutorials
- Forum Support
- Fragen und Antworten
- Pluginsystem
- Plugins
- Templates & Sprachen
- Bugreport
- Verbesserungsvorschläge
- Sponsoren gesucht
- Das neue Xobor Business-Template
- News und Updates
- Bugreport
- Allgemeines Feedback
- Verbesserungsvorschläge
- Sonstiges
- Kaffeeklatsch
- Lob & Kritik
- Verbesserungsvorschläge
- Allgemeine Fragen
- Fehlermeldungen
- Verbesserungsvorschläge Responsive Design
- Bugreport Responsive Design
- Archiv - Alter Betatest
- Responsive Design - Verbesserungsvorschläge
- Responsive Design - Bugreport
- Fragen zum neuen Template
- Neue Administration Beta Test
- Bugreport Neue Administration
- Allgemeines Fragen & Feedback
- Verbesserungsvorschläge zur neuen Administration
- Shoutbox
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!
© 2017 Xobor | Forum-Software