JQuery

Phonegap / Drupalgap / jQuery Mobile: Use "pageinit pageshow" events together to ensure functionality

Today I have an important note for you that cost me a lot of time and debugging my Drupalgap / Phonegap App using jQuery Mobile.

Drupal 7 set JavaScript / jQuery trigger on autocomplete field option

With this little snippet you can easily set a trigger on autocomplete field options (suggestions) click:

  1. $(document).on('click', 'div.reference-autocomplete', function(e) {
  2.   // Do what you need to do ;)
  3. });

It's not that easy because the selection click does not trigger any change event on the parent input.

Linktipp: jQuery Plugin für eine interaktive Weltkarte: jvectormap.com

Linktipp: jQuery Plugin für eine interaktive Weltkarte: jvectormap.com

Mein heutiger Linktipp beinhaltet ein klasse jQuery Plugin zur Darstellung einer interaktiven Weltkarte mittel SVG.

Die Karte ist somit ein erstklassiger Ersatz für die uralte "ImageMap"-Technik und z.B. klasse geeignet für Standortkarten auf Unternehmenspräsentationen.

Linktipp: Drupal JavaScript Behaviours

Mein heutiger Linktipp dreht sich um JavaScript in Drupal. Genauer gesagt: Drupal.behaviours. Da dieses Thema immer wieder auf den Tisch kommt und häufiger zu Fragen führt, möchte ich den nachfolgenden Artikel zum Thema empfehlen.

Er bietet einen schnellen Einstieg und erläutert fast alles, was man wissen muss. Von attach() bis .once() gibt es ein paar schöne Dinge zu lernen :)

jQuery Plugin: headroom.js blendet den Kopfbereich beim Hochscrollen wieder ein

Diese Funktion ist bereits aus einigen Apps und insbesondere sozialen Netzwerken bekannt: Wenn ihr Euch schon weit unten auf einer Website befindet, wird beim Hochscrollen sofort die Navigation am Seitenkopf angezeigt, ohne dass ihr ganz nach oben scrollen müsst!

Eine praktische Usability-Hilfe, gerade bei sehr langen Seiten!

jQuery Plugin: Lazy Youtube Video Loader - Videos mit Vorschaubild zeigen und erst beim Abspielen vollständig laden!

YouTube Videos werden immer häufiger in Web-Artikel und Landingpages eingebaut. Häufig möchte man dabei jedoch zunächst ein Titelbild aus dem Video als Vorschau laden und erst später, wenn der Film nach Klick beginnt, das volle Video laden.

jQuery URLLive Plugin - Live-Vorschau eingegebener URL-Inhalte

Dieses jQuery Plugin zeigt eine Live-Vorschau der z.B. von Benutzern in einer Textarea oder einem Input-Feld eingegebenen URLs, wie man es von großen sozialen Netzwerken kennt.

jQuery Plugin: jQuery Collapser - Texte mit jQuery einfach auf Anrisstextlänge kürzen

Dieses jQuery Plugin kürzt Texte auf eine festgelegte Länge (Anrisstext), sodass man sie bei Bedarf schnell wieder ausklappen kann, ohne die Seite neu zu laden.

Ohne JavaScript wird einfach der gesamte Text angezeigt.

jQuery Plugin: EasyTree - Ordner Baumstrukturen mit jQuery darstellen

Dieses jQuery Plugin stellt aufklappbare Baumstrukturen aus HTML-Listen in Ordnerstruktur dar.

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.