kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

JavaScript


WordPress: Gesuchte Wörter in den Suchergebnissen farblich hervorherben

Die Suchfunktion von WordPress wird häufig kritisiert und verfügt nicht über allzu viele Funktionen. Mit einigen Tricks lässt sich die Suche um fehlende Features erweitern und benutzerfreundlicher gestalten. So könnt ihr beispielweise über die functions.php gezielt Seiten in den Suchergebnissen verstecken.
Mit folgendem jQuery-Snippet hebt ihr die gesuchten Begriffe in der Ergebnisseite farblich hervor. Das erleichtert Besuchern die Orientierung und sieht z.B. so aus.

Beitrag zu Ende lesen

Responsive Images mit ‹figure› oder ‹picture›-Tag: jQuery Picture

Im Responsive Design ist es zwar möglich identische Inhalte unterschiedlich darzustellen, es ist jedoch nicht ohne weiteres möglich Inhalte auszutauschen. Daher werden auf kleinen Bildschirmen meist viel zu große Bilder geladen die lediglich über CSS auf die Abmessung des Displays skaliert sind.
Im Moment gibt es für dieses Problem keine standardisierte Lösung, nur diverse Scripte die den Bildaustausch übernehmen. jQuery Picture ist ein solches Script. Es lässt sich einfach in die Website integrieren, ist gerade einmal 2KB groß und nutzt entweder das valide <figure>- oder das experimentelle <picture>-Element.

Beitrag zu Ende lesen

Komfortable Form-Validierung ohne Änderungen am HTML-Code: jQuery Walidate

jQuery Walidation Logo / Icon

Um Website-Formulare auf Fehleingaben zu prüfen existieren unzählige Validierungs-Plugins und Tools. Leider sind viele dieser Tools kompliziert zu implementieren und erfordern zudem Anpassungen am HTML-Quellcode des Formulars.
Wenn das Formular allerdings dynamisch generiert wird oder über ein Plugin erstellt wurde, ist es häufig nicht möglich den HTML-Code anzupassen. Hier eilt das jQuery-Plugin „jQuery Walidate“ zur Hilfe und ermöglicht die Validierung bestehender HTML-Formulare ohne Änderungen am Quellcode vornehmen zu müssen. Neben einer einfachen Integration des Plugins in die Website stehen umfangreiche Funktionen wie individuelle Fehlermeldungen etc. zur Verfügung.

Beitrag zu Ende lesen

CSS-Verläufe aus Bildern generieren: CSS Gradient Finder

Mit dem Online Tool „CSS Gradient Finder“ könnt ihr auf CSS basierende, lineare Farbverläufe auf Grundlage eines Bildes automatisch erstellen lassen.
Per Drag & Drop könnt ihr eine Grafik mit dem entsprechenden Verlauf in das Tool laden, anschließend erhaltet ihr als Ausgabe den entsprechenden CSS-Quellcode inkl. der verschiedenen Vendor-Prefixes für die unterschiedlichen Browser.

Beitrag zu Ende lesen

Kerning für Webfonts – Type Butter jQuery-Plugin

Type Butter

Vor einiger Zeit habe ich bereits einen Artikel über Kerning und Ligaturen im Browser geschrieben - heute möchte ich das Thema noch einmal aufgreifen. Type Butter ist ein neues jQuery-Plugin, mit dem ihr das Kerning der Schriftarten eurer Website verbessern könnt.
Im Moment liegen große Überschriften ja voll im Trend. Doch gerade bei großen Schriftgrößen entstehen häufig unschöne Abstände zwischen den Buchstaben. Mit Type Butter könnten sie der Vergangenheit angehören.

Beitrag zu Ende lesen

»Scroll Back To Top«-Button mit jQuery

Der »zurück nach oben«-Button gehört zur Standard-Ausstattung einer modernen Website. In diesem Beitrag archiviere ich den Code um den Button herzustellen. Sobald der Anwender 100 Pixel nach unten gescrolled hat wird der Button eingeblendet. Wenn er zurück nach oben scrolled verschwindet der Button wieder. Ein Klick auf den Back-»Back To Top«-Button transportiert den User per animiertem Scrolling zurück ans obere Seitenende.

Beitrag zu Ende lesen

Touch-Gesten per JavaScript: Hammer.js

Mit der zunehmenden Verbreitung von Touchpads in Smartphones und Tablets wird auch die Gestensteuerung (Touch Gestures) für Websites immer interessanter. Wenn Ihr bestimmte Elemente einer Website über Touch-Gesten navigierbar machen möchtet, lohnt ein Blick auf das Script hammer.js . Das Script lässt sich als jQuery-Plugin oder als Standalone-Lösung einsetzen und realisiert die Gesten „Tap“, „Double Tap“, „Hold“, „Drag“ und „Pinch (Transform)“.

Beitrag zu Ende lesen