JQuery

Linktipp: jQuery Plugin to recognize text changes in input fields / textareas delayed as alternative to .change() or oninput event.

jQuery by default provides the onchange event: .change(). It is being triggered, if a value was changed. WAS is the right word, because for example in input fields, the event only triggers when the field loses focus.

Linktipp: 20 supercoole jQuery Drag & Drop / Graph Bibliotheken

Mein heutiger Linktipp beinhaltet einen Blogeintrag zu 20 super super coolen JavaScript Drag & Drop sowie Graph-Animations-Bibliotheken.

Möchtet ihr also hierarchische Graphen darstellen, eine leichtgewichtige (sogar mobile) Drag & Drop Anwendung erstellen, müsst ihr euch diese Bibliotheken unbedingt ansehen! HAMMER!

Ein riesen Lob an die Entwickler oder was sagt ihr?

Drupal 7 CMS Flexslider API add a {Current slide} / {Total slide} pager / counter display via jQuery

Today I'll show you how you can easily display a CURRENT / TOTAL count to your flexslider in Drupal 7 using the flexslider.module and some custom JavaScript.

Just use the following code and modify it to your needs before:

  1. function _flexslider_show_pager() {
  2.   (function($) {
  3.     jQuery('#flexslider-1').on('start', function(event) {

Linktipp: jQuery UI Touch Punch - Touch-Mobilgeräteunterstützung für jQuery UI

Heute ein kleiner Linktipp zu einem Projekt, welches sich zum Ziel gesetzt hat, jQuery UI Elemente auf Mobilgeräten besser nutzbar zu machen!

iPad / iPhone und das jQuery .click event

iPad (und wohl auch iPhone) haben eine fiese Besonderheit im Event-Triggering gegenüber Android Devices und Mac / PC. Sie triggern KEIN 'click'-Event auf (bestimmten - dazu später mehr) Elementen! Das ist gemein, da beispielsweise responsive Websites, welche diese Events nutzen, zwar auf allen anderen Geräten funktionieren, aber nicht auf den oben genannten. Hier muss man also noch einmal besonders aufpassen!

jQuery AJAX Race Conditions verhindern und AJAX Aufrufe pipe'n mit jQuery.Deferred() in 5 Zeilen!

Die kleine Denkaufgabe des Tages: Wie schafft man es in möglichst wenig Zeilen eine Reihe von AJAX-Aufrufen, die anhand einer Schleife erzeugt werden, mit einer Pipe sequenziell abzuarbeiten?

Die Lösung:

  1. // A list of arguments for separate sequential AJAX calls.
  2. // First argument for first call, second for second call, etc.
  3. var callsArguments = new Array();

jQuery Plugins schreiben: $.widget und die Sache läuft!

Ihr möchtet ein individuelles jQuery JavaScript Plugin schreiben, das auf DOM Elemente Anwendung findet und sich verhält, wie man es von jQuery positiv gewohnt ist?

Keine einfache Sache, wenn man alles selbst - und richtig - machen will. Erstklassige Unterstützung bietet $.widget mit seiner vordefinierten Funktionalität.

JQuery UI Tabs dynamisch per URL-Anker umschalten

Ihr möchtet jQuery UI Tabs dynamisch anhand der URL "vorauswählen"? Das ist möglich und zudem in vielen Fällen äußerst hilfreich, um "Deeplinks" umsetzen zu können, also Besucher direkt auf den Ziel-Tab zu leiten.

Lautet die URL also zum Beispiel
http://www.example.com steuert Ihr die Tabs an per:
http://www.example.com#tab-1
http://www.example.com#tab-2 usw.

Text Scroller (Lauftext) mit <marquee> und jQuery! Grandios

Ihr braucht einen Text-Scroller, aber <marquee> ist bekanntlich nicht X-Browser kompatibel und bereits in die Jahre gekommen!?

Hier gibt es eine erstklassige Lösung, um <marquee> auf alle Browser zu erweitern, mit zusätzlichen Events zu versehen und Einstellungen zu vereinheitlichen!

jQuery Plugin-Entwicklungs Vorlage (Boilerplate)

JavaScript Entwicklung wird immer beliebter. Ebenso entwickeln sich zahlreiche best-practices und Patterns.

Gerade bei der Entwicklung von Plugins sollte man sich auf etablierte Techniken verlassen, um das Rad nicht neu zu erfinden.

Die folgenden zwei Boilerplates sind hier ein guter Start. Darüber hinaus gibt es natürlich tausend weitere.