Teaser mit jQuery erstellen

Heutzutage besitzt fast jede halbwegs ernst zu nehmende Webapp ein Mini-CMS im Backend. Meistens basierend auf einem WYSIWYG-Editor in JavaScript. Eigentlich eine sinnvolle Sache, und eigentlich ganz einfach, manchmal aber auch mit einem gehörigen Explosionspotenzial. Probleme tauchen nämlich dann auf, wenn man für den Editor HTML zulässt, und Texte aus diesem CMS angeteasered werden sollen.

Screenshot von jQuery "more"/"less" HTML truncate

Es gibt mehrere Ansätze dieses Problem zu lösen, alle basieren darauf, das ein Abschneiden nach X Zeichen nicht möglich ist! Warum ist das so? Entweder ich schneide mitten im Wort ab, was nicht schön ist, oder mitten im Zusammenhang, was nicht schön ist, oder mitten in einem HTML-Tag was zu großem Chaos führen wird! Deshalb kann man nicht einfach die ersten x Zeichen abschneiden, sondern benötigt einen Algorithmus der zum Beispiel nur an Leerzeichen (oder hinter Satzzeichen) trennt. Darüber hinaus dürfen die x Zeichen natürlich nur den Text darstellen, HTML wird bei den x Zeichen nicht berücksichtigt! Was am Anfang ganz einfach aussah entwickelt sich zu einer komplexen Angelegenheit, von der man darüber hinaus ausgehen kann, dass sie sich nie so verhält wie man es gerade erwartet.

jQuery „more“/“less“ HTML truncate schneidet einen Text an passender Stelle ab. Passend ist dabei nicht in einem HTML-Tag. Sollte der Zustand eintreten, das der Text HTML öffnet, aber nicht wieder schließt, weil dies im abgeschnittenen Teil erfolgt, stellt das jQuery Plugin sicher, das alle Tags geschlossen werden. Der Text ist abgeschnitten, das Design noch heil und der Kunde zufrieden. Aber Achtung, je nach Design kann es durchaus zu einem ziemlichen Rumgeruckel wegen eines Flash of Unstyled Content kommen.

Ähnliche Beiträge

In jQuery Existenz prüfen Das praktische an jQuery ist (unter anderem) das es Aktionen auf ein Element nur dann ausführt, wenn das Element existiert. Wenn es nicht existiert: P...
Syntax Highlighting in Javascript Syntax Highlighting ist – als Blogbetreiber – eine recht anstrengende Sache. Zunächst einmal muss man WordPress erklären, dass es bitte schön die Fing...
Ideale Formulare in HTML5 Zusammen mit HTML5 wurden Formulare in ihren Möglichkeiten immens aufgewertet, was prinzipiell super ist, wenn man es benutzen könnte. Es ergibt sich ...
Nokia Maps API mit jQuery Eine Landkarte online zu bringen bedeutet nicht zwingend Google Maps, sondern es gibt auch noch andere Systeme. Nokia Maps ist eines dieser Systeme un...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.