Smart App Banners für iOS und Android

smart-app-banner

Seit dem Update auf iOS 6 stehen in Apples mobilem Betriebssystem die sog. „Smart App Banners“ zur Verfügung. Mit Hilfe eines solchen Banners kann im mobilen Safari auf eine App im App Store hingewiesen werden, was die Downloads spürbar erhöhen kann. Neben dem App-Icon werden innerhalb des Smart Banners der Titel, der Preis und die Bewertungen der Anwendung angezeigt. Ein Button führt den Anwender zum AppStore. Wenn die App bereits installiert ist, kann über den Button die Anwendung gestartet werden.

Beitrag zu Ende lesen

:nth-child über jQuery im Internet Explorer 6, 7 und 8 nutzen

ie8-jquery

Mit der CSS-Pseudoklasse :nth-child lassen sich Elemente nach einem berechneten Muster ansprechen. Ein häufiges Anwendungsgebiet ist beispielsweise das abwechselnde Einfärben von Tabellenzeilen. Einen ausführlichen Artikel zu dieser CSS-Eigenschaft habe ich bereits vor einiger Zeit veröffentlicht.
Leider unterstützt der Internet Explorer das Pseudoelement erst ab Version 9, doch mit ein wenig JavaScript kann das Verhalten ebenfalls erreicht werden.

Beitrag zu Ende lesen

WordPress: interne jQuery-Version über Google CDN laden

wordpress-jquery

Wer jQuery in WordPress verwenden will, integriert das Script häufig manuell im Header oder Footer der Seite. Das Script wird dazu heruntergeladen, in den Website-Ordner kopiert und von dort aus verknüpft. Alternativ wird es über ein Content Delivery Network (CDN) von Google & Co. geladen.
WordPress verfügt jedoch auch über eine eigene Version von jQuery, die genutzt werden kann. Diese Version wird auch von Plugins verwendet. Wenn ihr jQuery also manuell hinzufügt, kann es passieren, dass jQuery mehrfach geladen wird. Das dauert länger und kann zu erheblichen Konflikten mit Plugins führen.

Beitrag zu Ende lesen

WordPress: Gesuchte Wörter in den Suchergebnissen farblich hervorherben

suchergebnisse-highlight-jquery

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

jquery-picture-figure-plugin-responsive

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