Effektive Hilfe mit Spoilerfunktion

Anregungen und Wünsche für das Board.

Re: Effektive Hilfe mit Spoilerfunktion

Beitragvon CMDR-ZOD » Mo 3. Mai 2010, 23:03

Hab Lust, wenn jedoch erst dieses oder nächstes WE Zeit. Ich meld mich Samstag ob dieses.
:: Fakultät für Informatik :: Abteilung Technische Infrastruktur (ATIS)
Sofwareentwickler

:: Fachschaft
Masterprüfungskommission, Masterauswahlkommission, Vertreter - Konferenz der Fachschaften, ...

:: Z10
Ausschank, Kulturbooking, Homepage, ...
Benutzeravatar
CMDR-ZOD (Philip )
ist engagiert
ist engagiert
 
Beiträge: 68
Registriert: Di 24. Nov 2009, 00:40
Danke gegeben: 12
Danke bekommen: 12 mal in 8 Posts
Auf dem Campus:
:
:
:
:
:

Re: Effektive Hilfe mit Spoilerfunktion

Beitragvon WotanII » Do 6. Mai 2010, 14:14

wenn es zu schwierig sein sollte eigenen BBCode einzubauen, könnte man auch einfach ein Javascriptscript in das HTML-template (o.ä) einbauen.

Das JS-script müsste dann etwa so aussehen:
Code: Alles auswählen
var startTag = "[spoiler]";
var endTag = "[/spoiler]";
ersetzen(document.getElementsByTagName("body")[0], "[spoiler]", "[/spoiler]");

function ersetzen(element, startTag, endTag) {
   for ( var node = element.firstChild, nextnode; node; node = nextnode) {
      nextnode = node.nextSibling; // vor Wandlung festhalten

      if (node.nodeType == 1) {
         //Wenn es Unterknoten gibt: rekursion
         ersetzen(node, startTag, endTag);
      }

      //wenn Textknoten, dann:
      if (node.nodeType == 3) {
         var t = "" + node.nodeValue;
         var start = t.indexOf(startTag);
         var end = t.indexOf(endTag);
         while (start >= 0 && end > start) {
            var before = t.substring(0, start);
            var toSpoil = t.substring(start + startTag.length, end);
            var after = t.substring(end + endTag.length);

            //Versteckten Text bauen
            var spoiled = document.createElement("div");
            spoiled.appendChild(document.createTextNode(toSpoil));
            spoiled.style.visibility = "hidden";

            //aktivierungs button bauen
            var a = document.createElement("a");
            a.appendChild(document.createTextNode(">SPOILER<"));
            a.addEventListener('click', expand, false);

            //Knoten in den DOM-Baum einpflanzen
            var neu = document.createElement("span");
            neu.appendChild(document.createTextNode(before));
            neu.appendChild(document.createElement("br"));
            neu.appendChild(a);
            neu.appendChild(spoiled);
            neu.appendChild(document.createTextNode(after));

            node.parentNode.replaceChild(neu, node);

            start = t.indexOf(startTag, end);
            end = t.indexOf(endTag, end);
         }
      }
   }
}

function expand() {
   if (this.nextSibling.style.visibility == "visible") {
      this.nextSibling.style.visibility = "hidden";
   } else {
      this.nextSibling.style.visibility = "visible";
   }
}

(ich habs eben mal mit GM getestet. Es funktioniert zwar, scheint aber relativ viel Zeit zu brauchen, weil der DOM-Baum des Forums ziemlich groß ist.)
WotanII (Björn Jürgens)
ist engagiert
ist engagiert
 
Beiträge: 59
Registriert: Do 26. Nov 2009, 15:27
Danke gegeben: 12
Danke bekommen: 1 mal in 1 Post
Auf dem Campus:
:
:
:
:
:

Re: Effektive Hilfe mit Spoilerfunktion

Beitragvon CommanderTomalak » Do 6. Mai 2010, 15:58

Himmel, wieso macht ihr es so schrecklich umständlich? Es gibt doch schon eine Spoilerfunktion für phpBB!

Im Admin Control Panel den Tag anlegen:
Code: Alles auswählen
[spoiler]{TEXT}[/spoiler]


Ersetzen mit:
Code: Alles auswählen
<div class="spoiler1">
  <div class="spoiler2">
    <span 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.innerHTML = '<b>Spoiler: </b><a href=\'#\' onclick=\'return false;\'>hide</a>'; }else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<b>Spoiler: </b><a href=\'#\' onclick=\'return false;\'>show</a>'; }"><b>Spoiler: </b><a href="#" onclick="return false;">show</a></span></div>
    <div class="quotecontent"><div style="display: none;">{TEXT}</div>
  </div>
</div>


CSS einbauen:
Code: Alles auswählen
/* Spoiler */

div.spoiler1
{
  padding: 3px;
  background-color: #FFFFFF;
  border: 1px solid #d8d8d8;
  font-size: 1em;
}

div.spoiler2
{
  text-transform: uppercase;
  border-bottom: 1px solid #CCCCCC;
  margin-bottom: 3px;
  font-size: 0.8em;
  font-weight: bold;
  display: block;
}


fertig.


is klar, ne? :D
Benutzeravatar
CommanderTomalak (Kevin )
kann lesen und schreiben
kann lesen und schreiben
 
Beiträge: 19
Registriert: Do 14. Jan 2010, 23:13
Danke gegeben: 2
Danke bekommen: 0 mal in 0 Post
Auf dem Campus:
:
:
:
:
:

Re: Effektive Hilfe mit Spoilerfunktion

Beitragvon CMDR-ZOD » So 9. Mai 2010, 16:01

Samstag schon rum, aber was solls. CommanderTomalak hat völlig Recht. Kann direkt so umgesetzt werden. Entweder Zugangsdaten per PM an mich und ich kümmer mich die Tage drum oder selbst umsetzen.
:: Fakultät für Informatik :: Abteilung Technische Infrastruktur (ATIS)
Sofwareentwickler

:: Fachschaft
Masterprüfungskommission, Masterauswahlkommission, Vertreter - Konferenz der Fachschaften, ...

:: Z10
Ausschank, Kulturbooking, Homepage, ...
Benutzeravatar
CMDR-ZOD (Philip )
ist engagiert
ist engagiert
 
Beiträge: 68
Registriert: Di 24. Nov 2009, 00:40
Danke gegeben: 12
Danke bekommen: 12 mal in 8 Posts
Auf dem Campus:
:
:
:
:
:

Re: Effektive Hilfe mit Spoilerfunktion

Beitragvon A1m » Sa 15. Mai 2010, 17:37

Spoiler: show
test
Benutzeravatar
A1m (Andi M)
regelt das!
regelt das!
 
Beiträge: 426
Registriert: Mi 11. Nov 2009, 20:16
Wohnort: Leimen
Danke gegeben: 45
Danke bekommen: 94 mal in 45 Posts
Auf dem Campus:
:
:
:
:
:

Re: Effektive Hilfe mit Spoilerfunktion

Beitragvon xZise » So 16. Mai 2010, 15:20

Cool funktioniert einwandfrei!

MfG
Fabian
Opensource ftw:
Jabber, SVG, PNG, 7Zip, VLC media player, GIMP, OpenGL, Subversion, GIT, Inkscape, Mumble, phpBB, Wikipedia, Miranda, Big Buck Bunny, Elephants Dream, Ubuntu, Eclipse, Firefox, Thunderbird, TV-Browser, Notepad++, OpenTTD, OpenOffice.org, …
Benutzeravatar
xZise (Fabian Neundorf)
1337
1337
 
Beiträge: 800
Registriert: Sa 14. Nov 2009, 00:11
Wohnort: Bad Schwartau/Reichenbach (Waldbronn)
Danke gegeben: 6
Danke bekommen: 73 mal in 50 Posts
Auf dem Campus:
:
:
:
:
:

Re: Effektive Hilfe mit Spoilerfunktion

Beitragvon DuKeTHeReaL » So 16. Mai 2010, 15:35

A1m hat geschrieben:
Spoiler: show
test


Danke schön ;)
"Du kannst dein Schicksal nicht verändern. Niemand kann das." - außer man schummelt :P
DuKeTHeReaL (Max )
ist überzeugend
ist überzeugend
 
Beiträge: 161
Registriert: Sa 21. Nov 2009, 00:56
Wohnort: Südoststadt
Danke gegeben: 17
Danke bekommen: 51 mal in 15 Posts
Auf dem Campus:
:
:
:
:
:

Re: Effektive Hilfe mit Spoilerfunktion

Beitragvon CommanderTomalak » Mo 17. Mai 2010, 16:55

A1m hat geschrieben:
Spoiler: show
test

Hast du den CSS absichtlich nicht eingebaut? Damit hätte das Ding nämlich noch nen schönen Rahmen ;)


is klar, ne? :D
Benutzeravatar
CommanderTomalak (Kevin )
kann lesen und schreiben
kann lesen und schreiben
 
Beiträge: 19
Registriert: Do 14. Jan 2010, 23:13
Danke gegeben: 2
Danke bekommen: 0 mal in 0 Post
Auf dem Campus:
:
:
:
:
:

Re: Effektive Hilfe mit Spoilerfunktion

Beitragvon A1m » Di 18. Mai 2010, 15:06

CommanderTomalak hat geschrieben:
A1m hat geschrieben:
Spoiler: show
test

Hast du den CSS absichtlich nicht eingebaut? Damit hätte das Ding nämlich noch nen schönen Rahmen ;)

Spoiler: show
ne CMDR-ZOD hats eingebaut und ich sollte die CSS einbauen weil er kein FTP Zugriff hat. Aber ich bin mal wieder zu faul. Funktioniert doch! :P


never change a running system xD
Benutzeravatar
A1m (Andi M)
regelt das!
regelt das!
 
Beiträge: 426
Registriert: Mi 11. Nov 2009, 20:16
Wohnort: Leimen
Danke gegeben: 45
Danke bekommen: 94 mal in 45 Posts
Auf dem Campus:
:
:
:
:
:

Re: Effektive Hilfe mit Spoilerfunktion

Beitragvon DuKeTHeReaL » Mi 19. Mai 2010, 00:28

A1m hat geschrieben:
CommanderTomalak hat geschrieben:
A1m hat geschrieben:
Spoiler: show
test

Hast du den CSS absichtlich nicht eingebaut? Damit hätte das Ding nämlich noch nen schönen Rahmen ;)

Spoiler: show
ne CMDR-ZOD hats eingebaut und ich sollte die CSS einbauen weil er kein FTP Zugriff hat. Aber ich bin mal wieder zu faul. Funktioniert doch! :P


never change a running system xD



Ja bitte ohne Rahmen, gefällt mir auch besser =)
"Du kannst dein Schicksal nicht verändern. Niemand kann das." - außer man schummelt :P
DuKeTHeReaL (Max )
ist überzeugend
ist überzeugend
 
Beiträge: 161
Registriert: Sa 21. Nov 2009, 00:56
Wohnort: Südoststadt
Danke gegeben: 17
Danke bekommen: 51 mal in 15 Posts
Auf dem Campus:
:
:
:
:
:

VorherigeNächste

Zurück zu Wünsch dir was

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast

cron