Der “Checkbox-Hack” oder wie mache ich eine Weiterlesen-Funktion

Florian Müller Datum: 1. August 2016
Autor: Florian Müller


Da ich immer wieder von Unsicherheiten für eine Weiterlesen-Funktion lese, wollte ich euch eine schöne und schnell zu implementierende Möglichkeit zeigen, wie man diese auch Implementieren kann. Diese wurde mir von Benni vor ein paar Wochen vorgestellt und ist auch schon bei ein paar Projekten im Einsatz.

Die HTML Struktur ist relativ einfach und kann auf viele verschiedene Anwendungsfälle angepasst werden. Bei ein paar Projekten wird damit Text gekürzt und bei einem Projekt wird damit eine Liste von Daten zum Ausklappen dargestellt.

<div class="informationArea__textArea">
  [%if $text|strlen > 600%] 
    <input type="checkbox" id="informationArea__contentsToggler">

    <div>[%$text%]</div>

    <label for="informationArea__contentsToggler" class="informationArea__contentsToggler--show">[%get name='readMore'%]</label>
    <label for="informationArea__contentsToggler" class="informationArea__contentsToggler--hide">[%get name='readLess'%]</label>
  [%else%]
    [%$text%]
  [%/if%]
</div>

In Zeile 2 befindet sich die Konfiguration, ab welcher Text-Länge die Weiterlesen Funktion greifen soll.

Statt nur die Stringlänge abzufragen kann man auch etwas weiter gehen. Für den Fall dass im Text z.B. ein -Tag vorhanden ist beziehungsweise man die html-tags nicht berücksichtigen möchte, kann man die If-Abfrage mit folgendem modifizieren

$text|regex_replace:"/<n?o?script(?:.*)>[\w\W\s\S]*<\/n?o?script>/":""|strip_tags|count_characters:true
.informationArea__textArea > input,
.informationArea__textArea > input:not(:checked) ~ label.informationArea__contentsToggler--hide, 
.informationArea__textArea > input:checked ~ label.informationArea__contentsToggler--show{ 
  display: none;
}
.informationArea__textArea > input:not(:checked) + p {
  position: relative;
  height: 9.8em; 
  overflow: hidden;
}
.informationArea__textArea > input:not(:checked) + p:before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  content: '';
  background: -moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
  background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
  background: linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}

Im CSS muss die Höhe der im eingeklappten Zustand anzuzeigenden Daten festgelegt werden. Als sehr brauchbar hat sich hier herausgestellt, dass man ein vielfaches der line-height des Portals verwendet. In diesem Fall war die line-height: 1.4em und entsprechend wurde hier height: 9.8em gewählt.

Im Fall eines Projekts gab es noch die Anforderung, dass die Seite beim Zusammenklappen nicht springen soll. Hierfür muss man leider auf JavaScript zurück greifen. Dieses ist as ugly as hell und bedarf eventuell einer Überarbeitung, aber als Ideenfindung, wie man es implementieren kann, kann es wohl eingesetzt werden. Leider basiert es noch teilweise auf jQuery.


document.querySelector('.informationArea__contentsToggler--hide').addEventListener('click', function (e) {
  e.preventDefault();
  var visibleOffset = jQuery(this).offset().top - jQuery(window).scrollTop();
  jQuery('#informationArea__contentsToggler').attr('checked', false);
  jQuery('html, body').animate({scrollTop: jQuery('.informationArea__contentsToggler--show').offset().top - visibleOffset}, 0);
});


Mir ist bewusst, dass diese Möglichkeit der der Weiterlesen-Funktion die Accessibility für Screenreader nicht gerade erhöht, da hier eine nichts-sagende Checkbox verwendet wird. Jedoch sehe ich dies im Vergleich der Erhöhung der Accessibility im Punkto JavaScript-Freiheit als kleines Übel an.

Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


JIT Grunt

Autor: Florian Müller


Technologie


Dieser Beitrag nimmt Bezug auf meinen vorherigen Beitrag zur Optimierung von Grunt. Wer diesen nicht kennt, wird mit diesem hier nicht viel anfangen können. Wer den Concurrent Task und dazu auch den Time-Grunt einsetzt, mag schon mal bemerkt haben, dass bei jedem Concurrent Task sämtliche Tasks geladen. Auf dem DEV dauert dies auch mal gerne 2 …


Beitrag lesen
08.
Februar
2017

Open Graph Meta Tags & facebook for developers

Autor: Steven Schöning


Technologie


Ich hatte vor kurzem das Problem, dass trotz dem hinterlegten Bild im og:image Tag ein anderes Bild ausgespielt wurde, denn es wurde das erste Bild im HTML Quelltext beim teilen über Facebook ausgegeben. Hier konnte ich bei “facebook for developers” einige Informationen zu dem Thema finden, indem ich im Sharing Debugger und im Object Debugger …


Beitrag lesen
15.
Juni
2017

OOP 2014 – Martin Fowler: “Not just code monkeys”

Autor: Marc Kurzmann


Technologie // Über den Tellerrand


Ein Thema, welches mir persönlich sehr am Herzen liegt: jeder sollte sich seiner sozialen/ethischen Verantwortung bewusst sein. Dazu passt der Vortrag von Martin Fowler auf der OOP 2014. “Einer der Keynote-Speaker war Martin Fowler. Er hielt einen eindrucksvollen Vortrag, in dem er auch auf die soziale Verantwortung von Software-Entwicklern einging. Seine Botschaft “Not just code …


Beitrag lesen
10.
Februar
2014

Erste Eindrücke von der WJAX2012

Autor: Christian Göbel


Technologie


Heute gab es im Dev-Meeting schon einige Eindrücke von der diesjährigen WJAX von mir zu hören. Diese Punkte möchte ich nun an dieser Stelle noch einmal kurz zusammenfassen. Neben Rucksäcken, T-Shirts und Kulis gab es auch dieses Jahr im Westin Grand Hotel in München wieder einige spannende Sessions. Vor der Eröffnung der eigentlichen Hauptkonferenz am …


Beitrag lesen
08.
Nov.
2012