Frage: Zitate mit Spoilerfunktion?

17.04.2021 10:44
avatar  dirk_71
#1 Frage: Zitate mit Spoilerfunktion?
avatar
User

Hallo,

ein Frage von mir.
Hat schon mal jemand die Funktion eingebaut, dass Zitate nicht mehr vollständig angezeigt werden, sondern mit einer Spoilerfunktion erst nach einem Klick (z.B. alles Lesen) komplett angezeigt werden?.
Manchmal sind die Zitate ja recht lang und man möchte sie halt nur bei Bedarf komplett sehen.

Wäre schön wenn jemand Tipps dazu hat und besonders wenn diese für das X6 Template wären.

Danke


 Antworten

 Beitrag melden
18.04.2021 19:17 (zuletzt bearbeitet: 18.04.2021 19:21)
avatar  creator
#2 RE: Frage: Zitate mit Spoilerfunktion?
cr
User

Eine Möglichkeit für das V6 (Farben & Einstellungen → Eigenes HMTL/JS → Eigenes Javascript):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script>
$('.message blockquote').each(function() {
if ($(this).height() >= 250) {
$(this).css({'max-height': '250px','overflow': 'hidden'}).append('<a class="btn btn-light show_full_post position-absolute" style="top: 215px; left: 0; right: 0;" href="javascript:void(0)">Komplettes Zitat anzeigen</a><a class="d-none btn btn-light mt-2 hide_full_post" href="javascript:void(0)">Weniger anzeigen</a>');
}
});
 
$('.show_full_post').on('click', function() {
$(this).addClass('d-none').next().removeClass('d-none').addClass('d-block').parent().css({'max-height': 'none','overflow': 'visible'});
});
$('.hide_full_post').on('click', function() {
$(this).removeClass('d-block').addClass('d-none').prev().removeClass('d-none').parent().css({'max-height': '250px','overflow': 'hidden'});
});
</script>
 


Kürzt Zitate auf 250px und stellt diese auf Wunsch komplett dar.


 Antworten

 Beitrag melden
18.04.2021 19:32
avatar  dirk_71
#3 RE: Frage: Zitate mit Spoilerfunktion?
avatar
User

Super vielen Dank.. läuft


 Antworten

 Beitrag melden
04.05.2021 20:34 (zuletzt bearbeitet: 04.05.2021 20:38)
#4 RE: Frage: Zitate mit Spoilerfunktion?
avatar
User

Habe mir das komfortable Skript nochmal angeschaut und wollte es auch fürs Business-Templates funktionstüchtig machen!
Habe sogar eine automatische Scroll-Funktion eingebaut, damit die Zitate beim Öffnen und Schließen des Spoilers immer in Lesehöhe platziert werden!

Dabei ist mir aufgefallen, dass es auch viel einfacher geht und man überlange Zitate auch mit einem Scrollbalken rechts versehen kann.
In dem folgenden Skript bleibt sogar die Zeile mit dem Zitatname stehen und nur der Inhalt vom Zitat wird gescrollt!
Funktioniert in allen Templates!




Installation fürs Template (v1-4):
Admin > Layout > Kopf- & Fußzeile > Fußzeile

Installation fürs Template (v6) & Mobil:
Admin > Layout > Farben & Einstellungen > (Mobil) > Eigenes HMTL/JS > Eigenes Javascript

1
2
3
4
5
6
 
<script>
// Zitat mit Scrollbalken rechts
$('blockquote').each(function(){
$('font',this).hide().parent().hide().after('<blockquote class="default"><span style="font-size:12px;">'+$('font',this).html()+'</span><div style="max-height:200px; overflow-x: hidden; overflow-y:auto;margin-top:8px;">'+$(this).html()+'</div></blockqoute>');
});
</script>
 



Wer Interesse an mehr Variationen hat: Zitate mit Spoiler-Button und Scroll-Funktion



Nochmal besten Dank für Idee und Skript an @creator und @dirk_71
Bis dann
Wolfgang

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