Templates & Sprachen » Frage: Zitate mit Spoilerfunktion?

17.04.2021 10:44

dirk_71
#1 Frage: Zitate mit Spoilerfunktion?

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

#2

18.04.2021 19:17 (zuletzt bearbeitet: 18.04.2021 19:21)

creator
#2 RE: Frage: Zitate mit Spoilerfunktion?

cr

creator

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.

Bildanh�nge

Screenshot 2021-04-18 at

download

Antworten

Beitrag melden

#3

18.04.2021 19:32

dirk_71
#3 RE: Frage: Zitate mit Spoilerfunktion?

dirk_71

Super vielen Dank.. läuft

Antworten

Beitrag melden

#4

04.05.2021 20:34 (zuletzt bearbeitet: 04.05.2021 20:38)

Wolfgang
#4 RE: Frage: Zitate mit Spoilerfunktion?

Wolfgang

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

Forum für Hilfe, Tricks & Tipps / Foren-Nr.: 104774 / Template: Business (V4) / Browser: Edge