Modifizierter Xobor-Spoiler
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":
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:
2
3
[spoiler2=Thema]
...
[/spoiler2]
Mit:
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: 
https://img.homepagemodules.de/ds/static/gaia/spoiler_neu.png
Auch hier: Erweiteter und verbesserter HPM / Xobor-Spoiler
Bis dann
Wolfgang
#3 RE: Modifizierter Xobor-Spoiler
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!
#4 RE: Modifizierter Xobor-Spoiler
Das sage ich nur eines Merci lieber Wolfgang
Schöne Ostertage wünsche
Lg
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
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
#9 RE: Modifizierter Xobor-Spoiler
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!
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
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!