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

Datum: 1. August 2016
Autor*in: 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


Twitter Account-ID auslesen

Autor*in: Stefan Oswald


Technologie


Twitter bemüht sich nach Kräften, die numerische ID seiner Benutzer-Accounts zu verstecken. Nur dumm, dass genau diese ID für die Twitter-Integration im imxSocialMediaReader benötigt wird… Früher war das kein Problem, da Twitter da noch auf der Tweet-Seite des Accounts öffentlich einen RSS-Link publizierte; das ist derzeit aber leider nicht mehr der Fall. Wie kommt man …


Beitrag lesen
20
OKT
11

Boah, Newsticker sind doch so…. 2016

Autor*in:


Technologie // User Experience & Design


Einige von uns haben sich ja schon die Augen gerieben: Der tot geglaubte Newsticker erhält bei vielen Kunden im Portal wieder Einzug. Leider kam es bei diversen Umsetzungen mit fertigen Tickern in letzter Zeit aber zu einigen Problemen. Problem 1: Responsivität Die Liste an fertigen Tickern im Netz ist lange und die Fähigkeiten der Ticker sind …


Beitrag lesen
29
APR
16

Kundenworkshop imx.Platform 3

Autor*in: Christine Pfleger


infomax   //   Strategie & Konzeption   //   Technologie   //   Tourismus   //   Über den Tellerrand   //   User Experience & Design


Kundenworkshop GUI imx.Platform 3
Kundenworkshop GUI imx.Platform 3

Am 29. Mai 2019 haben wir den „Power-Usern“ unter unseren Kunden, also denjenigen, die am intensivsten mit dem infomax-Technologie-Framework imx.Platform arbeiten, in einem Workshop den aktuellen Stand der neuen imx.Platform 3 präsentiert, ihre Wünsche an Features und Usability diskutiert und diese priorisiert in eine Roadmap überführt.


Beitrag lesen
29
MAI
19

Xdebug Stacktrace verbessern

Autor*in: Florian Müller


Technologie


Ich habe mich heute im Zuge eines kleinen Problems mit einem Stacktrace etwas mit der xDebug Konfiguration beschäftigt. Dabei bin ich auf eine kleine nützliche Option gestoßen, welche ich euch nicht vorenthalten möchte. Die Optionen xdebug.collect_params Es gibt die Option xdebug.collect_params, welche verschiedene Level an Output ermöglicht. Ich habe mich in meiner VM für den …


Beitrag lesen
03
AUG
17