Homepage·modules
Offizielles Support Forum von Xobor.de & Homepage·modules.de
Powered by Forum-Software

Seite 1 von 4 « vorherige Seite 1 2 3 4 nächste Seite »

#1

Spoiler-Button

in Templates & Sprachen 09.12.2007 18:40
von WolverineX • User | 336 Beiträge
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!

_________________
Florian Zier
http://florian-zier.de.tt
http://florians-forum.de.tt

zuletzt bearbeitet 09.12.2007 19:04 | nach oben scrollen
antwortenantworten

#2

RE: Spoiler-Button

in Templates & Sprachen 10.12.2007 10:05
von sabine99 • User | 658 Beiträge

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
nach oben scrollen
antwortenantworten

#3

RE: Spoiler-Button

in Templates & Sprachen 10.12.2007 14:43
von WolverineX • User | 336 Beiträge
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...

_________________
Florian Zier
http://florian-zier.de.tt
http://florians-forum.de.tt

zuletzt bearbeitet 10.12.2007 14:45 | nach oben scrollen
antwortenantworten

#4

RE: Spoiler-Button

in Templates & Sprachen 13.12.2007 16:50
von Firesword1978 • User | 738 Beiträge
Wo werden die Farbwerte des Textes angegeben. (Vor dem Klick, nach dem Klick) Kann die Stelle nicht finden...


zuletzt bearbeitet 13.12.2007 16:50 | nach oben scrollen
antwortenantworten

#5

RE: Spoiler-Button

in Templates & Sprachen 14.12.2007 16:04
von WolverineX • User | 336 Beiträge

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.

_________________
Florian Zier
http://florian-zier.de.tt
http://florians-forum.de.tt

nach oben scrollen
antwortenantworten

#6

RE: Spoiler-Button

in Templates & Sprachen 22.12.2007 17:23
von Firesword1978 • User | 738 Beiträge

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


nach oben scrollen
antwortenantworten

#7

RE: Spoiler-Button

in Templates & Sprachen 15.01.2008 09:53
von kleenecaro • User | 62 Beiträge


was mache ich falsch ?

Der Code erscheint nicht im eingabefeld :(

Board:91777

nach oben scrollen
antwortenantworten

#8

RE: Spoiler-Button

in Templates & Sprachen 15.01.2008 16:02
von WolverineX • User | 336 Beiträge 

<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!

_________________
Florian Zier
http://florian-zier.de.tt
http://florians-forum.de.tt

nach oben scrollen
antwortenantworten

#9

RE: Spoiler-Button

in Templates & Sprachen 15.01.2008 18:28
von kleenecaro • User | 62 Beiträge


Vielen Dank ,hat super geklappt :)

Board:91777

nach oben scrollen
antwortenantworten

#10

RE: Spoiler-Button

in Templates & Sprachen 15.01.2008 19:57
von wolf.andres • User | 663 Beiträge

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
Homepage

zuletzt bearbeitet 15.01.2008 19:58 | nach oben scrollen
antwortenantworten

#11

RE: Spoiler-Button

in Templates & Sprachen 15.01.2008 20:14
von WolverineX • User | 336 Beiträge
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...

_________________
Florian Zier
http://florian-zier.de.tt
http://florians-forum.de.tt

zuletzt bearbeitet 15.01.2008 20:15 | nach oben scrollen
antwortenantworten

#12

RE: Spoiler-Button

in Templates & Sprachen 16.01.2008 13:47
von wolf.andres • User | 663 Beiträge


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

Gruß
Wolfgang



Forum
Homepage

nach oben scrollen
antwortenantworten

#13

RE: Spoiler-Button

in Templates & Sprachen 22.01.2008 11:17
von slocs • User | 18 Beiträge

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

nach oben scrollen
antwortenantworten

#14

RE: Spoiler-Button

in Templates & Sprachen 22.01.2008 11:28
von Vitalis • Profi | 6.822 Beiträge

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;
}

nach oben scrollen
antwortenantworten

#15

RE: Spoiler-Button

in Templates & Sprachen 22.01.2008 12:13
von slocs • User | 18 Beiträge

geil super danke dir :D

nach oben scrollen
antwortenantworten

Seite 1 von 4 « vorherige Seite 1 2 3 4 nächste Seite »
« Heute Online Liste - neue Stats
Schrift verstellt sich »

Besucher
6 Mitglieder und 25 Gäste sind Online:
PeGo, Ingmar, mario4370, manee, 69magic, Jay-Pi33

Wir begrüßen unser neuestes Mitglied: dream
disconnected Foren Chat Mitglieder Online 6