kulturbanause Blog

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

jQuery


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

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

Turn.js – Page-Flip-Effekt mit jQuery und HTML5 (und ohne Flash)

Vor einigen Jahren war der sog. Page-Flip-Effekt sehr populär um mit Hilfe von Flash digitale und realistisch anmutende Bücher zu erstellen. Der Trend flaute in den letzten Jahren zunächst ein wenig ab um dann mit der zunehmenden Verbreitung von Tablets und eBooks wieder an Beliebtheit zu gewinnen.
Und ganz in Sinne moderner Webentwicklung lässt sich der Effekt heute mit jQuery, CSS3 und HTML5 umsetzen.

Beitrag zu Ende lesen

Flexible jQuery-Slideshow mit Generator: Rhinoslider

Vor einiger Zeit bin ich auf einen neuen jQuery-Slider aufmerksam gemacht worden den ich euch in diesem Beitrag kurz vorstellen möchte: Den Rhinoslider. Im Gegensatz zu vielen anderen Slidern lässt sich der Rhinoslider unkompliziert und sehr flexibel individualisieren und überzeugt darüber hinaus durch einen Online-Generator mit Live-Preview.

Beitrag zu Ende lesen

Navigationen für die mobile Ansicht in Select-Listen umwandeln: TinyNav.js

Umfangreiche Navigationen auf Smartphones benutzerfreundlich darzustellen ist gar nicht so einfach. Zwar ist es normalerweise problemlos möglich die Darstellung für den kleinen Bildschirm anzupassen - beispielsweise indem man alle Links untereinander abbildet - dann muss der Besucher aber erst über eine lange Liste an Links hinwegscrollen um den Content zu erreichen. Insbesondere bei Blogs will der Besucher aber häufig den neuesten Artikel lesen und nicht erst die Navigation sehen.
Das winzige jQuery-Plugin TinyNav wandelt ausgewählte Listen in Select-Listen um. Die sparen Platz und lassen sich auch auf Smartphones einfach bedienen.

Beitrag zu Ende lesen