Javascript

Formulare

MagicSuggest für jQuery: Schicke Eingabefelder mit Mehrfachauswahl auf Basis von Bootstrap 3

16. Juli 2014
von
MagicSuggest für jQuery: Schicke Eingabefelder mit Mehrfachauswahl auf Basis von Bootstrap 3

Mit dem „<select>“-Element ist es ein Leichtes, Eingabefelder auszuzeichnen, bei denen mehrere Einträge ausgewählt werden können. Allerdings funktioniert das nur mit einigen Einschränkungen und sieht bei weitem nicht so ansprechend aus wie bei MagicSuggest. Statt Auswahllisten lassen sich mit dem jQuery-Plugin schicke Eingabefelder erstellen, die eine Mehrfachauswahl an freien und vorgegebenen Einträgen ermöglicht. Einfache Einbindung Da MagicSuggest jQuery voraussetzt, müssen Plug-in und jQuery gemeinsam...

Weiterlesen »

Audio

HTML5-Sprechstunde: Texte vorlesen lassen mit der Speech-Synthesis-API

10. Juli 2014
von
HTML5-Sprechstunde: Texte vorlesen lassen mit der Speech-Synthesis-API

Was Navigationsgeräte schon lange können, lernen jetzt auch die Browser: Sprachsynthese. Die neue Speech-Synthesis-API erlaubt es, Texte mit einer menschlichen Sprechstimme auszugeben. Dabei stehen Stimmen für mehrere Sprachen zur Verfügung – teilweise auch mehrere Stimmen pro Sprache. Per Knopfdruck können sich Ihre Besucher den Text eines HTML-Dokumentes einfach vorlesen lassen. Sprachen- und Stimmenvielfalt Die Anzahl der zur Verfügung stehenden Sprachen und Stimmen ist abhängig...

Weiterlesen »

Javascript

Responsives Webdesign: Per JavaScript auf die Veränderung der Fenstergröße reagieren

3. Juli 2014
von
Responsives Webdesign: Per JavaScript auf die Veränderung der Fenstergröße reagieren

Mit Media Queries ist es möglich, dynamisch auf Änderungen von Breite und Höhe des Anzeigebereichs des Browsers zu reagieren. Wird bei Desktopgeräten das Browserfenster verändert oder bei Mobilgeräten zwischen Portrait- und Landscape-Modus gewechselt, können per CSS und Media Queries direkt passende Stylesheets angewendet werden. Mit dem JavaScript-Tool Simple State Manager lässt sich das Verhalten der Media Queries auch per JavaScript regeln. Denn hin und...

Weiterlesen »

HTML

HTML5-Imports: HTML-Dateien in HTML-Dateien importieren

27. Juni 2014
von
HTML5-Imports: HTML-Dateien in HTML-Dateien importieren

Das „<link>“-Element ist ein Segen. Es ermöglicht das Einbinden von Stylesheet- und JavaScript-Dateien, die in mehreren Dokumenten benötigt werden. Allerdings war es bisher nicht möglich, darüber auch HTML-Dateien in ein Dokument zu laden. Wollte man diese einbinden, ging das bislang nur per „<iframes>“-Element oder über die JavaScript-Methode „XMLHttpRequest()“. Dank der neuen HTML5-Imports ist es jetzt auch möglich, HTML-Dateien per „<link>“ in ein anderes Dokument...

Weiterlesen »

Barrierefreiheit

SmartMenus für jQuery erstellt responsive und barrierefreie Menüs im Handumdrehen

24. Juni 2014
von
SmartMenus für jQuery erstellt responsive und barrierefreie Menüs im Handumdrehen

In Zeiten responsiver Websites ist die Gestaltung von Menüs eine besondere Herausforderung. Gerade bei umfangreichen und verschachtelten Menüs muss gewährleistet sein, dass sie auf Mobilgeräten übersichtlich und platzsparend dargestellt werden können. SmartMenus ist ein jQuery-Plugin für die Erstellung von responsiven und barrierefreien Menüs auf der Basis einer oder mehrerer Listen. So bauen Sie Menüs mit SmartMenus für jQuery Die HTML-Auszeichnung von Navigationsmenüs erfolgt in der...

Weiterlesen »

HTML

HTML5: Videos untertiteln mit dem neuen Track-Element

22. Juni 2014
von
HTML5: Videos untertiteln mit dem neuen Track-Element

Mit der Einführung der HTML5-Videos ist das Abspielen von Videos ganz ohne Plug-ins möglich. Doch HTML5-Videos bieten weit mehr, als Videos nativ im Browser darzustellen. Mit der Track-Funktion lassen sich auch Untertitel innerhalb von Videos einblenden. Diese werden in seiner separaten Textdatei abgelegt und können per Knopfdruck im Video ausgegeben werden. So machen Sie Videos für Hörgeschädigte und alle, die gerade keine Lautsprecher zur...

Weiterlesen »

Animationen

Demnächst auf Ihrem Bildschirm: CSS3-Animations mit der neuen JavaScript-Methode animate()

9. Juni 2014
von
Demnächst auf Ihrem Bildschirm: CSS3-Animations mit der neuen JavaScript-Methode animate()

Seit CSS3 sind Animationen in HTML-Dokumenten kein Problem mehr. Mit der „@keyframes“-Regel werden verschiedene Eigenschaften wie Position oder Größe eines HTML-Elementes definiert. Die dazugehörige „animation“-Eigenschaft sorgt dafür, dass die in den Keyframes festgelegten Eigenschaften in Bewegung geraten. Ganz ohne JavaScript und Plug-ins erstellen Sie so auch durchaus komplexe Animationen, die in allen modernen Browsern problemlos laufen. Problematisch wird es, wenn JavaScript ins Spiel kommen...

Weiterlesen »

Javascript

Adobes Snap.svg: Animationen mit HTML 5 und ohne Flash

2. April 2014
von
Adobes Snap.svg: Animationen mit HTML 5 und ohne Flash

Flash war lange Zeit der Standard für vektorbasierte Animationen im Web. Mit dem Aufkommen mobiler Endgeräte wurde Flash immer mehr von HTML5 und CSS3 verdrängt. Dank des SVG-Formates, welches mittlerweile von allen modernen Browsern unterstützt wird, können vektorbasierte Grafiken ohne Plug-in im Browser dargestellt werden. Mit der JavaScript-Bibliothek Snap.svg aus dem Hause Adobe ist es zudem möglich, Animationen mit SVG-Grafiken zu erstellen. Bestehende SVG-Grafiken...

Weiterlesen »

CSS

Powerange und Switchery: HTML5 für Schalter und Slider im Flat Design

18. März 2014
von
Powerange und Switchery: HTML5 für Schalter und Slider im Flat Design

Alexander Petkov macht mit zwei unter der MIT-Lizenz frei nutzbaren HTML5-Komponenten auf sich aufmerksam. Powerange erlaubt die Erstellung schicker Slider im von iOS7 inspirierten Flat Design und mit Switchery baut man dazu passende Schalter. Beide Komponenten funktionieren als Kombination von CSS und JavaScript ohne weitere Abhängigkeiten und laufen in allen modernen Browsern, sogar im Internet Explorer (Switchery 8+, Powerange 9+). Man muss kein Fan...

Weiterlesen »

Javascript

Unausweichlich: 10 aktuelle JavaScript-Lösungen, an denen ich nicht vorbeikam

12. März 2014
von
Unausweichlich: 10 aktuelle JavaScript-Lösungen, an denen ich nicht vorbeikam

Haben Sie schon “You might not need jQuery” gelesen? Diese Site hat bekanntlich in den letzten Wochen einige Wellen geschlagen. Grundtenor der Aussage ist, dass man sich besser damit beschäftigen sollte, die Fähigkeiten moderner Browser direkt aka standardkonform anzusprechen, anstatt sich auf jQuery zu verlassen, um damit im Grunde dasselbe Ergebnis zu erzielen. Ich finde den Ansatz zwar nachvollziehbar und ansprechend, aber. Welcher Developer...

Weiterlesen »