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

Avatar 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(?:.*)>[wWsS]*</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


http://webplatformdaily.org/

Autor: Bastian Schwarz


Technologie // Über den Tellerrand // User Experience & Design


Ich habe eine neue Seite (http://webplatformdaily.org/) entdeckt, die täglich Links zu folgenden Themen aus Twitter sammelt: Open Web Platform (including the open standards that comprise it) JavaScript (the core language and libraries written in it) web-browsers (including their development tools) front-end web-development in general open source to some degree (e.g. GitHub related content) Das Projekt …


Beitrag lesen
09.
April
2013

imx.Search: der neue ad-hoc Index-Update-Service

Autor: Marc Kurzmann


Technologie


Bisher war es bei imx.Search so, dass Änderungen in den Contents aus den Produkten nur nach einer kompletten Neu-Indizierung im Index verfügbar waren – üblicherweise über Nacht. Was für einen reinen Volltext-Suchmaschineneinsatz von imx.Search vielleicht noch akzeptabel ist, wenn Suchbegriffe mit einem Tag Verspätung gefunden werden, so ist es bei der Verwendung als Filter-Suchmaschine, so …


Beitrag lesen
03.
Dez.
2014

lory

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Und schon wieder habe ich eine kleine schöne Javascript-Library gefunden: lory. Diesmal ist es keine Lightbox-Lösung wie PhotoSwipe gestern, sondern ein simpler Slider. Auch dieses Skript ist auf den mobilen Anwendungsfall ausgelegt und kann von Haus aus mit Swipes umgehen. Auch das sogenannte Infinite-Sliding ist möglich und auch dieses Skript lässt sich über RequireJS nutzen …


Beitrag lesen
23.
Sep.
2016

WJAX 2018 – Angular, Java 11 und ein wenig ML

Autor: Magdalena Piller


Technologie


Im November war ich mal wieder auf der WJAX und habe mir den „Angular-Day“ herausgesucht, also ein kompletter Tag rund um Angular. Aber auch ein paar andere Themen versprachen Interessantes. In der Keynote mit dem Titel „Trust and Confidence through Chaos“ präsentierte Russ Miles seine Variante des Chaos Engineerings ganz nach dem Motto „Umarme Deinen …


Beitrag lesen
28.
Dez.
2018