Kategorien
JavaScript & jQuery Programmierung Webdesign

Framework jQuery: die Vorteile und Nachteile

Frameworks wie jQuery gehören zu den bekanntesten und weit verbreitetsten Helfer, die auf Websites eingesetzt werden. Das Framework ermöglicht es, schnell und unkompliziert auf HTML-Elemente zuzugreifen und diese zu manipulieren oder per CSS zu gestalten. Ich selbst bin kein großer Freund von solchen Frameworks und versuche, sie – wo immer es geht – zu vermeiden. Das funktioniert nicht immer, ist aber häufig problemlos machbar.

jQuery und Co. und der große Ballast

Gerade jQuery hat sich in den letzten Jahren zu einer Art Schweizer Taschenmesser für JavaScript entwickelt. Das Frameworks bietet unzählige Methoden, Eigenschaften und Ereignisse, von denen die Meisten wohl nur ein Bruchteil benötigen.

Auch wenn jQuery in der aktuellen komprimierten Fassung auf gerade einmal 85 Kilobyte kommt, bliebe ein Großteil des Frameworks in meinen Projekten ungenutzt. Man kann es kleinlich nennen, dass mir 85 Kilobyte solch Kopfzerbrechen bereiten. Aber als Webentwickler ist mir ein schlanker Code, der nur das beinhaltet, was auch tatsächlich gebraucht wird, wichtig.

Jetzt ist jQuery mittlerweile zu einer Art Standard in der Webentwicklung geworden. Daher sind viele andere Frameworks mittlerweile als Plugins für jQuery entwickelt. Will ich diese nutzen, muss ich auch jQuery nutzen. Hier zeigt sich im besonderen Maße, was solche Frameworks für Nachteile mit sich bringen.

Denn letztlich benötige ich jQuery dann nur, um das Plugin nutzen zu können. Da sind mir 85 Kilobyte dann in der Tat zu viel.

Doppelt gemoppelt: Was jQuery kann, kann JavaScript oft auch

Mit der Einführung von HTML5 hat auch JavaScript einen großen Sprung gemacht. Viele Funktionen, die bislang nur per jQuery möglich waren, sind nun auch ebenso einfach als native JavaScript-Methoden vorhanden.

Das gilt zum Beispiel für das Hinzufügen und Entfernen von JavaScript-Klassen. Mit der „classList“-API kannst du dies ähnlich wie in jQuery realisieren.

Eine der wichtigsten Funktionen in jQuery ist die Möglichkeit, per „$()“ auf beliebige Elemente zuzugreifen – und zwar in Anlehnung an CSS-Selektoren. Selbst dieses Alleinstellungsmerkmal von jQuery ist mittlerweile mit der Methode „querySelector()“ in JavaScript aufgegriffen worden.

document.querySelector("ol li").classList.add("new");

Im Beispiel wird allen „<li>“-Elementen, die Kinder eines „<ol>“-Elementes sind, die Klasse „new“ zugewiesen. In jQuery ist ein entsprechender Aufruf kaum kürzer – vor allem aber nicht weniger kompliziert.

$("ol li").addClass("new");

In vielen Fällen benötige ich jQuery also gar nicht, sondern kann mit JavaScript auf ähnlich einfachem Wege arbeiten.

Performance vs. Einfachheit

jQuery und seine weniger bekannten Freunde machen es einem in vielen Fällen sehr viel einfacher, mit JavaScript zu arbeiten. Aber nicht immer ist der einfach Weg auch der Beste – gerade wenn es um die Performance geht.

Denn sowohl die jQuery-Methode „$()“ als auch die JavaScript-Methode „querySelector()“ schneiden in Sachen Performance schlechter ab als die Methoden „getElementsByTagName()“ oder „getElementsByID()“. Denn bei „$()“ und „querySelector()“ wird zunächst der komplette DOM-Baum eines Dokumentes nach entsprechenden zutreffenden Elementen durchsucht.

Die beiden Methoden „getElementsByTagName()“ oder „getElementsByID()“ kommen deutlich schneller ans Ziel. Natürlich sind die letztgenannten Methoden für Entwickler zuweilen mit mehr Aufwand verbunden. Auch hier mag der geringe Unterschied bei der Performance vernachlässigbar sein. Man sollte sich dessen jedoch bewusst sein.

Vorteil: einheitliche Browser-Kompatibilität

Jetzt will ich natürlich auch nicht so tun, als sei jQuery durch und durch überflüssig. Denn es hat ja seinen Grund, warum es immer noch sehr erfolgreich und beliebt ist. Ein Vorteil ist natürlich die einfache Anwendung.

Darüber hinaus haben solche Frameworks natürlich den Vorteil, dass sie eine breite Browser-Kompatibilität mit sich bringen. Während ich bei nativen Methoden immer schauen muss, welcher Browser ab welcher Version sie unterstützt, macht jQuery mir das einfacher.

Denn für jede jQuery-Version weiß ich, welche Browser und Versionen unterstützt werden. Gerade wer für ältere Versionen des Internet Explorers entwickelt, hat mit jQuery in der aktuellen Version die Sicherheit, dass dieser ab Version 9 unterstützt wird.

Und wer ältere Browser noch unterstützen möchte, kann auf ältere Versionen von jQuery zurückgreifen. Das erleichtert die Entwicklung von Websites, da man schon im Vorfeld weiß, welche Browser denn mit an Bord sind.

Frameworks fürs Spezielle

Jetzt bin ich also jemand, der – wenn immer es möglich und sinnvoll ist – auf Frameworks verzichtet. Möglich ist es eigentlich immer. Denn grundsätzlich kann man ja alles selbst in JavaScript programmieren. Nur sinnvoll ist es natürlich nicht immer.

Es gibt natürlich Situationen, in denen der Aufwand, eine komplexe JavaScript-Programmierung selbst zu entwickeln, in keiner Relation zum Ergebnis steht. Wer mit JavaScript zum Beispiel 3D-Animationen erstellen möchte, kann sich natürlich selbst sein eigenes 3D-Framework bauen.

Hier ist es hingegen mehr als sinnvoll, auf ein stabiles und möglichst leichtes Framework zurückzugreifen. In solchen Fällen ist es mir aber immer wichtig, dass dieses Framework nicht auf andere Frameworks wie jQuery aufbaut, sondern unabhängig verwendet werden kann.

Fazit

Natürlich ist die Frage, ob man auf Frameworks setzt oder nicht, durchaus eine ideologische. Denn der Gewinn an Schnelligkeit ist in vielen Fällen marginal. Aber man sollte als Entwickler nicht aus bloßer Bequemlichkeit auf jQuery und Co. zurückgreifen.

Denn natives JavaScript kann häufig all das, was jQuery kann, selbst auch abdecken. Gerade wer für zeitgemäße Browser entwickelt und die Abwärtskompatibilität eh in Grenzen hält, kommt gut ohne dieses Framework aus.

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

Magic.css: CSS3 Animations mit Spezialeffekten

Seit Juli letzten Jahres arbeitet Christian Pucci aka miniMac an seinem Stylesheet mit Spezialeffekten auf Basis von CSS3 Animations. Konnte er zum Start lediglich eine Handvoll vorweisen, bringt es seine Sammlung mittlerweile auf stattliche 55 Effekte, die komplett geprefixed in allen modernen Browsern funktionieren. Das Projekt steht unter MIT-Lizenz, kann also frei verwendet werden.

magic-demo-site

Magic.css: Viel Bewegung auf der Website

CSS3 Animations sind im Kommen, aber noch nicht so weit verbreitet, wie man glauben könnte. Vor einigen Tagen erst stellten wir hier bei Dr. Web einen leicht verständlichen Pocket-Guide für Einsteiger in CSS3 Animations vor. Christian Pucci aus Italien, auf Github und auch sonst im Web unter dem Pseudonym miniMac unterwegs, erleichtert den Einsatz mit seinem stetig wachsenden Stylesheet Magic.css ganz ordentlich.

Von einem halben Dutzend Effekte im Juli 2013 steigerte er den Umfang auf 55 Effekte im Mai 2014. Neben den eigentlichen Effekten lässt sich noch die Zeitdauer der Ausführung, respektive bis zur Ausführung steuern. Die eigentlichen Effekte setzt man dann am einfachsten per JavaScript, also etwa mit jQuery um.

Auf der Demoseite zum Projekt können Sie alle verfügbaren Effekte ausprobieren, wenn auch die Umsetzung der Demo nur wenig beeindruckt. Ein roter Diamant wird auf die unterschiedlichen Weisen in das umgebende Quadrat hinein- oder hinausbewegt. Da hätte man sich etwas spannenderes vorstellen können. Sei’s drum, das Prinzip wird jedenfalls klar.

magic-einzeldemo
Magic.css Demo: Rechts den Effekt klicken, links den Diamanten in Bewegung sehen

Magic.css: weitere Effekte in Arbeit

Christian schraubt aktuell intensiv an dem Repository. Man wird wohl in Kürze mit weiteren Effekten rechnen dürfen. Das Stylesheet enthält alle Definitionen mit den erforderlichen Prefixes für alle modernen Browser, während die Demoseite selber zuverlässig nur im Chrome und Safari funktioniert.

Derzeit arbeitet Christian an der minifizierten Version, um die knapp 100 kb des Stylesheets nach unten zu drücken. Die minifizierte Datei liegt zwar schon im Repository, ist aber noch leer.

Magic.css vereinfacht die Anwendung von CSS3 Animations deutlich und gehört auf jeden Fall in Ihre Bookmark-Sammlung.

Links zum Beitrag

Kategorien
JavaScript & jQuery Programmierung

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 kann schon sicher sagen, welcher Browser nicht für die Nutzung der Seite verwendet werden wird? Ich tue mich schwer, jQuery zu verbannen, bin jedoch von jeher auch stets den JavaScript-Lösungen zugetan, die eben nicht auf dem Framework (oder einem anderen) basieren. Derzeit würde ich nicht empfehlen, sich auf pures CSS zu verlassen, selbst wenn es theoretisch machbar erscheint. Ohne JavaScript kommt man ohnehin nicht aus, also wieso sollte es man nicht zusätzlich da nutzen, wo es sinnvoll ist? Die folgenden Scripts haben mich in letzter Zeit besonders überzeugt…

JavaScript: Wieso denn nicht?

Die Verwendung von JavaScript ist nicht nur da sinnvoll, wo es keine anderen guten Optionen gibt. Die Verwendung von JavaScript, so wie ich sie verstehe, is schon da sinnvoll, wo andere Lösungen komplexer sind, mehr Codezeilen benötigen oder in anderer Weise hinter JavaScript zurückfallen. Bevor ich mir die Pfoten an 10 Zeilen Prefixed Code breche, nehme ich ein gutes JavaScript. Die meisten Projekte, an denen ich (mit)arbeite, setzen ohnehin auf jQuery, insofern stellt sich die Frage nach der Nutzung bereits vorhandener Funktionalität zumeist gar nicht erst. Einige meiner kleineren Projekte verzichten zwar auf jQuery, nutzen aber JavaScript auf die ein oder andere Art. Auch da gibt es also keinen Grund, auf JavaScript zu verzichten, selbst wenn ich es könnte.

Bevor ich noch den Eindruck erwecke, hier missionieren zu wollen, lassen Sie sich von den folgenden Tools überzeugen. Links zu Demo und Repository finden Sie unterhalb des Beitrags im Abschnitt "Links zum Artikel":

ProgressJS

progressjs-w550

ProgressJS ist eine JavaScript- und CSS3-Bibliothek zur Erstellung und Verwaltung von optisch sehr ansprechenden Fortschrittsbalken für beliebige Objekte innerhalb einer Seite. Afshin Mehrabani aus Teheran veröffentlichte das Tool Mitte Februar 2014. Es befindet sich noch im frühen Beta-Stadium.

Die Verwendung ist einfach. ProgressJS kann für die ganze Seite eingesetzt werden. In diesem Modus zeigt das Script einen Fortschrittsbalken am oberen Ende des sichtbaren Browserfensters. Nachdem Sie ProgressJS und das zugehörige CSS eingebaut haben, aktivieren Sie das Tool für diesen Anwednungszweck so:

progressJs().start();

Soll ProgressJS nur ein spezielles Element behandeln, sieht der Call etwas anders aus:

progressJs("#targetElement").start();

Schauen Sie sich die Demo an und laden das Script von Github herunter. ProgressJS steht unter MIT-Lizenz und ist daher kostenfrei privat, wie kommerziell verwendbar.

WOW.js

wowjs-w550

Wow.js versteckt HTML-Elemente bis sie den Viewport erreichen. Warum Sie das wollen sollten? Nun, es bringt etwas Leben in Ihre ansonsten sehr statischen Webseiten.

Um Animationen zu verwenden, setzt Wow.js auf separate CSS Animations-Bibliotheken. Im Standard wird Animate.css verwendet. Sie können eine Bibliothek Ihrer Wahl verwenden, indem Sie den entsprechenden Embed-Link ändern.

Nachdem Sie Wow.js eingebettet und wie folgt initialisiert haben,


ist es betriebsbereit und wartet auf Elemente, die mit der Klasse wow ausgestattet sind. Diese Elemente werden von nun an unsichtbar gehalten, bis der Benutzer weit genug gescrollt hat, dass sie eigentlich sichtbar sein müssten. Sobald das passiert, werden die Elemente sichtbar gemacht.

Damit das dann auch dem Auge schmeichelt, können Sie verschiedene Animationen auf das Element loslassen:

Mein toller Inhalt wird jetzt sichtbar

Wow.js wurde ersonnen vom bekannten Vincent LeMoign aka Webalys und geschrieben von Matthieu Aussaguel. Es steht ebenfalls zur kostenfreien privaten und kommerziellen Nutzung unter der MIT-Lizenz zur Verfügung.

Dug.js

dugjs-w550

Rogie King aus dem amerikanischen Montana suchte einen Weg, sein Dribbble-Portfolio auf seiner eigenen Webseite zu zeigen. Er fand heraus, dass Dribbble JSONP-kompatible Feeds anbietet und ersann daraufhin Dug.js. Dieses kleine JavaScript ist in der Lage, beliebige JSONP-Feeds auszulesen und ansprechend aufbereitet anzuzeigen.

Alles, was Sie benötigen, ist eine JSONP-kompatible API und ein HTML-Template für die Anzeige. 500px, Instagram, Pinterest, Dribbble (offensichtlich), Github – alle bieten JSONP. Mit Dug.js erstellen Sie nun auf einfache Weise einen Output des Feeds für Ihre Seite, etwa so:

Weitere Parameter zur verfeinerten Steuerung stehen bereit. Auch Dug.js steht kostenfrei zur Verfügung. Hier gilt sogar die erstaunliche WTFPL (do What The Fuck you want to Public License). Hmm ;-)

Zoomerang.js

zoomerangjs-w550

Evan You, der Macher von Zoomerang, lebt in New York und arbeitet für Google. Zoomerang.js fokussiert sich auf eine einzige Aufgabe, tut das jedoch besonders gut. Das JavaScript erlaubt es Ihnen, beliebige Elemente auf Ihrer Seite ein- und wieder auszuzoomen. Dabei ist es egal, um was für eine Art Element es sich handelt, sei es ein Bild, ein Text oder was auch immer. Dabei bleibt die eigentliche Seite scrollbar. Ein- und Auszoomen funktioniert nach dem Schalter-Prinzip, ein Klick auf ein Element zoomt ein, ein erneuter Klick zoomt wieder aus.

Zoomerang.js steht zum Download auf Github bereit und kann kostenfrei privat und kommerziell unter den Bedingungen der MIT-Lizenz genutzt werden.

Placeholdem

placeholdem-w550

Der Webentwickler Jack Rugile aus Denver im amerikanischen Colorado wollte, dass Platzhalter in Eingabefeldern nicht nur verschwinden, sobald der Focus auf dem Eingabefeld liegt, sondern auch wieder sichtbar werden on Blur. Zudem wollte er nicht nur ein simples Ausblenden und Einblenden, sondern legte Wert auf ein inkrementelles Löschen und Zurückschreiben. Und genau das tut Placeholdem.

Fügen Sie einen Platzhalter zu einem Eingabefeld oder einer Textarea hinzu:

Dann lassen Sie Placeholdem auf alle Elemente mit Platzhaltern los:

Placeholdem( document.querySelectorAll( '[placeholder]' ) );

Das ist schon alles. Placeholdem kann kostenlos privat und kommerziell genutzt werden. Es gelten die Bedingungen der MIT-Lizenz.

scrollReveal.js

scrollrevealjs-w550

scrollReveal.js von Julian Lloyd aus dem sonnigen Kalifornien ist derzeit eher ein Experiment, denn eine robuste Lösung. Dennoch, was man sieht, ist durchaus viel versprechend. scrollReveal animiert Elemente beim Eintritt in den Viewport. Uninteressant? Schauen Sie sich die Demo an.

Worin sich scrollReveal.js von anderen ähnlichen Lösungen absetzt, sind die weichen Animationen, die noch dazu natürlich-sprachlich definiert werden. Hier ist ein Beispiel:

Foo
Bar
Baz

Wollen Sie nicht jedesmal auf’s neue längere Definitionen verfassen, können Sie per var config Animationen vordefinieren.

Auch scrollReveal steht unter der MIT-Lizenz und kann daher frei privat und kommerziell eingestezt werden. Das Projekt wurde inspiriert durch Codrops cbpScroller.js.

Tether

tether-w550

Tether ist eine ausgewachsene Funktionsbibliothek, die es Ihnen ermöglicht, Elemente an andere Elemente zu flanschen. Das klingt erst einmal simpel. Dabei ist Tether ein sehr durchdachtes, funktionsreiches Tool, dem man die Hirnkraft ansieht, die in es geflossen ist.

Um Elemente miteinander zu verbinden definieren Sie Punkte auf beiden Elementen. Das Element, mit dem ein anderes verbunden werden soll, nennt sich Target. Tether sorgt nun dafür, dass die beiden definierten Punkte übereinander gehalten werden. Die Definition der Punkte erfolgt natürlich-sprachlich. Hier ist ein Beispiel:

new Tether({
  element: yellowBox,
  target: greenBox,
  attachment: 'top right',
  targetAttachment: 'top left'
});

Tether wird erstellt und erweitert von HubSpot aus Cambridge und kann als Open Source frei verwendet werden. Schauen Sie auf jeden Fall in HubSpots Github-Repository. Dort gibt es eine ganze Reihe interessanter Projekte, teilweise auf Tether basierend.

imagesLoaded

imagesloaded-w550

imagesLoaded ist ein leichtgewichtiges Toll für einen einzelnen Zweck. Es gibt ein Event aus, wenn Bilder geladen wurden. Dieses Event kann man dann auslesen und programmlogisch darauf reagieren. Erkennt imagesLoaded die Verfügbarkeit von jQuery, arbeitet es als Plugin. Wenn nicht, arbeitet es allein.

imagesLoaded wird entwickelt von Tomas Sardyha und David DeSandro. Das Tool steht unter MIT-Lizenz kostenfrei zur Verwendung bereit.

simpleCart(js)

simplecartjs-w550

Mit simpleCart.js bauen Sie auf einfachste Weise Warenkorbfunktionalität in beliebige Websites ein. Wenn Sie wissen, wie man Klassen an HTMl-Elemente anfügt und JavaScript in HTML-Dokumente einbettet, dann hält Sie kaum noch etwas vom Verkaufen Ihrer Produkte über die eigene Website ab. Nun müssen Sie sich noch auf die vorgegebenen Zahlungsprovider Amazon Payments, Google Checkout oder Paypal einlassen können und schon kann’s losgehen. Ein E-Mail-Checkout ist in Arbeit, aber noch nicht fertig.

Der Einbau eines Warenkorbs mit simpleCart.js ist, wie der Name vermuten lässt, simpel. Um die Funktionalität verfügbar zu machen, reicht folgender Aufruf:


Nun müssen Sie noch Produkte hinzufügen, die zum Verkauf stehen. Definieren Sie beliebig viele sog. Shelf-Items auf die folgende Weise:

Awesome T-shirt

$35.99 Add to Cart

Nachdem alles, was der Besucher sieht, von Ihnen geschrieben wird, kann simpleCart.js entsprechend international verwendet werden. Steuern und Währungen passen Sie im Rahmen des Funktionsaufrufes an.

simpleCart.js wird entwickelt von Wojo Design aus dem amerikanischen Chicago. Es ist mit einer Doppellizenz (MIT und GPL) ausgestattet und kann kostenfrei für private und kommerzielle Projekte verwendet werden.

Sticker.js

stickerjs-w550

Sticker.js von Jongmin Kim aus New York ist keine reine JavaScript-LÖsung, sondern verlässt sich zusätzlich auf CSS3. Dadurch ist es beschränkt auf die Verwendung in modernen Browsern. Der IE wird ab Version 10 unterstützt.

Um zu verstehen, was Sticker.js leistet, empfiehlt sich ein Blick auf die Demo. Mit Sticker.js animierte Elemente verhalten sich wie Aufkleber, die man von verschiedenen Seiten abziehen und wieder anpappen kann. Das Ziehen und Pappen erfolgt beim Hovern mit der Maus über dem Element. Die Optik wird mittels CSS kontrolliert und das JavaScript kann mit Klassen und IDs gleichermaßen umgehen.

Das ist eine Grundkonfiguration:

 
    

Nun fügen wir ein Bild oder eine Hintergrundfarbe hinzu:

    .sticker {
        width: 180px;
        height: 180px;
    }

    // add image
    .example-1 .sticker-img {
        background-image: url(heroes-2.png);
    }

    // add color
    .example-2 .sticker-img {
        background-color: #ff4a85;
    }

    // change shadow opacity
    .example-2 .sticker-shadow {
        opacity: 0.6;
    }

Und dann lassen wir die Methode drauf los:

Sticker.init('.sticker');

Sticker.js steht ebenfalls unter der MIT-Lizenz. Es ist dementsprechend kostenlos, sowohl privat, wie auch kommerziell nutzbar.

Links zum Artikel:

Kategorien
JavaScript & jQuery Programmierung

Stets passend: Adaptive Backgrounds für jQuery färbt Websites automatisch ein

Dieses jQuery-Plugin ist ein Knüller. Adaptive Backgrounds von Brian Gonzalez analysiert eingebundene Bilder hinsichtlich der verwendeten Farben, bestimmt die jeweils dominante und färbt den Hintergrund des das Bild enthaltenden Elements automatisch in eben dieser Farbe ein. Da Adaptive Backgrounds sich stets auf das Eltern-Element auswirkt, sind beliebig viele verschiedene Hintergründe auf der gleichen Seite möglich. Die Effekte sind beeindruckend.

adaptive_backgrounds_LP

Adaptive Backgrounds für jQuery: Harmonische Farbpalette vollautomatisch

Wer Adaptive Background einsetzt, erhält eine Art Ambi-Light für Websites. Ambi-Light, wenn ich mich recht erinnere von Philips, ist eine in der Farbe variierende Beleuchtung, die hinter dem Fernseher die Wand bestrahlt. Die Farbe wird jeweils aus dem Fernsehbild extrahiert. Das soll das Seherlebnis steigern. Bislang konnte mich das Konzept am Fernseher eher nicht überzeugen.

Ganz anders sieht das auf Websites aus, wobei es natürlich hier ganz auf das Projekt ankommt. Mit Adaptive Backgrounds können Sie Hintergrundfarben automatisch aus den verwendeten Bildern ziehen und anzeigen lassen. Die Demoseite zum Plugin ist ein schönes Beispiel dafür, wie ausgesprochen ansprechend so etwas aussehen kann.

adaptive_backgrounds_EXPL
Adaptive Backgrounds extrahiert korrekt den Grünton aus dem Bild und wendet ihn auf den Hintergrund an

Dabei ist der Einsatz absolut simpel. Haben Sie jQuery und das Script in Ihr Projekt eingebunden, starten Sie es so:

$(document).ready(function(){
  $.adaptiveBackground.run()
});

Von jetzt an schaut das Script nach Bildern, die mit dem Data-Attribut data-adaptive-background ausgestattet sind. Das Data-Attribut wird an das IMG-Tag gehängt:


Über eine Variable, etwa defaults kann das Verhalten des Plugins näher gesteuert werden. Das ist immer dann erforderlich, wenn man etwa nicht das direkte Eltern-Element in der Hierarchie ansprechen will oder wenn bestimmte Textfarben beibehalten werden sollen. Die Variable wird dann dem Run-Befehl angehängt:

$.adaptiveBackground.run(defaults)

Da das Plugin mit canvas und ImageData arbeitet, kann es ohne weiteres nur Bilder verarbeiten, die auf der aufrufenden Domain gehostet sind. Zusätzlich zur Behandlung von IMG-Tags ist Adaptive Backgrounds über das zusätzliche Data-Attribut data-ab-css-background auch in der Lage, per CSS eingesteuerte Hintergrundbilder zu verarbeiten. Das sieht etwa so aus:

Bilder, die nicht ihre jeweiligen Eltern-Elemente verfärben sollen, stattet man schlicht nicht mit dem Data-Attribut aus. Einfacher geht es nicht, wie ich finde.

Links zum Beitrag

  • Adaptive Backgrounds | Demo
  • Adaptive Backgrounds | Github
Kategorien
JavaScript & jQuery Programmierung Webdesign

Wallpaper für jQuery erlaubt die Einbindung von Bild- und Video-Hintergründen auf einfachste Weise

Wie es so geht. Kunde X braucht schnell mal eben eine Landing Page mit einem das Browserfenster ausfüllenden Bildhintergrund. Was ist die schnellste Variante? Auf der Suche stolpere ich über das erst wenige Tage alte jQuery-Plugin Wallpaper von Ben Plum, womit die Umsetzung des Kundenwunsches letztlich in zehn Minuten erledigt ist. Die Möglichkeit, den Bild-Hintergrund auch durch ein Video ersetzen zu können, wurde auf Kundenseite mit Interesse zur Kenntnis genommen…

formstone-landing

Wallpaper, Teil der Formstone-Bibliothek

Wallpaper ist das jüngste jQuery-Plugin aus der Werkstatt des Ben Plum, seines Zeichens Front-End-Entwickler aus Hampden in Baltimore, gelegen im US-Bundesstaat Maryland. Plum fügte Wallpaper jüngst seiner stetig wachsenden Komponenten-Sammlung namens Formstone zu. Formstone vereinigt mittlerweile 12 jQuery-Plugins, die unterschiedliche Aufgaben erledigen, aber alle mit dem Fokus auf einfache Implementierung und Anpassbarkeit ersonnen wurden. Alle Teile der Formstone-Sammlung stehen kostenfrei unter MIT-Lizenz zur privaten, wie kommerziellen Nutzung zur Verfügung. Alle Elemente werden individuell gepflegt und basieren nicht aufeinander. So ist man nicht etwa verpflichtet, die ganze Sammlung einzubinden, bloß um ein Element daraus zu verwenden.

Formstone-Komponenten werden mit dem Mobile-First-Ansatz entwickelt und sind dementsprechend sämtlich voll responsiv. Die Verwendung von Namespaces sorgt dafür, dass sich die Komponenten nicht mit Ihrem Code im übrigen ins Gehege geraten. Formstones Einzelteile sind jeweils mit Grunt kompiliert, liegen minifiziert vor, können optional mittels Bower installiert werden und funktionieren in allen modernen Browsern.

Einbau eines Wallpaper: Schneller geht es nicht

So schnell ist ein element-füllender Hintergrund gesetzt. Zunächst binden wir Wallpaper ein:


Dann definieren wir die Funktion

$("#element").wallpaper({
	source: "speicherort/bildhintergrund.jpg"
});

und bestimmen den Container:

Nun wird der Container mit dem angegebenen Bild komplett gefüllt. In der Demo sieht das zum Beispiel so aus:

formstone-wallpaper

Fertig! Schnell genug?

In ähnlicher Art und Weise bauen Sie Videos ein, die einmalig ablaufen, loopen oder erst bei Mauskontakt beginnen. Alle Parameter werden direkt in der Funktion definiert. Callbacks erlauben es, weitere Funktionen, abhängig vom Zustand zu initiieren. Dabei ist Wallpaper gut dokumentiert. Der "Lernaufwand" beträgt etwa fünf Minuten.

Mein Kunde ist zufrieden. Ich auch…

Links zum Beitrag

Kategorien
JavaScript & jQuery Programmierung

DevDocs: Zentrales Nachschlagewerk für Webentwickler

Thibaut Courouble ist wieder da. Der französische Frontend-Entwickler, den wir im Sommer 2012 erstmalig bei Dr. Web vorstellten, meldet sich mit seinem jüngsten Projekt DevDocs zurück. DevDocs will nicht weniger, als das zentrale Nachschlagewerk für Webentwickler sein. Und in der Tat ist die themenübergreifende Bündelung verschiedener Dokumentationen mit einer ebenso übergreifenden Suchfunktion gar keine schlechte Idee.

devdocs

Courouble: Kein Unbekannter in der Entwicklergemeinde

Thibaut Courouble kennen regelmäßige Dr. Web-Leserinnen und Leser schon seit längerem. Auffällig an ihm ist insbesondere seine philosophische Art, den Menschen und Themen des Netzes zu begegnen. Das mag nicht jedermann Sache sein. Darüber hinaus jedoch ist er ein äußerst talentierter Entwickler mit interessanten Ideen.

Im August 2012 stellten wir sein damals neues Projekt WebInterfaceLab vor, das er zwischenzeitlich in CSSFlow umbenannte. Am Konzept, CSS Snippets kostenfrei und ganze Interface Kits kostenpflichtig anzubieten änderte sich indes nichts. Einzig die Zahl der angebotenen Elemente ist seither gestiegen. Nach wie vor sollte die Website in keinem Designer-Werkzeugkasten fehlen.

DevDocs: HTML5, CSS, JavaScript, DOM, HTTP und vieles mehr

Mit seinem neuesten Projekt DevDocs geht Courouble ein Problem an, das selbst erfahrene Webentwickler immer mal wieder ereilen wird. Man muss eine Funktion, ein Feature, eine Schreibweise nachschlagen. Dazu gibt es im besten Falle eine schnell auffindbare Dokumentation. Nicht immer ist zumindest das schnelle Auffinden gewährleistet. Ich jedenfalls suchte mir schon mehr als oft einen Wolf in den Weiten des Netzes.

DevDocs ist auf Wachstum ausgerichtet. Courouble bittet um aktive Vorschläge zur Integration weiterer Dokumentationen in seinen Service. Dabei ist die Zahl der verfügbaren Referenzen schon jetzt ganz beachtlich und beinhaltet neben den unabdingbaren Basics, wie CSS, DOM, HTML, HTTP und JavaScript auch Frameworks und Tools wie jQuery, Node.js, Ruby, Sass, Less und weitere.

devdocs-css-snap
Links die Übersicht eines Teils der Themen, rechts die Inhalte

Interessant ist einiges am Konzept der DevDocs. Zunächst können Sie diejenigen Dokumentationen aktiv markieren, die für Sie von Relevanz sind. So schließen Sie irrelevante Informationen von vornherein aus. Eine nun durchgeführte Freitextsuche erstreckt sich über alle Themenbereiche, die Sie zuvor markiert haben. Dabei bietet DevDocs in begrenztem Umfang sogar eine Fuzzy Logic und erkennt ähnliche Ergebnisse. Will man gezielt nur in einer bestimmten Doku suchen, stellt man dem Suchbegriff den Namen nebst einem Tab voran. Die Web-App unterstützt Keyboard-Shortcuts. Auch die Suche über die Adressleiste des Browsers ist vorgesehen. Wer es noch bequemer will, installiert die Chrome App.

devdocs-chromeapp

DevDocs ist kostenfrei unter Open Source Lizenz verfügbar. Man muss allerdings der englischen Sprache mächtig sein, um es sinnvoll zu nutzen. Inwieweit es künftig mehrsprachig zugehen wird, ist nicht klar, aber meines Erachtens nicht zu erwarten, wenn man bedenkt, dass Courouble nicht mal seine eigene Muttersprache berücksichtigt.

Im Ergebnis ist DevDocs eines dieser Projekte, die Webentwickler ihrer Bookmark-Sammlung hinzufügen sollten. Nicht unwichtig ist noch, dass DevDocs ebenfalls für die Anzeige auf mobilen Geräten optimiert ist.

Links zum Beitrag

Kategorien
JavaScript & jQuery Programmierung

Summernote: Starker WYSIWYG-Editor für Bootstrap 3

Heute will ich Sie auf ein recht frisches JavaScript aufmerksam machen, mit dessen Hilfe Sie in unschlagbar simpler Art und Weise einen funktionsreichen WYSIWYG-Editor in Ihr Bootstrap-Projekt einbauen können. Das kleine Tool mit dem sympathischen Namen Summernote gibt es kostenlos. Es erfreut sich reger Entwicklungstätigkeit und wird wohl in den nächsten paar Wochen die Versionsnummer 1 erreichen. Aber schon zum jetzigen Zeitpunkt ist Summernote für den Produktiveinsatz bestens geeignet.

summernote-wysiwyg

Summernote: Bootstrap, jQuery und FontAwesome

Summernote setzt eine Version von Bootstrap ab 2.x voraus. Zudem erfordert es jQuery und FontAwesome. Da letztere beiden Komponenten ohnehin ebenfalls Bestandteil von Bootstrap sind, haben Sie mit einer vollständigen Bootstrap-Version bereits alle Voraussetzungen erfüllt. Stellen Sie überdies sicher, dass Sie den HTML5 Doctype verwenden.

Nachdem Sie Summernotes CSS und JS eingebunden haben, erstellen Sie ein DIV, dem Sie die ID summernote verpassen. Anhand der ID weiß das Script, worum es sich zu kümmern haben wird:

$(document).ready(function() {
  $('#summernote').summernote();
});

Summernote: So geht’s

Zusätzlich lässt sich der Funktionsaufruf mit Parametern anreichern, die etwa die Optik des Editors betreffen oder den Fokus direkt in das Feld setzen:

$('.summernote').summernote({
  height: 300,   //setzt die Höhe des Editorfeldes in Pixeln
  focus: true    //sorgt dafür, dass der Cursor sich nach dem Initialisieren im Editor befindet
});

Geben Sie keine Höhe an, vergrößert sich das Editorfeld dynamisch mit dem eingegebenen Content. Eine wesentliche Konfigurationsmöglichkeit betrifft die Funktionalität der Summernote-Toolbar. Hier können Sie genau festlegen, welche Features der Editor dem Anwender zur Verfügung stellen soll:

$(‚.summernote').summernote({
  toolbar: [
    //['style', ['style']], // no style button
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']],
    //['insert', ['picture', 'link']], // no insert buttons
    //['table', ['table']], // no table button
    //['help', ['help']] //no help button
  ]
});

Eine Reihe von Callbacks erlaubt weitergehende Interaktionen. Zudem arbeitet Summernote über entsprechende Sprachdateien auch vielsprachig. Die jeweilige Sprache ist nach dem Einbinden über einen Parameter im Funktionsaufruf zu konfigurieren. Das ist alles sehr eingängig und verständlich. Umfangreiche Dokumentationen sind nicht erforderlich, um Summernote an den Start zu bekommen.

Sauber dokumentiert, schnell implementiert, auch Server-tauglich

Umso erfreulicher ist es, dass eine umfangreiche Dokumentation zu allen Einzelheiten des Editors dennoch bereit gestellt wird. Das ist ja gerade im Open Source-Bereich leider nicht selbstverständlich, senkt aber die Einstiegshürde nochmal gewaltig. Die Dokumentation enthält auch eine Menge Demos und Beispiele, die erklären, wie man Summernote serverseitig, etwa mit PHP oder Node.js implementiert.

Prinzipbedingt arbeitet Summernote auf der Basis von Inline-Styles, um etwaige Formatierungen umzusetzen:

summernote-codeview

Summernote integriert einen File-Uploader und baut Videos aus den gängigen Onlinediensten ein. Wie es sich für einen Bootstrap-Zusatz gehört, verhält sich das Tool voll responsiv. Nicht ganz uninteressant dürften die meisten auch das Gewicht finden. Mit lediglich 58kb für CSS und JS darf sich der Editor noch als Leichtgewicht bezeichnen.

Der schlanke Editor Summernote ist vor wenigen Tagen in der Version 0.5 verfügbar geworden und steht auf Github zum kostenlosen Download und zum ebenso kostenlosen Einsatz unter der sehr liberalen MIT-Lizenz, sowohl für private, wie auch kommerzielle Zwecke bereit. Summernote läuft mit allen modernen Browsern und dem IE ab Version 9. Support für die Version 8 des Redmond-Browsers ist angekündigt.

Summernote wird entwickelt von Alan Hong aus dem südkoreanischen Seoul. Seinem Twitter-Account zu folgen, wird den meisten Menschen eher weniger nutzen. Aber, das kann ja jeder für sich selbst entscheiden ;-)

Links zum Beitrag:

  • Summernote | Homepage
  • Summernote | Dokumentation
  • Summernote auf Github
Kategorien
JavaScript & jQuery Programmierung

Codeblock.js: JavaScript direkt im Browser editieren und ausführen

Wenn es um die Vorstellung von JavaScript-Frameworks und -Bibliotheken geht, ist es immer sinnvoll, den Nutzern mit konkreten Beispielen zu erklären, wie das Framework oder die Bibliothek funktioniert, wie sie eingesetzt wird und welche Einstellungsmöglichkeiten vorhanden sind. Statt nur Quelltext-Schnipsel zu veröffentlichen, ist es natürlich wünschenswert, wenn Besucher sich selbst am Quelltext versuchen können, ohne erst selbst JavaScript- und Demo-Dateien herunterladen zu müssen. Das ist es, was Codeblock.js bietet.

codeblockjs
Website von Codeblock.js

Codeblock.js macht aus einem beliebigen Element mit Quelltext als Inhalt einen bearbeitbaren und ausführbaren JavaScript-Editor, der direkt innerhalb einer Website im Browser dargestellt und bedient werden kann. Codeblock.js basiert auf jQuery und dem Ace-Editor, weshalb beides zusammen mit Codeblock.js im Header eines HTML-Dokumentes eingebunden werden muss. Anschließend kann ein beliebiges Element zum JavaScript-Editor umgewandelt werden:

$("#quelltext").codeblock();

Bei dem Element, welches per Codeblock bearbeit- und ausführbar gemacht werden soll, kann es sich zum Beispiel um einen einfachen DIV-Container handeln. Per Knopfdruck wird der Quelltext darin ausgeführt. So lassen sich On-the-fly JavaScript-Einstellungen für Frameworks und eigene Funktionen direkt im Browser ändern und ausführen.

Syntax-Highlighting, Zeilennumerierung und Fehlerausgabe

Der per Codeblock erzeugte JavaScript-Editor hat einen „Run“-Knopf, um den Quelltext ausführen sowie einen „Reset“-Button, um den ursprünglichen Quelltext wiederherstellen zu können. Außerdem sorgen integriertes Syntax-Highlighting und eine Zeilennummerierung dafür, dass der JavaScript-Quelltext übersichtlich dargestellt wird.

codeblockjs_editor
Codeblock.js-Editor

Eine Autovervollständigung stellt sicher, dass bei der Eingabe öffnender Klammern sowie Anführungszeichen diese automatisch um schließende Klammern und Anführungszeichen vervollständigt werden. Eine Fehlerausgabe am unteren Rand des Editors gibt zudem Aufschluss darüber, ob der JavaScript-Quelltext fehlerfrei ist.

Einstellungsmöglichkeiten

Die Funktionalität, Beschriftung und das Aussehen von Codeblock.js können angepasst werden. So lassen sich beispielsweise Konsole, Zeilennummerierung sowie „Run“- und „Reset“-Button ausblenden. Die Beschriftung des „Run“-Buttons ist anpassbar. Der Standardtext für die Konsole des Editors kann ebenfalls angepasst werden.

$("#quelltext").codeblock({
  editable: true,
  consoleText: "Beispielquelltext",
  runButtonText: "Ausführen",
  console: true,
  resetable: true,
  runnable: true,
  lineNumbers: true
});

Auch das Aussehen des Editors ist veränderbar. Für den „Run“-Button und die Konsole können eigene Klassen vergeben werden, um diese selbst zu gestalten.

Fazit: Einfacher und komfortabler lässt sich Demo-Quelltext für einen Nutzer nicht ausgeben.

Links zum Beitrag

Kategorien
JavaScript & jQuery Programmierung

Scrollen, sliden, biegen und mehr: 5 frische jQuery-Plugins aus dem November 2013

Das jQuery-Universum wächst beständig. Es ist schwierig, mit der Entwicklertätigkeit in Sachen Plugins informatorisch Schritt zu halten. Und, seien wir mal ehrlich, vielfach lohnt sich das auch gar nicht. Wir stellen Ihnen heute fünf frische jQuery-Plugins vor, die allesamt im November entstanden sind oder offiziell vorgestellt wurden. Diese zu kennen, lohnt sich auf jeden Fall. Versprochen…

onScreen bearbeitet Elemente beim Betreten oder Verlassen des Viewports

onScreen von Silvestre Herrera arbeitet mit Elementen, wenn sie den Viewport erreichen und/oder aus diesem Verschwinden. Die einfachste Anwendungsmöglichkeit für onScreen ist ein LazyLoad für Bilder. onScreen sorgt hierbei dafür, dass Bilder erst dann geladen werden, wenn sie für die Anzeige im Viewport auch tatsächlich benötigt werden.

onscreen

onScreen kann aber mehr. Herrera stellt verschiedene Demos bereit. So ist onScreen in der Lage, Streamposts erst dann nachzuladen, wenn das Seitenende erreicht wird. Das kann auch bei horizontalem Scrollen erfolgen. onScreen lässt sich zudem auf DOM-Elemente in Containern anwenden, dabei sogar auf mehrere Container einer Seite gleichzeitig.

onScreen steht unter MIT-Lizenz auf Github zum kostenlosen Download und zur freien Verwendung bereit.

Slippry: Flexibler Slider auf Basis von HTML5 und CSS3

Slippry von Booncon aus dem finnischen Helsinki ist ein weiterer Slider – allerdings einer, der sich vom Einheitsbrei deutlich absetzt. Denn die Jungs von Booncon hatten aus eben dem Grund, dass es derlei Software massenhaft gibt, grundsätzlich gar nicht vor, selbst einen Slider zu bauen. Auf der Suche nach einem responsiven, für ihre Zwecke tauglichen Exemplar stellten sie nach eigenen Angaben indes fest, dass die verfügbaren Lösungen entweder kaum Flexibilität zeigten oder auf Funktionen fußten, deren Tage gezählt sind.

slippry

Folgerichtig wurde ein nagelneuer Slider auf Basis des aktuellen jQuery und unter Verwendung von HTML5 und CSS3 geschaffen, der dennoch Fallbacks für ältere Browser gewährleistet. Im HTML-Markup werden keinerlei Funktionen versteckt. Das als Slider zu definierende Element erhält eine eindeutige ID, die dann wiederum dem Funktionsaufruf übergeben wird. Parameter zur Anpassung der Optik und weiterer Verhaltensweisen finden im Funktionsaufruf statt. Booncon hält vielfältige Demos bereit.

Slippry steht unter MIT-Lizenz auf Github zum kostenlosen Download und zur freien Verwendung bereit.

Bigfoot kümmert sich um die Darstellung von Fußnoten, nicht nur in responsiven Designs

Fußnoten sind grundsätzlich eine schöne Sache und in wissenschaftlichen Arbeiten in jedem Falle unabdingbar. Ich persönlich vermeide den Einsatz von Fußnoten wegen der unschönen optischen Effekte und der schlechten Usability des Hin- und Herspringens im Text. Das neue jQuery-Plugin bigfoot von Chris Sauve aus Kanada könnte mich allerdings überzeugen.

bigfoot

Denn bigfoot bearbeitet herkömmlich erstellte Fußnoten automatisch und macht daraus klickbare Targets, die besonders auf mobilen Geräten die Usability deutlich verbessern. Anstelle eines nummerierten Links zeigt bigfoot ein Touchtarget und – besonders gut – blendet den Text der eigentlichen Fußnote in einem Overlay direkt am Fußnotenlink ein. Chris Sauve hat entsprechende Demos vorbereitet.

bigfoot-2

Bigfoot steht unter MIT-Lizenz auf Github zum kostenlosen Download und zur freien Verwendung bereit.

stickUp hält beliebige Elemente im Scrollbereich sichtbar

Das Plugin stickUp des New Yorkers Liran Cohen tut, was der Name verspricht. Es sorgt dafür, dass ein definiertes Element stets am oberen Rand des Browsers sichtbar bleibt. Die Idee ist der in Mode geratenen Technik des One-Page-Designs entlehnt. Hauptanwendungsfall dürfte demnach die Anwendung auf eine Navigationsleiste oder eine Navigationsbox sein. Grundsätzlich kann stickUp jedoch jedes Element im Scrollbereich sichtbar halten, da sich das Plugin auf die übergebene ID des gewünschten Elements auswirkt.

stickup

Cohen liefert ausführliche Informationen und Anleitungen zur Nutzung, selbst in WordPress, mit. Ein WP-Plugin ist angekündigt. Die Demo zu stickUp ist aussagekräftig.

stickUp steht unter GLGPL-Lizenz auf Github zum kostenlosen Download und zur freien Verwendung bereit.

Circle Type biegt Texte entlang von Kreislinien

Circle Type von Peter Hrynkow aus dem kanadischen Vancouver ist ein schlankes, extrem leichtgewichtiges Plugin, dass sich damit beschäftigt, Texte entlang einer Kreislinie zu setzen. Ob ganz rund, halb rund oder lediglich leicht geschwungen, nach oben oder nach unten – Hrynkows Plugin erledigt den Job. Demos finden sich hier.

circletype

Im Zusammenspiel mit FitText.js kann Circle Type Texte in gegebene Container einbiegen. Circle Type eignet sich hervorragend für responsive Layouts. Mit der Option Fluid passen sich Textkrümmungen dynamisch dem Viewport an. Ebenso wie FitText setzt auch Circle Type das Plugin Lettering.js voraus.

Circle Type steht unter Doppel-Lizenz GPL und MIT zum kostenfreien Download und zur ebensolchen Verwendung auf Github zur Verfügung.

Kategorien
JavaScript & jQuery Programmierung

Flat, Mobile, Responsive: Frische JavaScripte und jQuery-Plugins des Monats September 2013

Mit jQuery-Plugins und JavaScript-Tools ist es wie mit WordPress-Themes, Fonts, Icons und anderen Ressourcen für die Designer- und Developer-Community. Es gibt sie in schier rauhen Mengen. Dabei ist es gerade bei JavaScript- und jQuery-Lösungen wichtig, den Überblick zu behalten. Denn, wenn man schon ein externes Werkzeug einsetzt, dann sollte es wenigstens nicht von Anno Tuck, sondern halbwegs frisch und zeitgemäß sein. Einige aktuelle Vertreter dieser Spezies hat Dr. Web für Sie zusammen gestellt.

Das mobile Webdesign ist eines der ganz großen Themen in der Developer-Gemeinde. Das schlägt sich auch in der Entwicklung von JavaScripten und jQuery-Plugins nieder. Neben Tools für die Einblendung von mobil-typischen Fortschrittsbalken und die mobil-orientierte Ansprache bestimmter Geräte, finden Sie auch einen Clone des Editors aus dem Dienst Medium, den die Twitter-Erfinder gegründet haben. Ebenso werden die Fans responsiven Designs bedient. Alle Tools sind ganz aktuell oder, wie im falle von Mozillas TogetherJS ganz aktuell aktualisiert worden ;-)

TogetherJS: JavaScript-Bibliothek von Mozilla umbenannt

togetherjs

TogetherJS kennen regelmäßige Dr. Web-Leser(innen) bereits. Schon im April stellten wir den Dienst ausführlich vor. Damals hörte er noch auf den Namen TowTruck, zu deutsch: Abschleppwagen und war ersonnen worden, um Developern kollaborativ bei der Arbeit zu helfen. So erklärte sich auch der Zusatz "Who you call, when you get stuck", zu deutsch: Den du rufst, wenn du stecken bleibst.

Mittlerweile sieht Mozilla den Anwendungszweck breiter gefasst und schlägt sogar vor, die JavaScript-Bibliothek, die nach wie vor ohne weitere Abhängigkeiten auskommt, zur Verwaltung der Einkaufsliste für die nächste gemeinsame Party zu verwenden. Näheres dazu im folgenden Video:

TogetherJS steht unter MPL-Lizenz (Mozilla Public Licence) kostenfrei zur Verwendung bereit.

TogetherJS: Produkt-Website | Github-Repository

PACE zeigt einen Fortschrittsbalken beim Laden einer Seite

pace

PACE bietet einen vollautomatischen Ladebalken für jede Website mit dynamischen Inhalten und funktioniert ohne weitere Abhängigkeiten. Das Tool wird mit verschiedenen Themes geliefert und erfordert keinerlei Konfiguration im Übrigen. PACE läuft in der Tat vollautomatisiert.

Die Einbindung des JavaScript, nebst des gewünschten Themes an frühestmöglicher Stelle ist völlig ausreichend. Das Tool kann kostenfrei zu jedem legalen Zweck eingesetzt werden, solange die Lizenzinformationen nicht entfernt werden.

PACE: Demo | Github-Repository

FlowType.JS ändert Schriftgröße und Zeilenhöhe responsiv

flowtypejs

FlowType.JS sorgt für die Änderung der Schriftgröße und des Zeilenabstandes eines Texts in Abhängigkeit von der Breite des umgebenden Elementes. Auf diese WEise soll die maximale Lesbarkeit der Texte auf allen Geräten und Auflösungen gewährleistet werden. Die Demo-Site gibt einen guten Eindruck davon, dass das auch recht gut funktioniert.

Via CSS gibt man die Start-Optionen vor, als Parameter am Function-Call, der auf das gewünschte Element erfolgt, sind Änderungen möglich. FlowType.JS steht unter MIT-Lizenz kostenfrei zur Verwendung bereit.

FlowType.JS: Demo | Github-Repository

One Page Scroll: Website für Freunde des iPhone 5S

onepagescroll

Wer sich eine Website wie diejenige zum iPhone 5S wünscht, der wird sich über One Page Scroll freuen. Dieses JavaScript von Pete R., wie sich der thailändische Gründer von BucketListly selbst nennt, setzt das bildschirmfüllende Scrollen perfekt um.

Im Beispiel ist der Onepager dreigeteilt, diesbezüglich bestehen jedoch keine Limitationen. Die Zahl der gewünschten Scroll-Abschnitte wird beispielsweise per Section-Tag festgelegt, andere Tags gehen auch. Es ist nur darauf zu achten, dass man etwa abweichende Section-Container dem JavaScript benennt, da es sonst nicht funktionieren kann. Natürlich funktioniert das Scrollen auch per Swipe auf Mobilgeräten. Leider gibt Pete R. keine Lizenz an.

One Page Scroll: Demo | Github-Repository

Formbuilder.js: Grafisches Interface für die clientseitige Formularerstellung

formbuilderjs

Formbuilder.js ist noch nicht im Endausbauzustand angekommen. Der Formular-Builder ist zur Zeit lediglich in der Lage, die clientseitige Formulargestaltung zu übernehmen. Die komplette serverseitige Verarbeitung muss eigenständig programmiert werden. In einer der kommenden Versionen soll die Server-Funktionalität allerdings noch ergänzt werden.

Schon jetzt ist es komfortabel möglich, sich Formulare mit der Maus zusammen zu klicken. Das kann doch Google Forms auch, werden Sie vielleicht jetzt denken. Das stimmt, jedoch kann Formbuilder.js in die eigene Applikation nahtlos integriert werden. Das Tool steht unter MIT-Lizemz zur kostenfreien Verwendung bereit.

Formbuilder.js: Demo | Github-Repository

Device.js: JavaScript und CSS auf mobile Geräte zuschneiden

devicejs

Device.js ist ein Hilfsmittel für die zielgerichtete Ansprache des Besucherbrowsers mit CSS und JavaScript. Device.js erkennt verschiedene Geräte-Charakteristika. Erkannt wird etwa, ob es sich um einen Phone-, Tablet- oder Desktop-Besucher handelt, ob das Gerät hochkant oder quer gehalten wird und welches Betriebssystem darauf läuft.

Hat Device.js die Erkennung abgeschlossen, fügt es dem HTML-Element die entsprechenden CSS-Klassen hinzu, die der Entwickler wiederum gezielt ansprechen kann. Die Idee ist interessant, allerdings wegen des Konzepts der Browser-Detection nicht absolut zuverlässig. Das Tool kann kostenfrei zu jedem legalen Zweck eingesetzt werden, solange die Lizenzinformationen nicht entfernt werden.

Device.js: Demo | Github-Repository

Vex: Unabhängige JavaScript-Bibliothek liefert schicke Dialog-Overlays

vex

Vex erlaubt die Erstellung schicker, sehr moderner Dialog-Overlays. Dazu liefert es einige Themes mit, jedoch können auch völlig individuelle Overlays erschaffen werden. Die komplette Ansteuerung läuft pro Dialog, so dass prinzipiell kein Overlay dem anderen gleichen muss. Das Tool wiegt unter 7kb, benötigt keine weiteren Komponenten und steht unter MIT-Lizenz zur kostenfreien Verwendung bereit.

Vex: Demo | Github-Repository

Ion.Tabs für jQuery bringt konfigurierbare Tabs mit Skin-Support

iontabs

Das jQuery-Plugin Ion.Tabs erlaubt die einfache Erstellung einer Tab-Navigation nebst Inhalts-Tabs über eine einfache HTML-Struktur, die mit HTML5 Data-Attributen angereichert wird. Die Data-Attribute werden dann vom Plugin verarbeitet und umgesetzt. Die Optik der Tabs wird über Skins gesteuert, von denen zwei mitgeliefert werden. Das eine liefert ein klassisches Tab-Design mit begrenzenden Linien, das zweite orientiert sich am Flat Trend. Da die Skins CSS-Dateien sind, ist Ihrer Fantasie natürlich keine Grenze gesetzt. Auch Ion.Tabs kommt aus Russland und steht unter MIT-Lizenz zur kostenfreien Verwendung bereit.

Ion.Tabs: Produktseite | Github-Repository

MediumEditor klont den WYSIWYG-Editor von Medium.com

medium-editor

Medium Editor steht unter der außergewöhnlichen Beer-Ware-Lizenz, die besagt, dass Sie das Tool völlig kostenfrei verwenden dürfen. Sollten Sie dem Entwickler jedoch einmal begegnen, müssen Sie ihm ein Bier ausgeben. Da selbiger Davi Ferreira heißt und in Rio de Janeiro lebt, dürfte die Gefahr für die meisten von uns überschaubar bleiben ;-)

Inhaltlich ist MediumEditor ein Clone des Editors des Dienstes Medium.com. Formatierungen werden innerhalb des Editors per Rechtsklick initiiert. Eine Toolbar erscheint direkt am markierten Element und stellt sinnvolle Formatierungsoptionen bereit.

Der Aufruf von MediumEditor ist simpel. Nach dem Einbau des zugehörigen CSS und der Einbindung des eigentlichen Scriptes wird eine Instanz desselben aufgerufen. Dieser gibt man die zu überwachende Klasse mit, die standardmäßig .editable heißt. Künftig wird nun jedes Element, das mit der Klasse .editable ausgestattet ist, mit einem MediumEditor versehen.

MediumEditor: Github-Repository

Kategorien
JavaScript & jQuery Programmierung

Auf links: 2 neue Ladehilfen für moderne Web-Apps mit JavaScript/jQuery

Mit dem Laden von Elementen auf Websites ist es so eine Sache. Mal möchte man alle schon vor dem ersten Anzeigen der Seite im Cache haben, mal möchte man das aufgrund der Vielzahl selbiger nicht. Zumindest will man den Besuchern aber den Status verdeutlichen. Die folgenden zwei neuen JavaScripte, davon eines Stand-Alone und eines für jQuery, helfen unterschiedlich.

Flipload.js – Dreht Elemente auf links und zeigt eine Ladeanimation

flipload-js

Flipload.js von Guille Paz gefällt mir besonders gut. Dieses unabhängige JavaScript versieht beliebige HTML-Elemente mit einer Flip-Animation. So dreht sich etwa der Bestätigen-Button um 180 Grad, zeigt einen Ladestatus und dreht sich nach Abschluss des initiierten Vorgangs zurück in die Ausgangsposition. Gleiches funktioniert für das Absenden eines Formulars, das Laden eines Videos, eben beliebiger Elemente, bei denen das einen Sinn ergibt.

Guille Paz unterhält eine Seite mit etlichen Beispielen. Das Script kann unter MIT-Lizenz völlig frei verwendet werden und steht auf Github zum Download bereit. Obwohl das Projekt noch keine zwei Wochen auf Github lebt, macht es bereits einen ausgereiften, funktional breiten Eindruck.

Loadie.js – jQuery-Plugin zeigt Ladebalken von links nach rechts

loadie-js
Der Ladebalken ist oben links am Bildrand zu sehen

Loadie.js ist ein jQuery-Plugin aus deutschen Landen. Ersonnen von Dominik Schmidt aus der Agentur 9elements, die sich auf Web- und Mobil-Apps spezialisiert, zumindest fokussiert hat, bringt Loadie.js in Version 1.0 nicht unbedingt einen Feature-Overkill, aber eine solide Grundleistung auf den Tisch.

Loadie.js zeigt einen unmittelbar am oberen Browserrand angelegten Fortschrittsbalken, der Nutzern mobiler Geräte sehr vertraut vorkommen wird. Der Balken bewegt sich von links nach rechts und zeigt den Fortschritt damit in der einfachsten denkbaren Weise. Erreicht er den rechten Rand, ist der Vorgang abgeschlossen. Angesprochen und gesteuert wird der Balken über Variablen. Damit ist die Lösung nicht für den Out-of-the-Box-Sofort-Einsatz geeignet. App-Entwickler werden aber möglicherweise ihren Spaß daran finden.

Loadie.js steht ebenfalls unter MIT-Lizenz zur freien Verwendung bereit und kann auf Github heruntergeladen werden.

Kategorien
Design HTML/CSS

Least.js: Responsive Bildergalerie auf Basis von HTML5, CSS3 und jQuery

Normalerweise stelle ich keine Galerie-Scripts vor. Gefühlt Tausende existieren in den nicht so fernen Weiten des Netzes und fast wöchentlich kommen neue hinzu. Das jQuery-Plugin von Kamil Czujowski und Sergej Müller jedoch sticht aus der Masse hervor. Es basiert auf aktuellen Standards und eignet sich außerordentlich gut für den Einsatz quer über alle Geräteklassen.

least-startseite

Least.js: Einfach zu implementierende Bildergalerie mit LazyLoad

Eine Bildergalerie mit Least.js entsteht stets auf der Basis einer Liste. Die einzelnen Bilder sind Listen-Elemente, die wiederum Listen-Elemente für die Beschriftung innerhalb des Hover-Overlays enthalten.

least-nur-thumbnails
Least.js: Übersicht der Thumbnails

Wie auch bei anderen Galerien üblich, werden initial Thumbnails in der Übersicht angezeigt. Per Klick auf das Thumbnail ruft man die eigentliche Bilddatei auf. Innerhalb des Listen-Elements zum Bild sorgt zunächst ein Gif dafür, dass sich ein weißer Schatten beim Hovern über das Bild legt. Dabei werden auch die in weiteren Listen-Elementen abgelegten Overlay-Texte angezeigt. Das eigentliche Thumbnail steuert man über ein HTML5-Data-Attribut namens data-original ein. Die verschiedenen Zustände sind innerhalb des übergeordneten Listen-Elements in separaten Div geordnet.

Zur Verdeutlichung des Gesagten; so sieht das beispielsweise für ein einzelnes Bild aus:

Der Funktionsaufruf des Galerie-Scriptes erfolgt über die ID der Galerie folgendermaßen:

$(document).ready(function(){
    $('#gallery').least();
});

Klickt man nun eines der angezeigten Vorschaubilder an, so wird das größere Original oberhalb der Thunbnail-Liste in das erste Listen-Element mit der ID fullPreview geladen.

least-mit-original-oben
Least.js: Anzeige des Originals nach Klick oberhalb der Thumbnails

Über das jQuery-Plugin LazyLoad sorgen die Entwickler dafür, dass die größeren Originale erst vom Server geholt werden, wenn sie auch tatsächlich geklickt wurden. Das ist insbesondere bei größeren Galerien sinnvoll, da ohne LazyLoad beim ersten Aufruf alle Thumbnails nebst aller Originale vorgeladen werden müssten, was sich in langsamem Bildaufbau und gefühlt langen Wartezeiten bemerkbar machen würde.

Die Kehrseite des Einsatzes von LazyLoad ist natürlich, dass nach dem Klick auf ein Thumbnail zunächst eine oder mehrere Gedenksekunden vergehen, bevor oberhalb der Vorschaugalerie tatsächlich das Originalbild sichtbar wird. Der Effekt lässt sich natürlich minimieren, indem man seine Bilder maximal in 720p oder 1080p hinterlegt und mit Photoshop oder meinem Lieblings-Kompressor JpegMini ordentlich vorbehandelt. Auf der Demoseite zu Least.js haben sich Czujowski und Müller auf eine maximale Auflösung von 960 x 600 Pixeln für das größere Originalbild festgelegt.

So funktionieren Bildergalerien mit Least.js vollständig responsiv, fließend bei Änderungen des Viewports. Skalieren Sie auf der Demoseite schlicht mal Ihr Browserfenster. Es dürfte LazyLoad zu verdanken sein, dass die Skalierung in derart hoher Geschwindigkeit und völlig ohne Ruckler und Wartezeiten erfolgt. Während das Originalbild ab einer Viewportbreite von 960 Pixeln zentriert, fließt die Thumbnailgalerien weiter über die volle Seitenbreite. Verkleinert man den Viewport, skaliert auch das Originalbild frei mit, bis zur vordefinierten Breite eines einzelnen Thumbnails.

Wer sehr kleine Galerien verfügbar machen will oder LazyLoad schlicht nicht mag, kann es via Parameter im Funktionsaufruf auch deaktivieren. Weitere Parameter sorgen etwa dafür, dass die Galerie nicht nach dem Zufallsprinzip, sondern streng numerisch nach vergebenen Dateinamen sortiert wird.

Least.js eignet sich ganz hervorragend dafür, Bildergalerien in moderner Optik auch auf mobilen Clients verfügbar zu machen, ohne dabei deren Look auf Desktop-Geräten zu beeinträchtigen. Least.js steht auf Github zum kostenfreien Download zur Verfügung. Vor der Nutzung in kommerziellen Projekten empfiehlt es sich Kontakt zu den Entwicklern aufzunehmen. Eine Lizenz, die Aufschluss über die erlaubte Nutzung geben würde, ist dem Script nicht beigegeben.

Links zum Beitrag

Kategorien
JavaScript & jQuery Programmierung

Imagefill.js: Tool für responsives Design passt Bilder an den umgebenden Container an

John Polacek aus Chicago ist der Designer-Community kein Unbekannter. Er ist verantwortlich für bekannte Tools wie Bigvideo.js, Scrollorama, Responsivator und vielen mehr. Vor einer guten Woche fügte er seinem ohnehin schon beachtlichen Portfolio ein weiteres Werkzeug hinzu. Mit Imagefill.js sorgt man dafür, dass Bilder stets den sie umgebenden Container füllen und sich dabei zentrieren. Das Seitenverhältnis bleibt dabei gewahrt.

imagefill-startpage

Imagefill.js: Kein Schnick-Schnack

Imagefill.js ist ein kleines Tool mit übersichtlichem Anspruch. Es sorgt per Funktionsaufruf auf die ID eines Containers dafür, dass das in diesem Container enthaltene Bild zentriert und auf die Größe des Containers angepasst wird. Es findet keine Veränderung der Seitenverhältnisse statt. Stattdessen wird dann lediglich ein zentrierter Bildausschnitt gezeigt. Indem man verschachtelte Container anlegt, ist auch eine Optik á la Pinterest oder ein bildschirmfüllendes Grid aus Divs realisierbar.

imagefill-exp
Anpassung an den Container ohne Änderung des Seitenverhältnisses

Imagefill.js setzt jQuery und das separat erhältliche Plugin ImagesLoaded voraus. ImagesLoaded stellt lediglich fest, wann alle Bilder eines definierten Bereichs geladen sind, so dass Imagefill.js überhaupt erst sinnvoll aktiv werden kann. Um das Plugin einzusetzen, binden Sie entsprechend jQuery, dann ImagesLoaded und dann Imagefill.js im Head Ihrer Seite ein.

Ein entsprechendes Div kann dann so aussehen:

Der Funktionsaufruf stellt sich wie folgt dar:

$('.container').imageFill(); 
// image stretches to fill container

Wie bereits erwähnt, sind beliebige Verschachtelungen möglich, Polacek liefert hier ein Beispiel eines bildschirmfüllenden, vollständig responsiven Grid:

imagefill-responsive
Bildschirmfüllend, responsiv

Mit zusätzlichen Tools, etwa Packery, kann eine Pinterest-ähnliche Präsentation realisiert werden.

Polacek stellt Imagefill.js unter GPL- und MIT-Doppellizenz für den privaten, wie kommerziellen Gebrauch kostenlos ab. Das Tool kann bei Github heruntergeladen werden.

Links zum Beitrag

Kategorien
JavaScript & jQuery Programmierung

Tabulous.js: Beliebige Inhalte in Tabs organisieren per jQuery

Aaron Lumsden aus der englischen Grafschaft West-Yorkshire liebt jQuery. Erst vor vier Wochen stellten wir hier bei Dr. Web sein Plugin Progression.js vor, das das Ausfüllen unvermeidlicher Formulare erleichtert. Heute fiel mir ein weiteres nützliches Plugin aus seiner Feder in den Schoß. Mit Tabulous.js kann beliebiger Content auf einfache Weise in Tab-Containern untergebracht und mit zeitgemäßen Effekten zur Anzeige gebracht werden.

tabulous-js-start

Tabulous.js: Vielfältige Effekte, einfache Verwendung

Ob man die Herangehensweise Lumsdens mag oder nicht ist sicherlich Geschmackssache. Manch einer verwendet lieber ausgewachsene Frameworks, die mehr Features bieten, als man in einem normalen Projekt benötigt, dafür aber eine homogene Umsetzung gewährleisten. Andere, wie Lumsden (und ich), setzen auf kleine spezialisierte Tools, die man im Zweifel kumuliert einsetzt, bis das Funktionalitäts-Level erreicht ist, das dem Projektziel entspricht.

tabulous-action

Tabulous.js erfüllt genau einen einzigen Zweck. Es erlaubt, beliebige Inhalte in div zu organisieren und mit Karteireiter-Navigation versehen zu präsentieren. Verschiedene Effekte sorgen für eine moderne Anmutung. So lassen sich Inhalte etwa von der Seite her einschieben oder per Flip-Effekt wechseln.

Die Einbindung ist jQuery-typisch simpel. Da es lediglich eine einzelne Variable, nämlich den effect gibt, gerät der Funktionsaufruf nicht zur Scripting-Orgie. Nachdem jQuery und das Plugin nebst zugehörigem CSS eingebettet sind, gilt es ein mehrfach verschachteltes div zu erstellen, dessen oberste Ebene die ID tabserhält.

So kann das aussehen:


Danach gilt es dann lediglich noch, den Funktionsaufruf zu starten:

$('#tabs').tabulous({
    	effect: 'scale'
    });	

In diesem Beispiel habe ich die Variable effect verwendet, die dafür sorgt, dass der Content in unterschiedlicher Weise ein- und ausanimiert wird. Die Variable ist optional. Mehr gibt es nicht zu sagen.

Tabulous.js ist ein einfaches, kleines Tool, das in nahezu idealer Weise den selbstgesetzten Zweck erfüllt und bei mir bereits spontan in einem Projekt Verwendung gefunden hat. Tabulous.js steht kostenfrei auf Github zum Download bereit und kann privat, wie kommerziell unter MIT-Lizenz eingesetzt werden.

Links zum Beitrag

Kategorien
Design HTML/CSS UI/UX

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

JavaScript- und Ruby-Entwickler Alex Wolfe aus San Francisco legt mit Buttons eine CSS-Bibliothek vor, die sich um nichts anderes als um die einfache, aber variantenreiche Gestaltung von Schaltflächen auf Websites kümmert. Buttons entsteht unter Verwendung von Sass und Compass, wobei man von diesen beiden Begriffen nur dann etwas gehört haben muss, wenn man die Buttons-Bibliothek an seine persönlichen Bedürfnisse anpassen will. Will man das nicht, reichen CSS-Grundkenntnisse…

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

Buttons: Einfach mit CSS, etwas aufgemotzt mit Font Awesome und getunt mit jQuery

Neun verschiedene Button-Styles erstellte Wolfe, darunter auch einen Satz im beliebter werdenden Flat Design. Die Verwendung aller verfügbaren Varianten ist sehr einfach. Hierzu bedarf es lediglich des Befolgens der vorgegebenen Syntax. Button-Styles werden als Klassen übergeben. Wolfe hat sich dabei dafür entschieden, normal sprachliche Bezeichnungen zu verwenden. Darüber lässt sich streiten. Grundsätzlich zeigen sich alle virteullen Knöpfe in diesem Farbschema:

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

Wieso die farbigen Buttons nun auf die Bezeichner primary, action, highlight, caution und royal hören, ist letztlich nicht vollständig nachvollziehbar. Insbesondere die Kombination des Bezeichners royal mit der Farbe Violett gibt mir doch Rätsel auf. Aber gut, betrachten wir es als eine Art Vokabeln. Die muss man nicht verstehen, die muss man nur wissen.

Neben den Knöpfen im Flat Design gibt es noch welche mit Glow-Effekt (einem farbigen Schein außen rum), gewölbte, runde und etliche mehr. Will man Icons innerhalb der Elemente einsetzen, ist es erforderlich, Font Awesome mit einzubinden. Die erforderlichen Dateien werden mitgeliefert.

Um Schaltflächen mit Drop-Down-Optionsmenüs zu verwenden, auch das bietet das Framework, ist es erforderlich, die mitgelieferte JavaScript-Datei einzubinden. jQuery wird nicht mitgeliefert, aber ebenfalls vorausgesetzt. Natürlich lassen sich alle Varianten kombinieren.

Zusätzlich enthält das Framework noch einige Wrapper, mit denen man beispielsweise die skeuomorphe Optik einer Türklingel nachbilden kann.

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

Wollen Sie sich mit den von Wolfe gelieferten Standards nicht zufrieden geben, benötigen Sie Sass und Compass nebst der entsprechenden Kenntnisse, um im Sourcecode rumzuschrauben. Wolfe erweitert sein Projekt allerdings ebenfalls kontinuierlich. Vielleicht tut es schon etwas Geduld.

So sehen die bisher verfügbaren Schaltflächen im Überblick aus:

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

Buttons steht auf Github zum kostenlosen Download und unter Apache Lizenz 2.0 zur kostenfreien Verwendung auch in kommerziellen Projekten zur Verfügung.

Links zum Beitrag

Kategorien
JavaScript & jQuery Programmierung

Progression.js: jQuery-Plugin erleichtert Besuchern das Ausfüllen unvermeidlicher Formulare

Aus der englischen Grafschaft West Yorkshire, genauer aus der Großstadt Leeds, kommt ein frisches jQuery-Plugin, mit dessen Unterstützung Formularen, speziell auch langen Formularen auf engem Raum der Schrecken genommen werden kann. Mittels zweier Data-Attribute, die den Formularfeldern beigefügt werden, erhält der Verwender stets genaue Rückmeldungen dazu, wo er sich im Formular gerade befindet und was er an dieser Stelle genau zu unternehmen hat.

progression-js-01

Formulare: Unbeliebt, aber unabdingbar

Von der Wiege bis zur Bahre: Formulare, Formulare. Eine gewisse Resignation liegt in diesem alten Sprichwort, dessen Herkunft nicht eindeutig geklärt ist. Resignation, die sich auch darin begründen mag, dass Formulare in vielen Fällen tatsächlich „alternativlos“ sind, um es mal mit einem Merkelismus zu belegen.

Auch und ganz besonders im Webdesign dreht sich nahezu jede Art von Benutzerinteraktion in der einen oder anderen Weise um Formulare. Glücklicherweise lassen sich die Dinger heutzutage wenigsten anhübschen und mit zusätzlichen Funktionen versehen. Wenn ich mich an die Web-Formulare aus den Neunzigern erinnere, wird es mir jetzt noch ganz flau.

Aaron Lumsden aus dem Vereinigten Königreich stellt mit dem jQuery-Plugin Progression.js eine sehr einfach zu verwendende Methode bereit, mit der Besuchern nützliche Tipps zu jedem einzelnen Formularfeld als Tool-Tipp eingeblendet werden können. Zusätzlich kann der Tool-Tipp einen Fortschrittsbalken beinhalten, der grafisch anzeigt, an welcher Stelle in Prozent man sich im Formular gerade befindet, was ich besonders bei längeren Formularen für eine nette Funktionalität erachte. Entweder der Hinweis-Text oder der Fortschrittsbalken lassen sich ausblenden, beides gleichzeitig naheliegenderweise nicht. Wollen Sie also Ihren Besuchern lediglich die jeweilige Position im Formular signalisieren, würden Sie den Hinweistext ausblenden. In diesem Fall würde bloß eine Prozentangabe ausgegeben.

progression-js-02

Wie (gefühlt) alle aktuellen jQuery-Plugins setzt auch Progression.js auf HTML5 Data-Attribute, um die Funktionalität samt Hinweistexten zunächst unsichtbar im Sourcecode des Dokumentes unterzubringen. Erst die Behandlung durch das JavaScript sorgt für das entsprechende Erscheinungsbild.

Progression.js: Einfach eingebaut und eingesetzt

Die Integration in die eigene Website ist simpel und funktioniert in der einfachsten Variante so. Zunächst werden jQuery und Progression.js nebst zugehörigem CSS eingebunden:




Jedes Formular, das mit Progression.js ausgestattet werden soll, benötigt eine eindeutige ID:

Das Data-Attribut data-progression wird eingesetzt, um den Fortschrittsbalken zu initiieren. Das Attribut data-helper beinhaltet den eigentlichen Hinweistext. Zu guter Letzt setzen wir das Plugin auf das Formular über dessen ID an:

$(document).ready(function ($) {

    $("#myform").progression();

});

So funktioniert Progression.js mit den Standardwerten. Mehr Kontrolle über die Darstellung erlangen wir unter Verwendung einer ganzen Reihe von Parametern, die im Extremfall zu diesem Aufruf führen können:

$("#myform").progression({
        tooltipWidth: '200',
        tooltipPosition: 'right',
        tooltipOffset: '50',
        showProgressBar: true,
        showHelper: true,
        tooltipFontSize: '14',
        tooltipFontColor: 'fff',
        progressBarBackground: 'fff',
        progressBarColor: '6EA5E1',
        tooltipBackgroundColor: 'a2cbfa',
        tooltipPadding: '10',
        tooltipAnimate: true
    }); 

Ich denke, es erübrigt sich, die Optionen im Einzelnen zu erläutern. Sie verfügen über sprechende Bezeichnungen. Unter Verwendung der Darstellungsparameter dürfte ein jedes bestehendes Formular gestalterisch im Gleichklang zu unterstützen sein.

Progression.js ist knappe zwei Wochen alt und steht kostenlos auf Github zur Verfügung. Eine Lizenz ist nicht angegeben. Auf Nachfrage bestätigte mir Aaron jedoch, dass der Einsatz sowohl für private, wie auch kommerzielle Projekte ohne Einschränkungen unter GPL 2 gestattet sei.

Progression.js erinnert entfernt an Intro.js. Mit Intro.js ist allerdings noch etwas mehr möglich. Das Script ist in der Lage, Besucher gezielt zu bestimmten Neuigkeiten auf Ihrer Website zu leiten, während sich Progression.js dezidiert auf Formulare beschränkt. Der Artikel zu Intro.js ist weiter unten zu finden.

Was setzen Sie ein, wenn Sie zusätzliche Unterstützung auf einer Website realisieren wollen oder müssen?

Links zum Beitrag

  • A jQuery plugin that gives users real time hints & progress updates as they complete forms | Progression.js
  • Progression.js | Github Repository
  • Unaufdringlicher Helfer: Intro.js führt Besucher durch die Website | Dr. Web Magazin