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


Textfield-Resize des Browsers steuern

Autor: Axel Güldner


Technologie


Wer hat dieses Textfield-Resize eigentlich eingeführt? War es der Chrome der es das erste mal angeboten hat? War es der Safari? Egal, Apple oder Google, einer von beiden ist mit Sicherheit schuld. Aber Moment, wovon rede ich da eigentlich? Dem einen oder anderen, vielleicht ja auch jedem, ist evtl. aufgefallen, dass sich Textfields in Formularen …


Beitrag lesen
05.
April
2012

HTML5 Polyfill

Autor: Sascha Nützel


Technologie


Nachdem das “required”- Attribut im Safari nicht funktioniert, bin ich auf die Suche nach einem Polyfill gegangen. Dabei bin ich auf folgende Bibliothek gestoßen: https://github.com/aFarkas/webshim Die Einbindung gestaltet sich recht simpel und wird hier https://github.com/aFarkas/webshim#installation-and-usage gut erklärt. Es besteht auch die Möglichkeit, nicht alle Module einzubinden sondern nur vereinzelt gebrauchte (z.B. ‘forms’). Das Portalseitige Minify muss für …


Beitrag lesen
31.
August
2016

Erkenntnisse der IPC 2011

Autor: Benjamin Hofmann


Projekte // Technologie // User Experience & Design


Bevor ich lange im Developer Meeting etwas erzähle, was dann sowieso nur wieder in Vergessenheit gerät, dachte ich mir meine Erkenntnisse von der IPC 2011 in Mainz einfach hier niederzuschreiben. Dauerhaft für alle von uns sichtbar und mit einer Möglichkeit Fragen zu stellen. Hier also meine Top 7 (unsortiert) der Dinge, die ich interessant fand …


Beitrag lesen
08.
Dez.
2011

Netbeans 7.1patch1 released

Autor: Bastian Schwarz


Technologie


Gestern wurde Netbeans 7.4patch1 released in dem auch einige PHP Fixes mit drin sind. Näheres gibt es hier: https://netbeans.org/community/news/show/1602.html Das Auto-Namespacing geht leider immer noch nicht … Gruß Bastian


Beitrag lesen
26.
Nov.
2013