Moderne Websites werden häufig mit Teaser-Bereichen bestückt, die einen bestimmten Inhalt mit einigen Zeilen einleiten, und anschließend einen „Weiterlesen“-Link anzeigen, über den der Besucher den ungekürzten Inhalt angezeigt bekommt. Bei Blogs sind die Kategorie- und Übersichtsseiten größtenteils nach diesem Prinzip aufgebaut. Aber auch „normale“ Websites setzen zunehmend auf dieses Prinzip und realisieren beispielsweise die Startseite oder lange Seiteninhalte über Teaser. Wer WordPress als Rückgrat einer Website einsetzt, wird eine solche Funktion wohl meistens über die functions.php steuern; für kleine Websites, Portfolios oder andere statische Seiten muss jedoch eine andere Lösung her.
Cutter.js nimmt euch die Arbeit ab und kürzt Texte unter Berücksichtigung der enthaltenen HTML-Tags.
tcorral.github.com/Cutter.js
via tagdocs.de
Geschrieben von:
Raimund Büchner
Raimund ist oft die erste Ansprechperson bei kulturbanause. Er kümmert sich hauptsächlich um die Betreuung und Beratung unserer bestehenden als auch künftigen Kundschaft. Ein weiterer Schwerpunkt seiner Tätigkeit liegt im Design nicht unmittelbar sichtbarer Dinge: Struktur und Inhalte. Projekte unterstützt er daher vor allem in der Anfangsphase in Bereichen wie Informationsarchitektur, UX-Design und Content Strategy.
Jonas Hellwig
Jonas ist Gründer von kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.
Wie kann ich denn den Code umkehren? Also dass zuerst nur ein Teil vom Text angezeigt wird und dann beim Klick der ganze Text? Bei mir wird zuerst der ganze Text angezeigt. Und warum geht bei jedem Klick die ganze Seite wieder ganz nach oben?
Wir lieben es gewachsene Strukturen aufzuräumen und perfekt im Content Management abzubilden. Strukturell komplexe Projekte realisieren wir regelmäßig und sehr gerne.
Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.
Unsere Agentur in Berlin unterstützt bei digitalen Projekten mit sehr unterschiedlichem Umfang. Mit Beratung, Gestaltung und Programmierung helfen wir Menschen in verantwortungsbewussten Unternehmen dabei, online zeitgemäß zu kommunizieren.
Je nach Website-Konfiguration (base href) kann es zu falschen Verlinkungen kommen. Ich hab in der cutter.js den Link auf „#“ entfernt,
d.prototype.createViewMore = function () {
var f = b.createElement(„a“);
f.className = this.oClasses.more;
f.title = this.oTexts.more;
f.innerHTML = this.oTexts.more;
this.oViewMore = f
};
Dadurch wird nicht mehr falsch verlinkt und es geht trotzdem alles.
Wie kann ich denn den Code umkehren? Also dass zuerst nur ein Teil vom Text angezeigt wird und dann beim Klick der ganze Text? Bei mir wird zuerst der ganze Text angezeigt.
Und warum geht bei jedem Klick die ganze Seite wieder ganz nach oben?
Vielen Dank
Sehr cool.
Kann ich Grade gut gebrauchen :)