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(?:.*)>[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.

Dieser Artikel wurde verschlagwortet unter:


Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


Microsoft Edge

Autor: Benjamin Hofmann


Technologie


Mit Windows 10 kommt Microsofts neuer Browser, sein Codename war bisher „Spartan“. Gestern hat Microsoft dem IE-Nachfolger nun einen richtigen Namen gegeben: Microsoft Edge. Neben der Integration von Cortana gibt es die Möglichkeit, Dinge auf Websites zu markieren, zu beschriften und dann direkt mit anderen zu teilen. Interessant ist ebenfalls, dass Microsoft es erlaub Erweiterungen …


Beitrag lesen
30
APR
15

OOP 2015 – Tag 2

Autor: Marc Kurzmann


Technologie // Über den Tellerrand


Heute mach ich’s ein wenig kürzer: Die erste Session war sehr technisch: „Bring Your Technology“; 5 „Gurus“ haben nacheinander jeweils ihre aktuell spannendste Technologie vorgestellt, mit der sie sich entweder intensiv beschäftigen, oder die sie zukünftig für sehr interessant halten. Folgende Technologien wurden dabei vorgestellt: Arduino (eine Art Mikrocontroller mit Open-Source-Layout, ideal im Zusammenhang mit …


Beitrag lesen
28
JAN
15

YouTube Data-API v2 ist tot.

Autor: Benjamin Hofmann


Technologie


Wer es noch nicht mitbekommen hat, Google stellt die Version 2 seiner Data API für YouTube ein. Die Ankündigung für die Abschaltung der v2-API kam bereits im März 2014. Mehr Informationen gibt es hier: https://www.googlewatchblog.de/2015/04/youtube-data-api-viele/ Einen Migration-Guide von Google gibt es hier: https://developers.google.com/youtube/v3/migration-guide


Beitrag lesen
22
APR
15

Responsive Webdesign – Was hat das mit mir zu tun?

Autor: Axel Güldner


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


Das Thema Responsive Webdesign hat inzwischen jeden von uns, der mit offenen Augen durch das Internet läuft, mindestens einmal berührt. Quasi wie aus dem Nichts ist diese Disziplin über Nacht zum neuen Buzzword unter Webdesignern/Entwicklern und Marketingleuten geworden. Responsive Webdesign gilt einfach als sexy, auch wenn die eigentliche Idee dahinter nicht gerade neu ist. Jeder …


Beitrag lesen
18
JAN
12