Modifizierter Xobor-Spoiler

26.03.2016 15:08 (zuletzt bearbeitet: 26.03.2016 15:24)
#1 Modifizierter Xobor-Spoiler
avatar
User


Business-Template / IE 11 / 104774

Hallo,
mir ist aufgefallen, dass der Xobor-Spoiler immer noch seine Tücken aufweist.
Wie währe es mit einem modifizierten Spoiler, der folgende Optionen zur Verfügung stellt:

  • Ein zusätzlicher Button zum Schließen! Besonders günstig bei langen Beiträgen.
  • Der Spoiler sollte den Platz im Thread komplett ausnutzen und nicht in der Mitte aufhören.
  • Umschlossene Scripte mit [code] ... [/code] und [pre] ... [/pre] sollten nicht über den Spoiler-Rand geschrieben oder abgeschnitten werden!
  • Der Spoiler sollte sich über die gesamte Titelleiste öffnen lassen!



Hier eine schnelle, mögliche Lösung:
Habe für das Business-Template schon seit fast 2 Jahren den abgeänderten Xobor-Spoiler. Läuft echt gut.

Eintragung in "Eigener CSS-Code":

1
2
3
4
5
6
7
8
9
10
11
12
13
 
/*Spoiler-Design*/
.hpm_spoiler_headinput {width:99.5% !important;}
.hpm_spoiler_headinput {width:99.5% !important;}
 
.hpm_spoiler_body {background:none repeat scroll 0 0 #ffffff;border-color:#dddddd;border-style:solid;border-width:0 1px 1px 1px;border-radius:5px;width:100%;}
.hpm_spoiler {margin:6px;width:98%;}
.hpm_spoiler_headdiv {background:none repeat scroll 0 0 #EEEEEE;border:1px solid #dddddd;width:100%;border-radius:5px;}
 
.hpm_spoiler_closebutton {background-color:#F8F8F8;border-top:1px solid #F2F2F2;padding:2px 10px;font:normal 11px Verdana,Arial,sans-serif;font-style:italic;}
.hpm_spoiler_closebutton a {display:block;width:100%;color:black;text-decoration:none;}
 
/* Für 'Code-Listen' und 'Pre' im Spoiler*/
pre{min-width: 95% !important}
 



Eintragung Iconbar:

Ersetze:

1
2
3
 
[spoiler2=Thema]
...
[/spoiler2]
 


Mit:

1
2
3
 
<div class="hpm_spoiler"><div class="hpm_spoiler_headdiv"><input type="button" onclick="hpm_spoiler(this.parentNode.parentNode);" class="hpm_spoiler_headinput hpm_spoiler_closed" value="Spoiler"></div><div><div class="hpm_spoiler_body"><div style="padding: 10px;">
...
</div><div class="hpm_spoiler_closebutton"><a title="Spoiler schließen!" href="javascript:void(0);" onclick="hpm_spoiler(this.parentNode.parentNode.parentNode.parentNode);">Schließen</a></div> </div> </div> </div>
 


Grafik:

1
 
https://img.homepagemodules.de/ds/static/gaia/spoiler_neu.png
 




Auch hier: Erweiteter und verbesserter HPM / Xobor-Spoiler





Bis dann
Wolfgang

26.03.2016 16:17
avatar  River
#2 RE: Modifizierter Xobor-Spoiler
avatar
User

Hey Wolfgang,

Das ist ne gute Idee, und ich hab aber auch noch eine, und zwar fände ich es schön, wenn man einen optionalen Spoilertitel gleich mit einbauen kann.

So wie bei der URL - aber so, dass man keinen Titel eingeben muss, sondern kann. Wenn man das halt braucht.

Das muss aber nicht unbedingt sein - wäre eine Luxusausführung - aber wenn schon, denn schon.

Liebe Grüße
River

-------------------------------------------------------------

+++Ich will Computercrack werden! XD+++

Business Template (v4)

 Antworten

 Beitrag melden
26.03.2016 16:36 (zuletzt bearbeitet: 26.03.2016 16:45)
#3 RE: Modifizierter Xobor-Spoiler
avatar
User

Das wäre für mein Autorenforum perfekt, wo wir oft die vorige Version eines Textes in einem Spoiler archivieren! Danke fürs Teilen

Edit: Danke! Ich habe es inzwischen eingebaut und es sieht wirklich sehr, sehr schick aus!

****************************************************
Bitte nicht anchatten - der Chat ist bei mir ausgeblendet und ich sehe eure Nachrichten teilweise erst 20 Minuten später. Schreibt lieber eine PN.
Bitte außerdem nicht in Themen taggen, in denen ich eh aktiv bin. Ich habe alle Themen, an denen ich mitdiskutiere, aboniert und kriege mit, wenn ihr was schreibt. Danke!

 Antworten

 Beitrag melden
26.03.2016 17:38
#4 RE: Modifizierter Xobor-Spoiler
avatar
User

Das sage ich nur eines Merci lieber Wolfgang

Schöne Ostertage wünsche

Lg

Yes, it was my way

 Antworten

 Beitrag melden
26.03.2016 17:52
#5 RE: Modifizierter Xobor-Spoiler
avatar
User

Zitat von River im Beitrag #2
Hey Wolfgang,

Das ist ne gute Idee, und ich hab aber auch noch eine, und zwar fände ich es schön, wenn man einen optionalen Spoilertitel gleich mit einbauen kann.

So wie bei der URL - aber so, dass man keinen Titel eingeben muss, sondern kann. Wenn man das halt braucht.

Das muss aber nicht unbedingt sein - wäre eine Luxusausführung - aber wenn schon, denn schon.

Liebe Grüße
River


Hallo River,
der Spoiler-Titel heißt beim Anlegen immer "Thema"
und wird dann umbenannt (Eintragung Iconbar - Zeile 1).

Lg

26.03.2016 20:27 (zuletzt bearbeitet: 26.03.2016 20:34)
avatar  River
#6 RE: Modifizierter Xobor-Spoiler
avatar
User

Hab gar nicht gesehen, dass der Spoilertitel schon drin ist, aber jetzt, wo du's gesagt hast, seh ich's auch.

Danke und ich wart' mal, ob das standardmäßig implementiert wird.

Liebe Grüße
River

Edit: Manchmal sehe ich das Naheliegende nicht - ist echt schlimm. ^^

-------------------------------------------------------------

+++Ich will Computercrack werden! XD+++

Business Template (v4)

 Antworten

 Beitrag melden
30.03.2016 02:06
#7 RE: Modifizierter Xobor-Spoiler
Je
User

Hallo,

ich hab eine kurze Frage zum modifizierten Spoiler,
ich hab jetzt soweit alles so eingestellt, wie ich es gerne haben will,
doch der Innentext, wenn ich zum Beispiel einen Code einfüge, ist ziemlich rechtsbündig,
wie kann ich den mehr in die Mitte verschieben? Ich hab nämlich den Spoiler insgesamt verkleinert, aber der Text lässt sich nicht so recht verschieben.

wäre froh, wenn mir da jemand helfen könnte, denn so sieht es wirklich nicht schön aus :)

LG


 Antworten

 Beitrag melden
30.03.2016 02:30
#8 RE: Modifizierter Xobor-Spoiler
Je
User

ach, ich habs hinbekommen :)

jetzt aber noch eine andere Frage: Wie kann ich den Titel des Spoilers ändern? Bei mir funktioniert das nicht, wenn ich das Thema durch ein anderes Wort ersetzen

LG


 Antworten

 Beitrag melden
24.11.2019 21:35 (zuletzt bearbeitet: 24.11.2019 21:40)
#9 RE: Modifizierter Xobor-Spoiler
avatar
User

Habe den "Xobor-Spoiler" noch etwas ausgebaut!

• Der geöffnete Spoiler springt jetzt in Lesehöhe!
• Wird der Spoiler über die Titelleiste oder über den Schließ-Button zugeklappt, wird zum Spoiler-Ausgangspunkt zurück gescrollt!
• Die Scroll-Funktionen arbeitet auch betragsübergreifend und bei Verschachtelungen!
• Das Skript kann zum Ausprobieren in die Fußleiste kopiert werden!
• Um die komplette Funktion nutzen zu können, CSS- und Iconbar-Einträge aus Beitrag #1 nutzen!


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<script>
// Xobor-Spoiler mit Scroll-Funktion

var TopSpoil = 250; // Lesehöhe (ohne Pixel-Eintrag!)
var TimeSpoil = 500; // Scroll-Geschwindigkeit!

$(".hpm_spoiler_headdiv").click(function (){
$('html,body').animate({scrollTop: ($(this).offset().top) - TopSpoil}, TimeSpoil);

$('.hpm_spoiler_closebutton').click(function (){
$('html,body').scrollTop($(this).parent().parent().prev().offset().top - TopSpoil)
});

});
</script>
 




Wer Interesse hat: HPM-Spoiler mit Scroll-Funktionen ausstatten!


Gruß
Wolfgang


Forum für Hilfe, Tricks & Tipps / 104774 / Business-Template / Internet Explorer 11

Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!