HTML Spoiler Code wie in Foren

Madman1209 · 21. August 2011

Hi,

was bedeutet

ich bekomm da iwie nichts hin

das genau?

Das was du jetzt direct machst packst du in eine Methode und rufst die auf. Klappt das?

VG,
Mad

kl1max · 21. August 2011

ich hab mich da mal versucht einzuarbeiten.. also in die methodengeschichte...
aber das führte zu nichts...

die Lösung war jetzt allerdings doch leichter als gedacht, hier der code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<link rel="stylesheet" type="text/css" href="spoiler.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="effekte.js"></script>  
<head>
<title>SPOILER</title>

<body>
<div class="spoiler-forum spoiler-hidden">
<a id="verstecken" href="#">
<strong>Spoiler!</strong>
</a>
<div  style="display:none" id="versteckt">Hier ist ein versteckter Text</div>
</div>



</body>
</html>

Trotzdem Vielen Dank für deine ganzen Bemühungen!

MfG & schönen Sonntag noch,
Moritz

sverebom · 22. August 2011

Muss es denn eine Button-Klick sein? Ansonsten kannst du den Spoiler-Text mittels CSS einfach bei Mouse-Over/Hover einblenden.

Code:

<p class="spoilerContainer"><span class="spoilerTitle">Dies ist ein Spoiler</span><span class="spoilerContent">blah blah Bruce Willis ist ein Geist blah blah</span></p>

Solange die Maus nicht auf dem Objekt ruht, blendest du span.spoilerTitle ein und span.spoilerContent aus, und sobald die Maus über das Objekt bewegt wirst, tauschst du die beiden Objekte.

Code:

p.spoilerContainer span.spoilerTitle { display: inline-block }
p.spoilerContainer span.spoilerContent { display: none }

p:hover.spoilerContainer span.spoilerTitle { display: none }
p:hover.spoilerContainer span.spoilerContent { display: inline-block }

Dann arrangierst du die Elemente noch ein wenig mit CSS und fertig dein Spoiler-Text, ganz ohne JavaScript. Der Nachteil ist, dass man das Ganze mit JaveScript ein wenig hübscher machen mit einer netten kleinen Animation usw.

kl1max · 23. August 2011

mhm, sollte aber schon ein click event sein.
da ca 15 Spoiler untereinander auf die seite kommen. & wenn man da drüberfährt und alle versuchen aufzugehen, würde das die performance einiger browser ziemlich in die knie zwingen!

aber wie gesagt, hat jetzt alles geklappt siehe hier:
sprengkommandodj.de/work.html

Gruß & Danke an alle!

Madman1209 · 23. August 2011

Hi,

sieht gut aus! Bravo! So soll's sein

VG,
Mad

savuti · 23. August 2011

kl1max schrieb:
da ca 15 Spoiler untereinander auf die seite kommen. & wenn man da drüberfährt und alle versuchen aufzugehen, würde das die performance einiger browser ziemlich in die knie zwingen!

Schau dir mal den Accordion Effekt mit JQuery an. Ich glaube das passt besser zu deinem Vorhaben.

Hier ein Beispiel: http://jqueryui.com/demos/accordion/

Oder noch einfacher: http://jquery.bassistance.de/accordion/demo/

kl1max · 23. August 2011

Danke Savuti, aber mein Problem ist bereits gelöst!

& Danke Madman für Hilfe & Lob!

Suche

HTML Spoiler Code wie in Foren

Madman1209

Fleet Admiral

kl1max

Lieutenant

sverebom

Vice Admiral

kl1max

Lieutenant

Madman1209

Fleet Admiral

savuti

Lt. Commander

kl1max

Lieutenant

Ähnliche Themen