Kategorien
JavaScript & jQuery Programmierung

HTML5: Javascripts Fullscreen API einfach verwenden mit (und ohne) BigScreen.js

Mit der neuen Fullscreen-API, die derzeit von Chrome 15+ , Firefox 10+, sowie Safari+ und in der nächsten Version des Opera 12.5 unterstützt wird, lassen sich ganze Seiten, aber auch beliebige einzelne Elemente, etwa Filme und Bilder, per JavaScript im Vollbildmodus darstellen. Gerade bei Bild- und Filmwiedergabe ist dies interessant. Mit entsprechenden JavaScript-Methoden und -Attributen lässt sich der Vollbildmodus starten und beenden. Allerdings verwenden derzeit Mozilla- und Webkit-Browser unterschiedliche Methoden, weshalb die Implementation etwas aufwändiger daher kommt. Brad Doughertys kleines Script BigScreen.js vereinfacht den Umgang deutlich.

Fullscreen API: Elemente per Klick in der Vollbildansicht zeigen

Die Fullscreen API definiert innerhalb der HTML5-Spezifikation eine Möglichkeit, den Browser-Vollbildmodus aus einer Web-App heraus zu initiieren. Der Unterschied zu den seit Jahren verfügbaren Browser-Fullscreen-Modi besteht mithin lediglich darin, dass es damit auch für Entwickler möglich wird, die Einschaltung des Vollbildmodus per Javascript zu bewerkstelligen. Bislang war dieses Hoheitsrecht dem Browserverwender vorbehalten.

Die Unterstützung der API wird seit ihrer Vorstellung vor etwas über einem Jahr stetig besser, wie diese aktuelle Übersicht auf CanIUse zeigt:

Auch wenn die Tabelle weitestgehend in roter Farbe erstrahlt, lässt sich den Werten zur globalen Nutzerstatistik rechts oben an der Übersicht entnehmen, dass immerhin fast die Hälfte aller Nutzer mit einem Browser unterwegs sind, der die API mindestens partiell unterstützt. Da ein Fallback sehr einfach implementiert ist, spricht also bereits zum jetzigen Zeitpunkt nichts mehr gegen eine Verwendung der Fullscreen API, wo man sie als Entwickler nutzbringend einsetzen möchte.

Die Implementation gestaltet sich etwas aufwändiger, da die Implementationen der verschiedenen Browserengines einer unterschiedlichen Syntax folgen. Mozilla- und Webkit-Browser verwenden unterschiedliche Bezeichnungen der Methoden und Attribute. Teilweise besteht der Unterschied nicht nur darin, dass der Bezeichnung „moz“ beziehungsweise „webkit“ vorangestellt wird. Um den Status abzufragen heißt es etwa bei Mozilla „mozFullScreen“, bei Webkit jedoch „webkitIsFullScreen“.

function vollbild() {
 
  var element = document.getElementById("inhalt");
 
  if (element.requestFullScreen) {
    element.requestFullScreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }
 
}

Auch im CSS muss man die entsprechenden Prefixes vorsehen, die teils ebenfalls nicht nur Prefixes sind. Über die CSS-Pseudoklasse „:fullscreen“ lassen sich speziell für den Vollbildmodus vorgesehene Eigenschaften definieren:

:fullscreen p, :-moz-full-screen p, :-webkit-fullscreen p {
  color: #ffffff;
}

BigScreen.js: Weil einfach einfach einfach ist

Will man den Zugriff auf die Fullscreen API etwas komfortabler und mit automatischem Ausbügeln der Rough Spots der verschiedenen Browser realisieren, bietet sich die Verwendung des extrem kleinen Scriptes BigScreen.js von Brad Dougherty an. Das unter Apache 2.0 Lizenz kostenlos verwendbare Tool bringt komprimiert weniger als 1 kb auf die Waage und reduziert den Tippaufwand um – sagen wir – mindestens 75 Prozent.

Auf dieser Seite hält Dougherty je eine Demo mit Bild- und eine mit Videocontent bereit. Anders als die Fullscreen API nativ, unterstützt BigScreen zusätzlich Safari 5.0 und iOS 4.2+, beide allerdings nur mit Blick auf Fullscreen-Video. Ansonsten gilt die für die API an sich ermittelte Kompatibilität.

Folgender Aufruf bringt ein beliebiges Element in den Fullscreen-Modus:

var element = document.getElementById('target');

document.getElementById('button').addEventListener('click', function() {
    if (BigScreen.enabled) {
        BigScreen.request(element);
        // You could also use .toggle(element)
    }
    else {
        // fallback for browsers that don't support full screen
    }
}, false);

Auch möglich ist es, die komplette Website in den Vollbildmodus zu versetzen:

document.getElementById('button').addEventListener('click', function() {
    if (BigScreen.enabled) {
        BigScreen.toggle();
    }
    else {
        // fallback for browsers that don't support full screen
    }
}, false);

Mit den folgenden Methoden können weitere Funktionen beim Aufruf und beim Beenden der Vollbildansicht gestartet werden:

BigScreen.onenter = function() {
    // called when entering full screen
}

BigScreen.onexit = function() {
    // called when exiting full screen
}

Will man den Vollbildmodus via Fullscreen API über ein und denselben Link ein- und wieder ausschalten können, bedarf es hierzu einer recht aufwändigen Codeschnipselei:

function vollbild() {
 
  var element = document.getElementById("inhalt");
 
  if (element.requestFullScreen) {
 
    if (!document.fullScreen) {
      element.requestFullscreen();
    } else {
      document.exitFullScreen();
    }
 
  } else if (element.mozRequestFullScreen) {
 
    if (!document.mozFullScreen) {
      element.mozRequestFullScreen();
    } else {
      document.mozCancelFullScreen();
    }
 
  } else if (element.webkitRequestFullScreen) {
 
    if (!document.webkitIsFullScreen) {
      element.webkitRequestFullScreen();
    } else {
      document.webkitCancelFullScreen();
    }
 
  }
 
}
 
document.getElementById("vollbild_link").addEventListener("click", vollbild, false);

Mit BigScreen ist es übersichtlicher:

var element = document.getElementById('inhalt');

document.getElementById('vollbild_link').addEventListener('click', function() {
    if (BigScreen.enabled) {
        BigScreen.toggle();
    }
    else {
        // fallback
    }
}, false);

BigScreen ist erst seit zwei Tagen, damit ganz frisch auf Github zum Download erhältlich. Wer mit der Fullscreen API hantieren will, sollte sich BigScreen ansehen. Schaden wird es nicht, im Gegenteil…

Links zum Beitrag:

Kategorien
Essentials Freebies, Tools und Templates JavaScript & jQuery Programmierung

Animierte Hintergründe mit dem Parallax Background Builder und Javascript

Der Parallax Background Builder (PBB) aus dem Hause Web-Features ist ein Wysiwyg-Editor für animierte Hintergründe. Mit seiner Hilfe lassen sich wirklich schnell und einfach Hintergrundanimationen erstellen, die mit dem sog. Parallax-Effekt ausgestattet sind. PBB kann Animationen für einzelne Div-Container, aber auch Animationen für den kompletten Website-Background erzeugen. Die Verwendung ist kostenlos.

Parallax Background Builder: Fast intuitive Bedienung sorgt für schnelle Erfolge

Unter Parallax Scrolling versteht man einen 2D-Effekt, der eine räumliche Tiefe in ein Bild dadurch bringt, dass er Bilder auf verschiedenen Ebene platziert. Dabei bewegen sich die im Vordergrund liegenden Bilder schneller als die weiter in den Hintergrund platzierten. So wird das Auge getäuscht. Der Effekt zählt zu den ältesten und simpelsten Animationstechniken überhaupt. Ich kann mich noch an Produkte der Augsburger Puppenkiste erinnern, etwa Jim Knopf, die genauso angelegt waren, wobei die einzelnen Elemente auf Pappstreifen geklebt und mit der Hand bewegt wurden.

Da ist der Parallax Background Builder sehr viel moderner. Er erzeugt seine Ergebnisse weitaus schneller und ganz ohne Papier und Schere…

Am Ende des Erstellungsprozesses liefert PBB einen Javascript-Codeschnipsel, der die zuvor zusammengeklickte Animation beinhaltet und steuert. Hierzu ist die Einbindung der PBB Api erforderlich. Der Aufruf ist im Codeschnipsel, der wie gewohnt in den Head einkopiert werden muss, bereits enthalten.

Der Weg zur fertigen Animation ist zu Beginn nicht selbsterklärend. Allerdings liefern die Betreiber eine komplett durchdokumentierte Einsteigeranleitung mit. Anhand dieser Doku ist die erste Hintergrundanimation eine Sache von fünf Minuten. Gleichzeitig erschließen sich bei dieser Gelegenheit die Konfigurationsoptionen wie von selbst. Sechs vorgefertigte Beispiele, etwa dieser kitschig-romantische Sonnenuntergang, wissen zu inspirieren.

PBB bringt eine kleine Bildergalerie frei nutzbarer Grafikelemente mit, die teilweise auf allen Achsen wiederholend eingesetzt werden können, teilweise aber auch nur horizontal dupliziert einen sinnvollen Nutzen spenden. Neben den eher zu Lernzwecken nützlichen Elementen der Galerie kann jedes beliebige per URL verfügbare Bild zur Verwendung gelangen. Der Upload muss zu diesem Zeitpunkt logischerweise bereits erledigt sein, ein Imagehosting bietet PBB nicht.

Parallax Background Builder: Die einzelnen Schritte im Überblick

Die einzelnen Grafikelemente werden auf einzelne Ebenen gelegt. So lassen sie sich einzeln animieren. Zwar könnte eine gemeinsame Animation mehrerer Elemente auf einer Ebene auch schon einmal Anwendungsfall sein, jedoch ist diese Möglichkeit mit PBB nicht gegeben. Hier erhält jedes Element eine eigenen Ebene.

Mit dem Erstellen einer neuen Ebene muss entweder eine Bild-URL spezifiziert oder ein Element aus der Bildergalerie gewählt werden. Danach werden die Konfigurationsmöglichkeiten frei. So ist ein Bild stets entweder Muster (Pattern) oder Bild (Image). Definiert man es als Muster, legt man noch fest, ob es auf der X-, der Y-Achse oder beiden Achsen wiederholt werden soll. ZUdem gibt man optional einen Offset in Pixeln an oder legt das Element an den unteren Bildrand (Snap to bottom). Hat man sich für die Option Bild (Image) entschieden, lässt sich das dann nicht mehr wiederholende Bild am linken oder rechten Rand, jeweils oben oder unten einrasten.Ein Offset in Pixeln positioniert das Bild genau dahin, wo Sie es gern sehen möchten.

Zusätzlich lässt sich über einen kleinen Optionsdialog das Verhalten der Ebene steuern. So entsteht der eigentliche Parallax-Effekt, indem man dem Verhalten Mouse-Move eine Richtung, eine Bewegungsachse und eine Geschwindigkeit zuordnet. Nun bewegt sich die Ebene beim Überfahren mit der Maus in den festgelegten Bahnen. Zusätzlich ist es möglich, dasselbe oder ein anderes Verhalten beim Scrollen mit der Maus hinzuzufügen. Sehr nützlich ist, dass der Editor die vorgenommenen Einstellungen direkt live im Editor umsetzt. So kann mit den Optionen regelrecht gespielt, im Sinne von experimentiert werden.

Ist die Animation den Vorstellungen entsprechend hingebastelt, sorgt ein Klick auf Get Embed Code für den per Copy And Paste zu übernehmenden Scriptcode. Diesen baut man nur noch in den Head-Bereich der eigenen Website ein. Fertig! Viel Spaß damit…

Kategorien
JavaScript & jQuery Programmierung

Ideal Forms 2.0: HTML5-Formular-Framework auf jQuery-Basis

Webdeveloper und Autor Cedric Ruiz stellt Version 2 seines Formular-Frameworks Ideal Forms vor. Nach einem kompletten Rewrite steht es auf Github zur kostenlosen Verwendung unter MIT- oder GPL-Lizenz bereit. Ideal Forms macht seinem Namen alle Ehre und bietet in der Tat sehr ansprechende Möglichkeiten, nebst einer soliden Validierung.

Ideal Forms 2.0: Responsiv ist es auch noch…

Ideal Forms setzt in seiner aktuellen Inkarnation auf jQuery ab 1.7 und jQuery UI ab 1.8 und unterstützt Webkit, Firefox, Opera und den Internet Exploder ab Version 8. Auf mobilen Plattformen wird Android ab Version 4 oder iOS ab Version 5 benötigt. Eine Demoseite zum Projekt zeigt anhand eines umfangreichen Formularbeispiels, was mit dem Framework möglich ist.

Die erzeugten Formulare verhalten sich responsiv, Mediaqueries sind nicht erforderlich. Ideal Forms passen sich stets der Größe ihres umgebenden Containers an. Für die optische Präsentation setzt Ruiz auf dynamische Stylesheets mit Less. So konnte er Ideal Forms mit Variablen, Mixins und Funktionen ausstatten, die mit herkömmlichem CSS nicht realisierbar sind. Zudem verfügt das Tool auf diese Weise über prädefinierte Templates. Eine der mitgelieferten Vorlagen verleiht Ihren Formularen den aus Ubuntu bekannten Look. Auf Github steht der Less-Quelltext bereit. Eine kompilierte CSS-Variante wird ebenfalls mitgeliefert.

Sprachlokalisierungen sind sehr einfach möglich. Ruiz sieht hierfür eine errors.js vor, die die entsprechenden Meldungen enthält und sehr leicht übersetzt werden kann. Im Auslieferungszustand finden sich neben dem englischen, fest verdrahteten Standard noch Dateien für französische und spanische Verwender. Eine deutsche Übersetzung gibt es nicht, dürfte indes lediglich einen maximalen Zeitaufwand von 10 Minuten erfordern. Die übersetzte Version der errors.js muss man dann nur noch nach dem Aufruf des Hauptscripts im Header der jeweiligen Seite einbinden.

Neben sprechenden Fehlermeldungen erlaubt Ideal Forms die Hinterlegung von Ausfüllhinweisen, die durch kleine Icons neben den Eingabefeldern per Klick aufgerufen werden können oder sich spätestens beim Beginn des Ausfüllens des jeweiligen Feldes selbstätig öffnen. So ist eine sehr gute Benutzerführung und -unterstützung möglich. Die Funktionalität des HTML5 Placeholders wird über ein Javascript-Polyfill realisiert.

Ideal Forms ist ausgesprochen sorgfältig dokumentiert. Ein schneller Produktiveinsatz ist gewährleistet. Wer also auf der Suche nach einer flexiblen, leistungsfähigen Formularlösung ist, sollte Ideal Forms in die engere Auswahl nehmen.

Kategorien
JavaScript & jQuery Programmierung

Gridster.js für jQuery: Drag & Drop im Grid-Layout

Plugins für das beliebte Framework jQuery sind mal nützlich, mal überflüssig und mal schlicht Spielerei. Zur letzten Gruppe gehört wohl auch das Plugin Gridster.js, welches ein einfaches Grid-Layout um eine schicke Drag&Drop-Funktionalität bereichert. Die einzelnen Elemente des Layouts lassen sich so beliebig innerhalb des Grids verschieben.

Grid-Elemente anlegen und Plugin einbinden

Zunächst werden die einzelnen Grid-Elemente, die sogenannten Widgets, in Form einer Liste angelegt. Jedes LI-Element ist anschließend ein verschiebbares Widget innerhalb eines Rasters. Die Basisgröße für die Widgets, die dann auch Grundlage für das Raster ist, stellt man später über das Plugin ein. Über Data-Dash-Attribute weist man den LI-Elementen die Position innerhalb des Rasters, sowie die Größe der Widgets in Relation zur Basisgröße zu:

<ul id="grid">
  <li data-row="1" data-col="1" data-size-x="1" data-size-y="2"></li>
  <li data-row="1" data-col="3" data-size-x="1" data-size-y="1"></li>
  <li data-row="1" data-col="2" data-size-x="2" data-size-y="2"></li>
</ul>

Die Attribute „data-row“ und „data-col“ geben die Zeile und Spalte an, in denen das Widget platziert werden soll. „data-size-x“ und „data-size-y“ geben an, über wie viele Zeilen beziehungsweise Spalten sich das Element erstrecken soll. Auf diese Weise können mehrspaltige und mehrzeilige Widgets erzeugt werden.

Alles Weitere wird über das Plugin Gridster.js gesteuert, welches zusammen mit jQuery eingebunden werden muss:

<script src="jquery.min.js"></script>
<script src="jquery.gridster.min.js"></script>

<link rel="stylesheet" type="text/css" href="jquery.gridster.min.css">

Außerdem ist eine Stylesheet-Datei einzubinden, welche die nötigen CSS-Eigenschaften zur Verfügung stellt. Ein vorgegebenes Layout ist darin nicht enthalten. Bei der Liste muss beispielsweise noch das Listenzeichen per CSS entfernt werden.

Anschließend wird dem UL-Element das Plugin zugewiesen, welches aus den Listenelementen die einzelnen verschiebbaren Widgets generiert:

$(document).ready(function() {
  $("#grid").gridster({
    widget_margins: [10, 10],
    widget_base_dimensions: [150, 150],
  });
});

Über die Parameter „widget_margins“ und „widget_base_dimensions“ definiert man nun den Abstand der einzelnen Widgets zueinander sowie die Basisgröße der Widgets. Auf der Grundlage dieser Maße werden dann auch die Größen für Widgets berechnet, die mehrspaltig und/oder mehrzeilig verlaufen sollen. Außerdem bilden die Werte die Grundlage für das Raster, innerhalb dessen die Widgets bewegt werden können.

Weitere Einstellungsmöglichkeiten

Es stehen weitere Parameter, mit denen das Plugin angepasst werden kann, zur Verfügung. So ist es möglich, die Anzahl der Reihen und Spalten, die ein Widget überspannen darf, zu begrenzen („max_Size_x“ und „max_size_y“). Außerdem können dynamisch Widgets hinzugefügt und entfernt werden („.add_widgets()“ und „.remove_widget()“).

Fazit: Gridster.js macht aus einem statischen Gridsystem ein dynamisches Layout, welches auf jeden Fall Spaß macht. Alleine die Animationseffekte beim Verschieben der Widgets sind schön anzuschauen. Der reale Nutzwert in Live-Projekten dürfte sich indes eher in Grenzen halten.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

Flex: Hemdsärmeliges jQuery-Plugin für schicken Grid-Effekt

Jason English war begeistert. Die alte Website von Adidas, realisiert auf der Basis von Flash, zeigte ein Grid mit Bildern an, die sich beim Hovern vergrößerten und so die anderen Bilder verschoben. Lange durchwühlte er das Weltennetz auf der Suche nach einer ähnlichen Lösung ohne Flash. Digitale Wegelagerer bedeuteten ihm, er würde diesen Effekt niemals finden, geschweige denn erstellen können. Dies bliebe allein dem dunklen Lord Flash vorbehalten. Doch Jason English machte seinem Namen alle Ehre und dachte sich: Jetzt erst recht! Heraus kam: Flex

Flex: Vergrößert Bildchen innerhalb eines Div-Containers

Wollen wir uns nicht mit langen Vorreden aufhalten. Flex Funktionsweise versteht man am schnellsten, wenn man sich den erforderlichen Quellcode anschaut. Zunächst bindet man das Script nebst jQuery natürlich in die Seite ein:



Dann kommt der eigentlich interessante Teil. Man platziert seine Bildchen manuell in der Form von A-Elementen unter Zuhilfenahme von Inline-Styles wie folgt:

A B C D E F G H I J K

Sie sehen, dass man stark manuell eingreifen muss. Unbedingt ist auf die korrekte Platzierung der Bilder zu achten. Flex geht von einem Abstand von 10 Pixeln zwischen den Bildern aus, der eingehalten werden muss, soll es nicht zu gewöhnungsbedürftiger Optik kommen. Die Inline-Styles definieren die Anzeigegröße, wenn das jeweilige Bild nicht gehovert wird. Die Größenangaben im A-Tag definieren die Anzeigegröße der Bildchen on hover. Die eigentlichen Bilddateien wiederum werden mittels CSS background-image den entsprechend benannten A-Tags zugewiesen:

    .flex {position:relative;width:850px;min-height:300px;margin:0 auto;border:0px solid red;margin-top:10px;}
    .flex a {background-color:white;display:block;width:100px;height:100px;border-radius:8px;position:absolute;background-repeat:no-repeat;background-position:center;border:3px solid white;cursor:pointer;text-align:left;text-shadow:1px 1px 20px #000;color:white;font-size:18px;font-weight:bold;text-indent:10px;line-height:30px;}
    [bg=a] {background-image:url(http://farm8.staticflickr.com/7013/6448917381_0b754e86fb_z.jpg);}
    [bg=b] {background-image:url(http://farm9.staticflickr.com/8156/7362866426_bf285ebd45.jpg);background-size:300px auto;}
    [bg=c] {background-image:url(http://farm6.staticflickr.com/5117/7410370290_0935419fc3.jpg);}
    [bg=d] {background-image:url(http://farm8.staticflickr.com/7262/7419245080_bb752ed1d6.jpg);}
    [bg=e] {background-image:url(http://farm8.staticflickr.com/7003/6468321069_3375be3073_z.jpg);background-size:auto 280px;}
    [bg=f] {background-image:url(http://farm8.staticflickr.com/7220/7342556872_46cddaf9b0.jpg);background-size:auto 280px;}
    [bg=g] {background-image:url(http://farm9.staticflickr.com/8021/7322604950_348c535903.jpg);background-size:auto 200px;}
    [bg=h] {background-image:url(http://farm8.staticflickr.com/7076/7286717012_6e6b450243.jpg);}
    [bg=i] {background-image:url(http://farm8.staticflickr.com/7129/7452167788_a3f6aa3104.jpg);background-size:auto 200px;}
    [bg=j] {background-image:url(http://farm8.staticflickr.com/7153/6480022425_a8d419e663_z.jpg);background-size:auto 280px;}
    [bg=k] {background-image:url(http://farm8.staticflickr.com/7225/7269592732_c4b7918626.jpg);background-size:auto 280px;}

Zu guter Letzt ruft man die Funktion .flex auf und der Spaß kann beginnen.

    $(function() {
        $(".flex").flex();
    });

Flex steht zur kostenfreien Verwendung in der Version 0.2 auf Github zum Download bereit. English betreibt zusätzlich eine Demoseite, die zeigt, was aus den hier verwendeten Codeschnipseln entsteht. In späteren Versionen soll auf große Teile der aktuell noch erforderlichen Handarbeit verzichtet werden können. Mitstreiter sind jederzeit willkommen.

Kategorien
JavaScript & jQuery Programmierung

Blur.js und HTML5: Transparente Hintergrundelemente mit Unschärfe

Das jQuery-Plugin Blur.js macht aus einfachen Container-Elementen transparente Fenster, bei denen der Hintergrund unscharf hindurch scheint. Was bei Betriebssystemen gerne verwendet wird, um Fenster im Vordergrund vom Hintergrund abzusetzen, funktioniert dank des Plugins auch im Browser. Voraussetzung ist ein moderner Browser mit Canvas-Unterstützung.


Blur.js

Blur.js: Schnell eingerichtet und angewendet

Blur.js ist schnell eingerichtet und mit Hilfe seiner einfachen Einstellungsmöglichkeiten auch schnell auf ein Element angewendet:

$(".fenster").blurjs({
  source: "body",
  radius: 7,
  overlay: "rgba(255, 255, 255, 0.5)"
}

Per jQuery-Selektor wird das Plugin einem oder mehreren Elementen zugewiesen, im Beispiel allen Elementen mit der Klasse „fenster“. Über den Parameter „source“ wird das Element angegeben, welches als Hintergrund verwendet werden soll. In vielen Fällen dürfte schlcht das Body-Element in Frage kommen. Interessant wird das Ganze natürlich nur, wenn im Body eine Hintergrundgrafik anstatt lediglich einer Farbe definiert wird.

Über den Parameter „radius“ wird der Grad der Unschärfe angegeben und über „overlay“ kann eine Hintergrundfarbe inklusive Opazität für die Elemente, auf die das Plugin angewendet werden soll, definiert werden.

Blur.js sorgt nun dafür, dass die im Body-Element definierte Hintergrundgrafik unscharf durch die Elemente hindurch scheint. Per Canvas-Funktion getContext("2d") wird der Hintergrundausschnitt mit einer Unschärfe versehen, die dann als Hintergrundgrafik für die einzelnen Elemente eingesetzt wird.

Andere Elemente für den Hintergrund verwenden

Statt das Body-Element als Hintergrund zu verwenden, können auch beliebige andere HTML-Elemente als Quelle ausgewählt werden. Interessant ist diese Möglichkeit, falls in einem HTML-Dokument mehrere Container mit Hintergrundgrafiken versehen sind, auf die dann Elemente platziert werden:

$(".fenster").blurjs({
  source: "#hintergrund",
  radius: 7,
  overlay: "rgba(255, 255, 255, 0.5)"
}

Im Beispiel wird das Element mit der ID „hintergrund“ als Quelle für den unscharfen Hintergrund aller Elemente mit der Klasse „fenster“ festgelegt. Da der Blur-Effekt nur auf Hintergrundgrafiken angewendet werden kann, ist es wichtig, dass beim Element „hintergrund“ eine Grafik per „background-image“ definiert wurde. Andere Grafiken und Texte innerhalb des Hintergrund-Elementes werden ignoriert.

Auch verschiebbare Elemente sind möglich

Blur.js erlaubt es zudem, Fenster verschiebbar zu machen. Voraussetzung ist, dass die jQuery-UI-Bibliothek im HTML-Dokument eingebunden ist:

$(".fenster").blurjs({
  source: "body",
  radius: 7,
  overlay: "rgba(255, 255, 255, 0.5)",
  draggable: true
}

Die entsprechenden Elemente lassen sich nun verschieben. Der unscharfe Hintergrund wird während des Verschiebens angepasst, sodass immer der richtige Ausschnitt dargestellt wird. Die Draggable-Funktionalität läuft allerdings nur korrekt, wenn die Hintergrundgrafik mit „background-position: fixed“ versehen ist und sich beim Scrollen nicht mit bewegt.

Fazit: Blur.js ist ein modernes Plugin, das sehr einfach sehr schicke transparente Container-Elemente erzeugt.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

Eindrucksvolle Präsentationen mit Impress.js

Präsentationen sind nicht immer schön gestaltet und beeindrucken auch eher selten durch ihre Aufmachung. Wer gerne eindrucksvoller präsentieren möchte und auf klassische Anwendungen verzichten kann, sollte sich Impress.js anschauen. Das Tool macht aus einer einfachen HTML-Seite eine dynamische Präsentation, die allein schon durch ihre Übergänge beeindruckt.


Demo von Impress.js

Die Idee von Impress.js erinnert stark an den Präsentationsdienst Prezi, der auf ähnliche Weise funktioniert. Statt eine Präsentation auf verschiedenen Folien unterzubringen, die im schönsten Fall nett überblenden, werden bei Impress.js alle Inhalte auf einer Seite untergebracht. Per Animation werden einzelne Bereiche per Zoom in den Anzeigebereich des Browserfensters in Bewegung gebracht.

Inhalte erstellen und Impress.js anwenden

Zunächst einmal werden die einzelnen Inhalte der Präsentation im HTML-Dokument untergebracht. Alle Inhalte müssen innerhalb eines Containers mit der ID „impress“ liegen. Darin enthalten sind alle Schritte der Präsentation (in einer klassischen Präsentation wären es die einzelnen Folien). Jedem Schritt muss die Klasse „step“ zugewiesen werden.

Darüber hinaus macht man für jeden Schritt über Data-Dash-Attribute zusätzliche Angaben zur Position, zu Winkel und Zoomfaktor:

<div id="impress">
  <div class="step" data-x="0" data-y="0">
    Inhalt des ersten Schrittes
  </div>
  <div class="step" data-x="1000" data-y="0" data-scale="2" data-rotate="90">
    Inhalt des zweiten Schrittes
  </div>
</div>

Das Beispiel zeigt zwei Schritte einer Präsentation. Über „data-x“ und „data-y“ werden die einzelnen Elemente innerhalb der Präsentationsfläche positioniert. Das zweite Element wird per „data-rotate“ gedreht und per „data-scale“ auf die doppelte Größe des ersten Elementes vergrößert.

Per Pfeiltasten wechsekt man zwischen den einzelnen Präsentationsschritten. Eine Animation sorgt für den Übergang zwischen den beiden Schritten. Der jeweils ausgewählte Schritt wird dann im Zentrum des Browserfensters ohne Drehung und Zoom dargestellt.

Damit Impress.js auch läuft, muss am Ende des HTML-Dokumentes noch die JavaScript-Datei eingebunden und das Script gestartet werden:

<script src="impress.js"></script>
<script>impress().init();</script>

3D-Effekt und Browserunterstützung

Auch 3D-Effekte können bei den animierten Übergangen mit eingebaut werden. Statt einer Rotatation mit „data-rotate“ lassen sich Elemente perspektivisch drehen:

<div id="impress">
  <div data-x="0" data-y="0">
    Inhalt des ersten Schrittes
  </div>
  <div data-x="1000" data-y="0" data-scale="2" data-rotate-x="15" data-rotate-y="15" data-rotate-z="30">
    Inhalt des zweiten Schrittes
  </div>
</div>

Über die Angabe dreier verschiedener Winkel wird das Element in seiner Perspektive verändert. Auf diese Weise können sehr dynamische und abwechslungsreiche Übergänge zwischen den einzelnen Schritten erzeugt werden.


3D-Übergang mit Impress.js

Impress.js nutzt für alle Effekte die verschiedenen Möglichkeiten von CSS3, weshalb das Tool nur auf aktuellen Browsern funktioniert. Gerade der Einsatz von CSS3-3D-Transforms für die perspektivische Drehung wird von einigen Browsern (Internet Explorer und Opera) noch nicht unterstützt.

Außerdem setzt Impress.js die HTML5-APIs „dataset“ und „classList“ ein, die ebenfalls nur von aktuellen und nicht allen (wieder Internet Explorer) Browsern unterstützt werden.

Impress.js und Prezi

Im Gegensatz zum kommerziellen Anbieter Prezi ist der Einsatz von Impress.js komplett kostenlos. Es ist unter der MIT– und GPL-Lizenz veröffentlicht. Außerdem läuft Impress.js auf dem eigenen Webserver und kommt ohne Anbieterkennzeichnung daher – Unter allen Aspekten handelt es sich also um eine lohnenswerte Alternative zu Prezi.

Fazit

Impress.js sorgt in der Tat für sehr eindrucksvolle Präsentationen. Es gibt zwar kein Manual für die Handhabung, dafür aber eine kommentierte Demo. Da das Tool sehr einfach zu verwenden ist, wird man sich mit Hilfe der Kommentare sehr schnell einlesen und eigene Präsentationen erstellen können.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

MiniJs: Kleine jQuery-Plugins für schönere Websites

Manchmal sind es die kleinen Dinge, die eine Website besonders machen. Gerade mit JavaScript kann ein Webprojekt an der ein oder anderen Stelle attraktiver und funktionaler gestaltet werden. MiniJs ist eine Suite, bestehend aus sieben nützlichen jQuery-Plugins, die schnell eingebaut sind und mehr als bloße Effekthascherei bieten.


MiniJs

Jedes der sieben Plugins von MiniJs ist separat verfügbar, sodass nicht unnötig viel Quelltext ins entsprechende Webprojekt eingebunden werden muss. Alle Plugins der Suite haben eines gemeinsam: Es sind keine weltbewegenden Features, sondern kleine und nützliche Funktionen.

Zähler, Slider und Dropdown-Menü

Die Bandbreite der MiniJs-Plugins reicht vom Wortzähler bis zum schicken Slider. Und jedes Plugin – so simpel die Funktionalität auch erst einmal klingt – ist zudem noch sehr individuell einstellbar. Hier ein Überblick über die sieben Funktionen:

Count
Der Counter zählt nicht nur Zeichen, Wörter und ganze Sätze bei Formular-Eingabefeldern. Es gibt auch die Möglichkeit, eine Mindest- und Höchstanzahl anzugeben. Wird diese Anzahl unter- oder überschritten, wird das über die Gestaltung des Feldes kenntlich gemacht.

Tipp
Dieses Plugin wandelt Title-Attribute beliebiger HTML-Elemente in schön gestaltete Tooltipps um. Hier gibt es zudem die Möglichkeit, das Einblenden der Tooltips erst bei einem Mausklick auszulösen, anstatt beim Hover, wie es bei Tooltipps sonst üblich ist.

Slider
Der Slider macht aus einzelnen Kindelementen eines Container-Elementes eine Slider-Animation, die sehr individuell einstellbar und gestaltbar ist. Autoplay, Einblendung einer Navigation und Animationsdauer sind ebenso einstellbar wie die Vergabe eigener Klassen zur individuellen Gestaltung des Sliders.


Standard-Slider

Notification
Dieses Plugin blendet per Mausklick einen Hinweis am oberen Rand des Browserfensters ein. Die Form der Darstellung (per Fade-in oder Slide-Animation) ist einstellbar. Optional kann der Hinweis mit einem Schließen-Button versehen werden.

Feed
Hierüber ist es sehr einfach, einen Twitter-Feed in ein Webprojekt zu integrieren. Auch diese Darstellung ist indivualisierbar, indem eigene Klassen vergeben werden und die einzelnen darzustellenden Elemente (Avatar, Tweet und Zeit) separat auswählbar sind.

Alert
Dieses Plugin funktioniert ähnlich wie das Notification-Plugin. In diesem Fall wird die Nachricht als Box an einer beliebigen Stelle der Website eingeblendet und kann per Klick ausgeblendet werden.

Dropdown
Mit dem Dropdown-Plugin wird aus einer verschachtelten Liste eine Navigationsleiste, bei denen Unterpunkte per Dropdown dargestellt werden. Die Einblendung der Dropdown-Elemente ist über das Plugin einstellbar.

Einfache Integration und Gestaltung

Das Einbinden der Plugins ist äußerst einfach. Das benötigte HTML-Gerüst ist auf ein Minimum reduziert. Beim Dropdown-Plugin reicht eine Liste, beim Slider reicht ein DIV-Element mit mehreren P-Kindelementen. Das Plugin selbst wird einem HTML-Element mit einigen wenigen Zeilen JavaScript zugewiesen, wie zum Beispiel beim Slider:

$("#slider").miniSlider({
 pauseOnHover: true,
 showNavigation: false,
 showPagination: false,
 delay: 500,
 transitionSpeed: 4000
});

Jedes Plugin bringt seine eigene CSS-Datei mit, welche die jeweilige Gestaltung der einzelnen Plugins beinhaltet. Viele der Klassen zum Gestalten einzelner Elemente können per Plugin verändert werden.

Die Plugins von MiniJs von Matthieu Aussaguel sind kostenlos einsetzbar und kommen mit einer ausführlichen Beschreibung daher, die das Einbinden und Anpassen einfach macht.

Fazit: Wer sein Webprojekt mit nützlichen Funktionen aufwerten möchte, sollte definitv einen Blick auf die Plugin-Suite MiniJs werfen.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

Flexible Schriftgrößen mit FitText für jQuery

Prozentuale Angaben machen es möglich, Inhalte einer Website per CSS auf die Breite des Browserfensters zu skalieren. Selbst Bilder lassen sich auf diese Weise so skalieren, dass sie immer eine Breite in Relation zur Fenstergröße einnehmen. Bei Texten funktioniert das nur bedingt. Zwar kann eine Textspalte entsprechend skaliert werden, nicht aber die Schriftgröße. Das jQuery-Plugin FitText ändert das.


FitText

Das Prinzip von FitText ist einfach: Wird das Plugin auf einen Text angewendet, wird die Schriftgröße in Relation zur Breite des Elternelementes hoch- oder herunterskaliert. So nimmt der Text – unabhängig davon, wie groß das Browserfenster ist – immer gleich viel Platz ein.

FitText einsetzen

Zunächst muss das Plugin zusammen mit jQuery im Seitenkopf eingebunden werden:

<script src="http://code.jquery.com/jquery-1.7.2.js"></script> <script src="jquery.fittext.js"></script>

Anschließend wird den HTML-Elementen, die mit FitText skaliert werden sollen, per jQuery-Selektor das Plugin zugewiesen:

$("#headline").fitText();

Mehr ist zunächst nicht zu machen, um zu erreichen, dass FitText die Texte skaliert. Allerdings gibt es noch zusätzliche Einstellmöglichkeiten, um die Skalierung der Texte zu beeinflussen. So kann über die optionale Angabe eines Dezimalwertes eingestellt werden, wie stark die Schrift vergrößert oder verkleinert werden soll. Der Standardwert ist Eins. Werte größer als Eins skalieren die Schrift weniger stark, Werte kleiner als Eins skalieren die Schrift stärker:

$("#headline1").fitText(0.5); // Starke Skalierung
$("#headline2").fitText(5); // Geringe Skalierung

Schriftgrößen einschränken

Als zusäzliche Option kann eine Einschräknung für die Schriftgröße eingestellt werden. Auf diese Weise wird eine Schrift nie kleiner als die Mindestgröße und nie größer als der Maximalwert dargestellt:

$("#headline").fitText(1, {
  minFontSize: "25px",
  maxFontSize: "175px"
});

Je nach Länge der Texte ist es sinnvoll, Schriftgrößen einzuschränken, da es ansonsten schnell zu Einbußen bezüglich der Lesbarkeit kommen kann.

Fazit: Gerade für responsive Websites, bei denen die Schriftgröße mitskaliert werden soll, bietet sich der Einsatz von FitText an.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

Roundabout: jQuery-Plugin bringt schicke Coverflow-Optik in unsortierte Listen

Fred LeBlancs jQuery-Plugin Roundabout bringt in seiner Grundkonfiguration die aus iTunes bekannte Coverflow-Optik, auch Turntable genannt, in jedes simple UL-Element. Es kann mit Textinhalten ebenso gut umgehen wie mit Bildern und bietet fortgeschrittenen Verwendern eine Fülle weiterer Optionen über eine komplette API. Zudem steht das Komplementär-Plugin Roundabout Shapes zur Verfügung, mit der der Turntable-Effekt um weitere Effekte ergänzt werden kann.

Roundabout: Schöner Effekt bei wenig Codeaufwand

Fred LeBlancs Roundabout-Plugin ist kostenlos unter BSD-Lizenz sowohl privat, wie auch kommerziell nutzbar und steht auf GitHub zum freien Download zur Verfügung. Es setzt jQuery ab Version 1.2 voraus und wurde positiv auf Kompatibilität zur aktuellsten Version getestet.

Die Verwendung ist in der Standardeinstellung sehr simpel. Lediglich folgende Snippets sind erforderlich.

Zunächst muss jQuery samt Script eingebunden werden:



Dann benötigt man ein UL-Element:

Zu guter Letzt wird Roundabout auf dieses UL-Element gerichtet:

Fertig! Die unsortierte Liste wird jetzt mit dem Turntable-Effekt versehen. Bindet man zusätzlich das Plugin Roundabout Shapes ein, stehen eine ganze Reihe weiterer Effekte zur Verfügung. Auch die Verwendung dieser Effekte ist extrem simpel. Der Funktionsaufruf wird nur um den gewünschten Shape erweitert:

Fred LeBlanc liefert seine PLugins mit einer fantastischen Dokumentation und vielen ansprechenden Demos, etwa dieser via CSS gestylten 3D-Turntable, aus. Wer sich mit Roundabout beschäftigen will, findet auf Freds Website sowohl einen einfachen Einstieg, wie auch exzellente Vertiefungen für anspruchsvollere Einsatzgebiete.

Kurz: Roundabout gehört in die Toolbox eines jeden jQuery-Enthusiasten.

Kategorien
JavaScript & jQuery Programmierung

HalloJS: InPage-Editing als Plugin für jQuery UI

Das beste Editing auf Websites ist doch stets dasjenige, das ohne separate Textareas funktioniert. Jeder Nutzer versteht sofort und ohne Einweisung, wenn man ihm sagt, er bräuchte Texte bloß anzuklicken, um Änderungen vorzunehmen. HalloJS will in der Endausbaustufe genau das erreichen. Dabei ist es schon jetzt recht funktionsreich. Mit kommenden Plugins lässt sich der Featureumfang noch deutlich erweitern.

EU-Topfschlagen: Fördermittel aus Steuergeldern fließen in erstaunliche Projekte

Haben Sie sich schon manchmal gefragt, was Sie mit 6,58 Millionen Euro Fördermittel der EU machen würden? Henri Bergius vom IKS Projekt hat für sich eine Antwort gefunden. Er entwickelte ein kleines Plugin für jQuery UI, mit dessen Hilfe beliebige DOM-Elemente editierbar gemacht werden können und stellte es unter die MIT-Lizenz. Das ist bezogen auf die Förderhöhe natürlich ein bisschen überspitzt ausgedrückt, wenn auch nicht ganz unwahr.

Das IKS-Projekt, in dessen Rahmen HalloJS entwickelt wird, insgesamt mit der genannten Summe von der EU co-gefördert, soll semantische Technologien für gängige CMS-Systeme verfügbar machen. Wer sich jetzt fragt, worin die zwingende Notwendigkeit der Förderung derartiger Projekte liegt, hat meine volle Sympathie. Es ist allerdings nicht unüblich, der Industrie über Fundraiser indirekt Steuermittel zuzuschustern, damit Projekte bearbeitet werden, an denen die Industrie an sich ein hinreichendes Eigeninteresse haben sollte. Mit anderen Worten: Die Bankenrettung lässt grüßen, nur in kleinerem Umfang und seit Jahrzehnten etabliert…

HalloJS: Modular entwickelt und ebenso erweiterbar

Die Idee hinter HalloJS ist, ungeachtet der dahinter stehenden Finanzierung, interessant. HalloJS, entwickelt in CoffeeScript, ist ein einzelnes JavaScript, das zur Funktionsfähigkeit jQuery und jQuery UI voraussetzt. Es soll beliebige DOM-Elemente selektiv editierbar machen. Da es auf einzelne Tags losgelassen werden kann, kann der Zugriff der Nutzer ganz gut auf diejenigen Bereiche begrenzt werden, die tatsächich bearbeitet werden können dürfen. Eine Rechteverwaltung darf man natürlich nicht erwarten.

Möchte man beispielsweise alle P-Elemente einer Seite editierbar machen, so lautet der Aufruf, nachdem die erforderlichen Skripte eingebunden sind:

jQuery('p').hallo();

Der vorstehende Aufruf sorgt nur für die Editierbarkeit der entsprechenden Elemente, Formatierungsmöglichkeiten sind damit nicht gegeben. Für diese Funktionalität setzt HalloJS auf sog. Plugins, die allerdings stark fragmentiert erscheinen. So gibt es derzeit sechs verschiedene dieser Plugins:

  • halloformat bringt die Formatierungen fett, kursiv, durchgestrichen und unterstrichen
  • halloheadings bringt H1, H2 und H3
  • hallojustify erlaubt das Setzen von links- und rechtsbündigen Texten, sowie Zentrierungen
  • hallolists unterstützt UL- und OL-Elemente
  • und so weiter

Mir ist nicht klar, wieso diese im Grunde essentiellen Möglichkeiten dermaßen zerstückelt hinterlegt sind und deshalb natürlich explizit zu jedem Element hinzugefügt werden müssen. Das sieht beispielsweise so aus:

jQuery('.editable').hallo({
  plugins: {
    'halloformat': {}
  }
});

Eine ausführlichere Dokumentation lässt sich den Kommentaren innerhalb der CoffeeScript-Quelltextdatei hallo.coffee abringen.

Nicht zuletzt in Anbetracht der Finanzkraft des Projekts lohnt es sich in jedem Falle, die Entwicklung von HalloJS im Auge zu behalten.

Kategorien
JavaScript & jQuery Programmierung

Turn.Js: Websites mit Zeitungsoptik und Blättereffekt

Wenn es darum geht, Druckerzeugnisse wie Magazine oder Zeitungen auf einer Website zu veröffentlichen, wird gerne auf Umblättereffekte zurückgegriffen. So kann eine möglichst realistische Funktionalität sowie ein entsprechendes Erscheinungsbild gewährleistet werden. Auf der Grundlage von Flash entstanden entsprechende Templates, die sich leicht anpassen ließen. In Zeiten von HTML5 und CSS3, in denen Flash immer mehr in den Hintergrund gerät, sind auch für Umblättereffekte andere Lösungen gefragt. Das jQuery-Plugin Turn.js ist eine solche.


Turn.js

Turn.js einbinden und anwenden

Turn.js wandelt DIV-Container in virtuelle Zeitschriften mit Umblättereffekt um. Die Einbindung und individuelle Anpassung sind einfach umzusetzen. Zunächst müssen jQuery und das Plugin im HTML-Kopf aufgerufen werden:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="turn.min.js"></script>

Anschließend werden per HTML die einzelnen Seiten angelegt. Dazu wird für jede Seite ein DIV-Container erzeugt. Alle Seiten-Container müssen sich in einem übergeordneten Container befinden, auf den Turn.js angwendet wird:

<div id="magazin">
  <div class="seite1">Hier steht der Inhalt von Seite 1.</div>
  <div class="seite2">Hier steht der Inhalt von Seite 2.</div>
  <div class="seite3">Hier steht der Inhalt von Seite 3.</div>
  <div class="seite4">Hier steht der Inhalt von Seite 4.</div>
</div>

Der Inhalt der einzelnen Seiten kann ganz individuell gestaltet werden. Es können unter anderem Bilder, Tabellen und Listen dargestellt werden. Wichtig ist nur, dass alle Seiten-Container dieselbe Größe haben. Ist ein Container zu groß, kommt es beim Umblättern zu fehlerhaften Darstellungen. Die eigentliche Seite wird jedoch immer auf die Größe des Magazins zurechtgeschnitten.

Um Turn.js auf einen Container anzuwenden, wird dem entsprechenden Element das Plugin zugewiesen:

<script type="text/javascript">

  $("#magazin").turn({
    display: "double"
  });

</script>

Anschließend lassen sich die angelegten DIV-Container wie ein Magazin durchblättern. Dazu zieht man jeweils eine Seitenecke nach links oder rechts, um vor- beziehungsweise zurückblättern zu können. Die Ecken bilden beim Überfahren mit der Maus Eselsohren. Es gibt etliche Einstellungsmöglichkeiten, um die Umblätterfunktion anzupassen.


Beispiel für den Einsatz von Turn.js

Turn.js individuell anpassen

Über den Aufruf „.turn()“ können dem Plugin verschiedene Optionen hinzugefügt werden. Die Option „display“ beeinflusst beispielsweise, ob immer nur eine Seite („single“) dargestellt wird oder ob – wie es bei einem gedruckten Magazin der Fall ist – Doppelseiten („double“) dargestellt werden sollen.

Über die Option „page“ wird angegeben, welche Seite beim Laden des HTML-Dokumentes angezeigt werden soll. Diese Option ist nützlich, falls nicht die Titelseite, sondern eine aufgeschlagene Innenseite geladen werden soll. Über „duration“ wird die Dauer der Umblätteranimation festgelegt. Beim Wert Null wird beim Loslassen der Maus ohne Animation die Seite gewechselt.

Kostenfreie und kostenpflichtige Version

Derzeit ist Turn.js in zwei Versionen erhältllich. Die ältere Version 3 ist für nicht-kommerzielle Projekte kostenfrei. Kostenpflichtige Projekte müssen 45 US-Dollar für eine Lizenz bezahlen. Die neuere Version 4 gibt es nur in einer kostenpflichtigen Version ab 99 US-Dollar. Beide Lizenzen berechtigen zum Einsatz des Plugins auf bis zu fünf Domains.

Die neuere Version hat einige zusätzliche Features. So  können Übergänge für Hardcover-Umschläge simuliert werden. Außerdem gibt es eine Zoomfunktion sowie die Möglichkeit, Seiten in unterschiedlicher Größe einzubinden.

Browser-Support

Turn.js funktioniert in allen aktuellen Browsern, inklusive dem Internet Explorer 9. Außerdem werden auch mobile Geräte – sowohl Android als auch iOS – unterstützt.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

StyledSelect für jQuery: Standard-Select-Elemente in hübsch

Das Select-Element gehört zum absoluten Standard-Repertoire vor allem im Formulardesign. Mit der Verbreitung mobiler Clients setzt es sich zudem immer mehr als alternative Navigationslösung für kleine Display-Auflösungen durch. Immerhin passt ein Select-Element auch in den kleinsten Viewport. Der Nachteil an der Sache ist, dass das Element nicht sehr ansehnlich ist. So haben sich verschiedene Alternativen entwickelt. Das hier vorgestellte StyledSelect hat den besonderen Charme, dass es etwa vorhandene Select-Elemente nicht ersetzt, so dass ein unproblematischer Fallback in Browsern ohne Javascript gewährleistet bleibt.


Viel Auswahl mit dem Select-Element, aber auch ohne (Bildquelle: jcpoffet / pixelio.de)

StyledSelect: Klassenbasierte Hübschifizierung

Die Anwendung des kleinen Javascripts StyledSelect ist in der einfachsten Variante so simpel wie der Aufruf von:

$('select').styledSelect();

Zusätzlich akzeptiert styledSelect() eine Reihe von optionalen Parametern, die sich im Wesentlichen mit der Behandlung der einzelnen Klassen, über die StyledSelect die Optik steuert, befassen.

{       
        selectClass: 'styledSelect',
        openSelectClass: 'open',
        optionClass: 'option',
        selectedOptionClass: 'selected',
        closedOptionClass: 'closed',
        firstOptionClass: 'first',
        lastOptionClass: 'last',
        zIndexApply: false,
        zIndexStart: 250,
        deactiveOnBackgroundClick: true
}

Um das Standard-Element zu ersetzen, wird nun ein Div-Container mit der Klasse styledSelect versehen. Die einzelnen Auswahlpunkte werden innerhalb einer Liste ul definiert, wobei die Select-Werte dem li-Tag als rel-Attribut beizufügen sind. Das sieht dann so aus:

 
  • Title 1
  • Title 2
  • Title 3
  • Title 4

StyledSelect ist nicht neu, sondern wird bereits seit einigen Jahren auf Google-Code gehostet. Insofern kann es funktional nicht mit neueren Plugins, wie dem hier vor einiger Zeit vorgestellten ddSlick mithalten. StyledSelect ist jedoch die einzige, mir bekannte, quasi minimal-invasive Lösung, wenn es um die Substitution des Standardelements geht.

Der Entwickler stellt die fortgeschrittenen Möglichkeiten des Plugin auf einer eigenen Demoseite zum Produkt ausführlich vor. StyledSelect ist kostenfrei nutzbar und sollte für den Anwendungsfall mobiler Clients stets in Erwägung gezogen werden.

Kategorien
JavaScript & jQuery Programmierung

jQuery: Notification-Leisten und Tooltipps mit Notify und Gips

Benachrichtigungsleisten erfreuen sich nicht erst seit Android und dem Nachbau unter iOS erhöhter Popularität. Am oberen Browserrand einblendende Nachrichtenleisten können flexibel eingesetzt werden und sorgen in jedem Falle für hohe Aufmerksamkeit. Ähnlich populär sind Tooltips, die an anderen Elementen, zumeist Formulareingabefeldern, kurze, aber wichtige Zusatzinfos liefern. Heute stellen wir für beide Anwendungsbereiche je ein einfaches jQuery-Plugin vor. Es handelt sich um Gips und Notify, die beide ihren Ursprung auf Greepit.com fanden.

Notify: Benachrichtigungsleisten für alle Fälle

Das Plugin Notify! bietet vier verschiedene Arten von Nachrichtenleisten. Diese können ständig sichtbar oder mit dem Scrollbalken beweglich, am oberen Browserrand fixiert oder nur auf Klick des Anwenders sichtbar sein. Inhaltlich sind den Leisten keine Grenzen gesetzt. So können sie auch Videos, Bilder oder RSS-Content beherbergen. Optisch sind die Leisten komplett anpassbar, so dass sie sich in jedwedes Design einfügen können.

Notify! steht auf Greepit.com kostenlos zum Download zur Verfügung. Eine Demo findet sich hier.

Gips: Tooltip-Plugin für jedes Farbschema

Das Tooltip-Plugin Gips von eGrappler ist inspiriert von einem PSD-Freebie gleichen Namens aus dem Hause Greepit.com. Unter exakter Umsetzung des Layouts schraubte man ein jQuery-Plugin zusammen, dessen Optik per CSS anpassbar ist, sich aber im Standard am Original orientiert.

Die Tooltipps sind hinsichtlich ihrer Position und Farbgebung frei konfigurierbar. Zudem können viele weitere Parameter eingestellt werden. Der Tooltipp-Content ist allerdings auf Text beschränkt. Ist ein Close-Button gewünscht, kann dies nur über eine Grafik realisiert werden. Das ist heutzutage suboptimal. Als Workaround lässt sich das Anzeigeende per autoHide bestimmen.

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

Grundlinienraster im Webdesign mit Baseline.js

Webdesigner, die auch im Printbereich beheimatet sind, kennen aus InDesign und Quark die Möglichkeit, Bilder an einem Grundlinienraster auszurichten. Gerade wenn Text und Bild nebeneinander stehen, sorgt die Ausrichtung an einem Raster für ein einheitliches Bild. Das jQuery-Plugin Baseline.js implementiert eine ähnliche Möglichkeit für Weblayouts.


Baseline.js: Bilder mit (links) und ohne (rechts) Grundlinienraster

Baseline.js ist ein jQuery-Plugin, das Bilder innerhalb eines HTML-Dokumentes so skaliert, dass sie in ein vorgegebenes Grundlinienraster passen.

jQuery und Baseline.js einbinden

Die Vorgehensweise ist einfach. Zunächst werden jQuery und das Baseline-Plugin im HTML-Kopf eingebunden:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.baseline.js"></script>

Anschließend wird ein Grundlinienraster in Pixel angegeben, welches auf alle oder bestimmte Bilder innerhalb des Dokumentes angewendet wird:

<script type="text/javascript">
$(document).ready(function() {
    $("img").baseline(18);
})
</script>

Im Beispiel spricht der jQuery-Selektor alle IMG-Elemente an. Sie werden in der Höhe so skaliert, dass sie in das Grundlinienraster von 18 Pixel passen. Das heißt, die Höhe der Bildelemente skaliert so, dass sie immer ein Vielfaches von 18 ist.

Da die Bilder nur in der Höhe skaliert werden – die Breite bleibt erhalten –, erscheinen sie verzerrt. In den meisten Fällen dürfte diese geringe Verzerrung nicht auffallen. Je größer jedoch das Raster ist und je mehr die Höhe des Bildes vom Raster abweicht, desto stärker wird auch die Verzerrung des Bildes sein.

Durch die Anpassung des Selektors erreichen wir, dass sich nur bestimmte Bilder am Grundlinienraster ausrichten:

$("#inhalt img").baseline(18);

Im Beispiel wirkt sich das Raster nur auf Bilder aus, die innerhalb des Elementes mit der ID „inhalt“ liegen.

Baseline.js für unterschiedliche Auflösungen optimieren

Gerade für responsives Layout interessant ist auch die Möglichkeit, das Raster für unterschiedliche Dokumentbreiten separat zu definieren. Dazu gibt man mehrere Rasterwerte in Abhängigkeit der Dokumentbreite an:

$("img").baseline({
  "0px": 18,
  "800px": 9
});

Im Beispiel werden zunächst alle Bilder für ein 18-Pixel-Raster optimiert. Bei einer Dokumentbreite ab 800 Pixel verkleinert sich das Raster auf 9 Pixel. Auf diese Art können mehrere Auflösungen angesprochen werden.

Leider funktioniert diese Möglichkeit in der Praxis nicht, da im Quelltext des Plugins mit „document.width“ gearbeitet wird, was mittlerweile von vielen Browsern nicht mehr unterstützt wird. Diese Angaben müssen durch „document.body.clientWidth“ ersetzt werden. Dann funktioniert es.

Baseline.js von Daniel Eden ist unter der WTFPL-Lizenz verfügbar.

Fazit: Wer viel Wert auf die Einhaltung eines Grundlinienrasters auch im Webdesign legt, ist mit Baseline.js gut bedient. Ohne viel Aufwand und ohne manuelle Anpassung jedes Bildes können alle Bilder automatisch angepasst werden.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

jQuery Vector Maps hilft beim Erstellen von Karten für Websites

In sehr vielen Webseiten sind Karten für verschiedene Zwecke eingebunden. Man findet alles: Weltkarten, Landkarten, Stadtpläne und viel mehr. Zusätzlich kann man den Karten diverse Informationen entnehmen. Welche, hängt von dem Typ einer Karte ab. Einige bieten Standorte von verschiedenen Filialen an, die anderen Sehenswürdigkeiten einer Stadt, mit Fotos oder Videos veranschaulicht. Weiterhin findet man Hotels oder Freizeittipps. Kurz gesagt: eine Karte in die eigene Webseite einzubinden, kann sehr hilfreich sein! Und je mehr man die Karten selbst modifizieren kann, desto besser! Heute stelle ich ein Plugin vor, mit dessen Hilfe verschiedene Karten generiert und nach Wunsch angepasst werden können: jQuery Vector Maps.


(Bildquelle: greencandy8888 auf Flickr | CC-BY-SA)

Was ist jQuery Vector Map?

jQuery Vector Map ist ein jQuery Plugin, welches es erlaubt, Karten in Webseiten zu bauen. Es ist eine stark modifizierte Version des Plugin jVector Map. Mit jQuery Vector Map werden SVG-Daten interaktiv im Browser erstellt. Die Daten werden als JavaScript-Objekte eingelesen. Nachdem sie im Browser eingebaut sind, kann man sie unterschiedlich bearbeiten. Man hat hier ziemlich viel Freiraum. Beispielsweise ist es möglich, die eigenen Karten selbst zu erstellen oder die Farben anzupassen. Auf der Projekt-Webseite stehen der Script Code und vier fertige Karten (Welt, USA, Deutschland, Europa) zum Download bereit. Das Plugin wird von Firefox, Chrome, Opera, Safari und IE9 unterstützt.


jQuery Vector Maps: ein Ausschnitt

Einige Beispiele zur Verwendung von jQuery Vector Maps

Ich habe ein bisschen im Internet gesucht und dabei zwei schöne Beispiele gefunden, welche meiner Meinung nach sehr schön zeigen, was man mit dem JVM-Plugin machen kann. Diese Beispiele stammen von Dr. Mark Roden, einem Chemiker, der seine Leidenschaft im Webdesign gefunden hat und ein ziemlich umfangreiches Blog betreibt.

Informationen über Länder einbauen

Klickt ein Benutzer auf ein Land auf der Weltkarte, bekommt er einige wichtige Informationen darüber, wie beispielsweise die Einwohnerzahl, Lebenserwartung oder Fläche.


Beispiel 1: Informationen über das Vereinigte Königreich

Die Karte farbig machen

Möchte man z.B. die Unterschiede in der Populationsdichte auf der Welt aufzeigen, ist es am besten, mit Farben zu arbeiten. Dort, wo die Population am grössten ist, soll auch die Farbe kräftiger sein und umgekehrt. Das macht Vieles auf eine einfache Art und Weise sehr anschaulich.


Beispiel 2: Farben bestimmen

Kann ich auch eigene SVG-Karten mit dem jQuery Vector Plugin einbinden?

Anscheinend stellen sich viele Leute diese Frage. Zumindest lief sie mir bei meinen Recherchen öfter über den Weg. Dieser Beitrag von Matthias Schütz beantwortet die Frage sehr ausführlich und kompetent. Zwar handelt es sich in diesem Beitrag um den ursprünglichen Plugin jVector Map, meiner Meinung nach aber ist es trotzdem hilfreich, ihn durchzuarbeiten.


Matthias Schütz: wie bindet man eigene SVG-Dateien ein?

Mit demselben Problem beschäftigt sich auch Armando Roggio, Webdeveloper aus Idaho. Auch sein Beitrag kann einen hohen Erkenntnisgewinn bringen.


Erstellung einer eigener Karte: Armando Roggio

Zum Schluss: JVM kann weit mehr, als ich in diesem Post erwähnt habe. Hier ist das persönliche Experimentieren und Rumprobieren erforderlich. Testen Sie es und und erstellen Sie eigene Karten, ganz nach Ihrem persönlichen Geschmack.

(dpe)