Kategorien
Design HTML/CSS

HTML5up: 13 kostenlose und moderne Templates auf Basis von HTML5

Wer nach fertigen Templates für Webprojekte sucht, wird bei Google schnell fündig. Aber nicht immer entsprechen die Vorlagen hinsichtlich Qualität von Quelltext und Gestaltung den eigenen Ansprüchen. Der Dienst HTML5up bietet hingegen einige optisch ansprechende und dank HTML5 und CSS3 auch zeitgemäß umgesetzte Templates für moderne Webprojekte. Und kostenlos sind diese obendrein.

html5up1
Übersicht aller Templates

Templates für unterschiedliche Inhalte

Die meisten kostenlos erhältlichen Templates haben ein klassisches Grundlayout als Basis. Gerade Templates ein und desselben Anbieters unterscheiden sich meist nur marginal – andere Farben, andere Schrift, andere Ornamentik. Mehr Unterschied ist häufig nicht zu erwarten. Die Templates von HTML5up hingegen, sind alle vom Grundkonzept sehr unterschiedlich. Wer ein Blog aufsetzen möchte, braucht ein anderes Grundlayout als jemand, der hauptsächlich Fotos veröffentlichen möchte. Bei HTML5up findet man für sehr unterschiedliche inhaltliche Ausrichtungen passende Vorlagen.

Derzeit stehen 13 verschiedene Templates zur Auswahl – mal für textlastige, mal für bildlastige Websites. Zeitgemäße CSS3-Effekte und Galeriefunktionen per JavaScript machen die Templates auch für professionelle Anwendungen brauchbar. Außerdem sind alle Templates responsiv aufgebaut und für Tablets und Smartphones optimiert.

html5up2
Demoseite eines Templates

Durch die zugrundeliegende Creative-Commons-Lizenz sind die Templates auch für kommerzielle Projekte kostenlos einsetzbar und dürfen nach Belieben angepasst werden. Lediglich ein Verweis auf HTML5up ist Pflicht, wenn man eines der Templates einsetzen möchte.

Demo und Download

Für jedes Template steht eine Demoseite zur Verfügung, die auch eine Vorschau für die Darstellung auf Tablets und Smartphones liefert. Hier kann man ausgiebig testen und schauen, ob das Layout passt. Die Templates stehen als ZIP-Dateien zum Download bereit. Samt Demografiken kann man anschließend die Vorlagen nutzen, um sie für das eigene Webprojekt anzuwenden.

Externe Bibliotheken, wie jQuery und html5shiv, sind Teil des Pakets, sodass man direkt loslegen kann.

Links zum Beitrag

(dpe)

Kategorien
JavaScript & jQuery Programmierung

Sheetrock – jQuery-Plugin für die flexible Anzeige von Google Tabellen auf jeder Website

Chris Zarate mag Google Tabellen so sehr, dass er vor einigen Tagen auf Github ein jQuery-Plugin bereit stellte, mit dessen Hilfe sich Spreadsheets des Dienstes aus Mountain View auf jeder Website anzeigen lassen. Dabei ist die Ansicht sehr flexibel zu konfigurieren, sogar SQL-Befehle können eingesetzt werden, um gezielt nur bestimmte Ergebnisse zu filtern. Zudem ist der Einsatz äußerst einfach, wenn man SQL-Kenntnisse hat.

datentabelle

Sheetrock und Google Tabellen – ein gutes Team

Google Tabellen eignen sich außerordentlich gut für die kollaborative Datenverwaltung. Auch im redaktionellen Alltag begleiten mich die Spreadsheets schon seit vielen Jahren. Wäre es nicht schön, wenn es eine einfache Möglichkeit gäbe, die flexiblen Tabellen auf der eigenen Website einzubinden, eventuell noch mit der Option, Datenteilmengen zu filtern?

Wenn Sie, wie ich, damit etwas anfangen zu wissen, dann ist Sheetrock das Plugin für Sie. Alles, was Sie benötigen, um Sheetrock einzusetzen, ist das Plugin selbst und jQuery nebst der URL einer öffentlich zugänglichen Google Tabelle.

In seiner einfachsten Form sieht der Einsatz so aus. Zunächst gilt es eine Tabelle zu definieren. Die ID wird dem Script übergeben:

Die Funktion zur Anzeige des vollen Inhalts der entsprechenden Google Tabelle sieht dann so aus:

var mySpreadsheet = 'URL_zur_entsprechenden_Tabelle';

$( '#beispieltabelle' ).sheetrock({
  url: mySpreadsheet
});

Nicht immer wird man jedoch die volle Tabelle ungefiltert und unsortiert ausgeben wollen. Zudem empfiehlt es sich bei sehr großen Tabellen nicht, diese auf einen Schlag zu laden und zur Anzeige zu bringen. Unangenehme Wartezeiten auf Besucherseite wären unweigerlich die Folge dieser Vorgehensweise.

Daher fügen wir dem obigen Aufruf folgende Parameter hinzu:

sql: "select A,B,C,D,E,L where E = 'Both' order by L desc",
  chunkSize: 10

Der gesamte Aufruf sieht dann wie folgt aus:

var mySpreadsheet = 'URL_zur_entsprechenden_Tabelle';

$( '#beispieltabelle' ).sheetrock({
  url: mySpreadsheet
  sql: "select A,B,C,D,E,L where E = 'Both' order by L desc",
  chunkSize: 10
});

Über chunksize definieren wir die Anzahl der initial zu ladenden Reihen. Beim Herunterscrollen in der Tabelle werden dann stets 10 weitere Reihen nachgeladen.

sheetrock-640px
So kann eine Google Tabelle auf der eigenen Website aussehen, aber auch ganz anders…

Die Filterung der anzuzeigenden Daten erfolgt mit der an SQL angelehnten Google Visualization API Query Language. Wer sich also in der Vergangenheit schon mit Datenbankabfragen beschäftigen musste, wird sich in Sheetrock schnell heimisch fühlen. In den Links zum Beitrag finden Sie eine Anleitung, wie Sie Tabellen in Google Drive freigeben können.

Über sql definieren wir eine beliebig komplexe Abfrage. Darüber erreichen wir die hohe Flexibilität in der Anzeige der entsprechenden Google Tabelle. Spezielle Funktionen erlauben den Suchzugriff auf Spaltenbezeichnung anstelle derer Koordinaten, etwa select %Team% anstelle von select A. Ein einfaches select reicht natürlich auch, dann werden alle Spalten gezeigt.

Weitere Funktionen, wie die Verwendung verschiedener Template-Systeme, wie Underscores oder Handlebars, für die Anzeige, sowie die Umbenennung von Spalten zur Laufzeit und einiges mehr, ergänzen den ohnehin schon beachtlichen Funktionsumfang des noch in der sehr frühen Version 0.1 vorliegenden Plugins. Ein besonders nützliches Feature will ich noch erwähnen, nämlich userCallback, weil es sich hierbei um einen klassischen Callback-Hook handelt, der eingesetzt werden kann, um weitere Funktionen zu initiieren, sobald das Loading der Datentabelle abgeschlossen ist.

Sheetrock steht unter der MIT-Lizenz für private, wie kommerzielle Anwendungen auf Github zum Download und zur tätigen Mitwirkung bereit. Trotz des frühen Stadiums seiner Entwicklung läuft Sheetrock stabil und schnell, wobei das Geschwindigkeitsempfinden nicht ausschließlich durch Sheetrock beeinflusst ist, sondern viel mehr an der Auslastung der Google API hängt.

Wer Google Tabellen oder Ausschnitte daraus unkompliziert auf seiner Website einsetzen möchte, sollte Sheetrock auf jeden Fall testen. Durch die unkomplizierte Verfahrensweise ist das schnell erledigt.

Links zum Beitrag

Kategorien
JavaScript & jQuery Programmierung

5 jQuery-Plugins, die Leben in Ihre Texte bringen

Texte sind zum Lesen da, sollen bisweilen aber durchaus auffallen. Eine Reihe von jQuery-Plugins stellen Möglichkeiten zur Verfügung, Texte mit Animationen und animierten Hovereffekten in Bewegung zu bringen. Fünf schicke jQuery-Plugins für solche Texteffekte haben wir zusammengestellt.

Sliding Letters: Text per Hover ändern

jquerytexteffekte_slidingletters

Das erste Plugin wechselt per Hovereffekt einen Text per Animation aus. Der Standardtext wird dabei, wie üblich, mit einem A-Element ausgezeichnet. Den Text, der beim Mouseover erscheinen soll, gibt man über ein Data-Attribut an:

<a href="#" id="beispiel" data-hover="Magazin">Dr. Web</a>

Anschließend weisen wir dem Plugin die ID des A-Elementes zu:

$("#beispiel").hoverwords();

Es stehen verschiedenen Einstellungsmöglichkeiten zur Verfügung, um Geschwindigkeit und Art der Animation anzupassen. Die Buchstaben können parallel oder nacheinander ausgetauscht werden. Das Sliding-Letters-Plugin setzt neben jQuery das Easing-Plugin sowie Lettering.js voraus. Alle benötigten Dateien befinden sich im Download-Paket.

Shuffle Letter Effects: Eine Hommage an klassische Anzeigetafeln

jquerytexteffekte_shuffletext

Das Shuffle-Letter-Effects-Plugin erinnert an die klassischen Anzeigetafeln, wie man sie etwa von Flughäfen kennt. Dabei „blättert“ die Anzeige für jeden Buchstaben solange durch den Zeichensatz, bis der richtige Buchstabe erreicht ist.

Das Plugin greift dieses Prinzip auf und stellt einen Text entsprechend dar. Die Anwendung ist einfach. Einem beliebigen per HTML ausgezeichnetem Text wird per jQuery-Selektor der Effekt zugewiesen:

$("#beispiel").shuffleLetters();

Auf der Website des Anbieters gibt es übrigens nicht nur das Plugin samt Demo, sondern auch einen kleinen Einblick in die Entwicklung des Plugin.

textillate.js: Zahlreiche Animationen zur Textein-/-ausblendung

jquerytexteffekte_textillatejs

Textillate.js stellt zahlreiche Effekte zur Verfügung, um Texte ein- und auszublenden. Über eine kleine Demo lassen sich alle Effekte ausprobieren. Da fallen etwa die Buchstaben einzeln von oben herab oder rollen sich in die aufrechte Position.

Das Plugin kann auch hier einem beliebigen Textelement zugewiesen werden:

$("#beispiel").textillate({
  in: {
    effect: "rollIn"
  }
});

Neben den einzelnen Effekten für die Ein- und Ausblendung gibt es weitere allgemeine Optionen – beispielsweise für die Dauer der Einblendung und für die Animation im Loop.

News-Ticker: Der Klassiker

jquerytexteffekte_newsticker

Früher waren News-Ticker ein Klassiker auf Websites. Nachrichtenmeldungen wurden dabei in einem Laufband dargestellt. Das News-Ticker-Plugin erweckt diesen Klassiker per jQuery wieder zum Leben. Dazu werden die einzelnen Meldungen als Liste (UL-Element) ausgezeichnet und per Plugin entsprechend als Ticker dargestellt und animiert:

$("beispiel").ticker();

Als Besonderheit ermöglicht das Plugin die Darstellung eines RSS-Feeds als Ticker. Dazu wird eine RSS-Datei per Ajax geladen:

 $("beispiel").ticker({
  htmlFeed: false,
  ajaxFeed: true,
  feedUrl: "http://example.com/rss.xml",
  feedType: "xml"
});

Text-Animation: Hier ist viel Bewegung drin

jquerytexteffekte_textanimation

Wer es gerne sehr auffällig haben möchte, wird bei diesem Plugin fündig. Das Text-Animation-Plugin geizt nicht mit auffälligen Effekten. Tanzende und blinkende Buchstaben machen jeden Text unübersehbar. Auch diese Effekte lassen sich leicht anwenden:

$("#beispiel").textAnimation({
  mode: "roll"
});

Je nach Effekt gibt es weitere Einstellungsmöglichkeiten für die Ausgestaltung der einzelnen Animationen.

Links zum Beitrag

(dpe)

Kategorien
JavaScript & jQuery Programmierung

Sidr für jQuery: Moderne Sidebar-Navigation mit vielen Finessen

Das sogenannte Panelmenu, oder korrekter Off-Canvas-Menu, ist seit dem Siegeszug mobiler Clients immer populärer geworden. Seitlich rein slidende Navigationsmenüs kennen Sie von nahezu jeder größeren Smartphone-App. Wenn ich mich recht erinnere, war es Facebooks mobile Anwendung, die das Sidebar-Menü als erste einsetzte. Vor einiger Zeit stellten wir mit dem jQuery-Plugin jPanelMenu bereits eine Variante vor, die das Sidebar-Menü für beliebige Websites verfügbar macht. Unsere neueste Entdeckung Sidr kann noch mehr…

sidr-homepage

Sidr für jQuery: Hochflexible Navigationslösung auch für mobile Clients

Technisch betrachtet ist ein Off-Canvas-Menü, also eines, dessen Inhalte sich außerhalb des Viewport befinden und erst auf Anforderung in den sichtbaren Bereich bewegt werden, keine große Sache. Schon zu DHTML-Zeiten, also vor gut zehn Jahren, hätte man ähnliche Ergebnisse erzielen können.

Will man jedoch mehr als die Basisfunktionalität, muss man sich einige Gedanken mehr machen. Damit wir das nicht alle für uns selber im stillen Kämmerlein tun müssen, übernahm Alberto Varela Sanchéz diese Aufgabe und entwickelte Sidr.

sidr-schematic

Und Sidr ist so ziemlich die flexibelste Off-Canvas-Menülösung, die ich bisher gesehen habe. Dabei ist der Einsatz auf der eigenen Website in der simpelsten Variante extrem einfach. Zunächst gilt es, das Script und eines der zugehörigen Stylesheets einzubinden. Im Head:

    

Im Body, am Ende des Dokuments:

    
    

Die Einbindung der einfachsten Variante des Sidebar-Menüs erfolgt auf der Basis eines DIV mit der ID sidr. Das DIV enthält die Menüinhalte, der Link öffnet das DIV:

Toggle menu 
 

Mit dieser Funktionalität könnte man bereits zufrieden sein, Sidr bietet jedoch deutlich mehr. Zunächst ist es möglich, beliebig viele Sidebars in einer Seite unterzubringen. Man muss ihnen dann lediglich Namen geben, um sie programmlogisch unterscheiden zu können.

Die Inhalte für das Menü können auf verschiedene Weisen eingebunden werden. Die einfachste Möglichkeit, die direkte Einbindung im DIV habe ich bereits dargestellt. Ebenso kann bestehendes HTML lokal, aber auch remote gerufen werden. Die komplexeste Methode setzt auf die Callback-Funktionalität.

sidr-themes

Die aus meiner Sicht beeindruckendste Funktionalität ist der Einsatz als responsives Menü. Sanchéz zeigt es direkt anhand der Projekt-Website. Die Projekt-Website verfügt über ein horizontales Menü als Topbar. Verkleinert man nun das Browserfenster, greift ab einem bestimmten Punkt Sidr ein, verwandelt die Topbar in eine Sidebar und blendet einen zusätzlichen Button ein, um die Sidebar öffnen zu können. Auf mobilen Clients können Swipe-Gesten für das Öffnen und Schließen der Sidebar genutzt werden.

Sidr setzt auf Themes, bringt das typische helle und dunkle Theme gleich mit. Auf der Basis dieser Stylesheets können Sie sich ihr eigenes Layout zusammenstöpseln.

Meiner Meinung nach ist Sidr die derzeit beste Lösung für Off-Canvas-Menüs. Wenn Sie eines brauchen, greifen Sie zu Sidr. Zumal das Plugin kostenlos für private, wie kommerzielle Zwecke unter MIT-Lizenz zur Verfügung steht.

Links zum Beitrag

Kategorien
JavaScript & jQuery Programmierung

Kleine Helfer: 5 jQuery-Plugins für den Entwickler-Alltag

Die Entwicklergemeinde rund um jQuery ist sehr aktiv. Nahezu stündlich werden Plugins ersonnen, die es so bislang nicht oder nicht in der Form gab. Der Fortschritt ist kaum noch zu protokollieren. Dabei sind große Projekte, darunter sind aber auch viele kleine Helfer für ganz bestimmte Anwendungszwecke. Fünf dieser kleinen Tools stellen wir im folgenden Beitrag vor.

Imageloader.js – Schnelles Vorausladen von Bildern

imageloader

Imageloader.js erledigt eine gängige Aufgabe schnörkellos. Dem jQuery-Plugin wird ein Array von Bild-URLs übergeben. Dieses lädt es vor. Eine Callback-Funktion bei Fertigstellung des Preloads erlaubt, weitere Programmlogik daran zu knüpfen. Gleiches existiert für den Fall eines Fehlers.

$(document).ready(function(){
        $.imageloader({
            urls: ['images/0.jpg', 'images/1.jpg', 'images/2.jpg', 'images/3.jpg'],
            onComplete: function(images){
                // when load is complete
            },
            onUpdate: function(ratio, image){
                // ratio: the current ratio that has been loaded
                // image: the URL to the image that was just loaded
            },
            onError: function(err){
                // err: error message if images couldn't be loaded
            }
        });
    });

Imageloader.js steht unter MIT-Lizenz zur kostenfreien Nutzung bereit.

Jtwt.js – Anzeigen von Tweets auf Websites via JSON

jtwtjs

Jtwt.js erlaubt es, unter Zugriff auf Twitters JSON API, die aktuellen Tweets eines bestimmten Users im Design anpassbar auf beliebigen Websites anzeigen zu lassen. Das Standarddesign aus der mitgelieferten CSS-Datei kann leicht geändert oder ergänzt werden. Der Aufruf ist übersichtlich:


Die Definition des Anzeige-Widgets erfolgt über die Hinzufügung der Klasse twitter:

Jtwt.js steht zur kommerziellen und privaten Nutzung kostenlos bereit, sofern der Urheber genannt wird (CC BY 3.0).

jQuery.notific8 – Benachrichtigungs-Popups inspiriert durch Windows 8

notific8

Will Steinmetz gefällt das Benachrichtigungsdesign unter Windows 8. Und so entschloss er sich, die im Flat Design gehaltenen Notifications als jQuery-Plugin nachzubauen, was ihm ausgesprochen gut gelungen ist. Auf seiner Demoseite zum Projekt können Sie die verügbaren Options und Templates interaktiv zusammen stellen, um so einen Eindruck von der Leistungfähigkeit zu erhalten. Herunterladen müssen sie das Plugin dann via Github. Notific8 setzt auf Design-Templates, die leicht erstellt werden können. So ist flexible Optik auch innerhalb der gleichen Website einfach möglich. Ein Aufruf mit allen Optionen sieht so aus, ist also erneut sehr übersichtlich:

$.notific8('My notification with all options.', {
  life: 5000,
  heading: 'Notification Heading',
  theme: 'amethyst',
  sticky: true,
  horizontalEdge: 'bottom',
  verticalEdge: 'left',
  zindex: 1500
});

Notific8 steht unter BSD-Lizenz zur kostenlosen Nutzung bereit.

jui_dropdown – Dropdown-Menüs per Button mit vielen fertigen Designs

jui_dropdown von Christos Pontikis setzt neben jQuery auch jQuery UI voraus und ist konsequenterweise zu jQuery UI Themes kompatibel. jui_dropdown liefert einen mehr oder weniger aufwändig gestaltbaren Button, dem auf Klick ein Dropdown-Menü entspringt. Das Klicken auf eine Menü-Option liefert eine ID zurück, die dann der weiteren Verwendung zugänglich ist. jui_dropdown steht unter MIT-Lizenz zur kostenfreien Nutzung bereit.

jui_dropdown

jQuery-menu-aim – Navigieren in stark verschachtelten Dropdown-Menüs

Dropdown-Menüs haben ein system-immanentes Problem: wenn man mit der Maus aus einem Menü-Overlay hinausgerät, klappt das Menü zu. Gerade bei stark verschachtelten Dropdown-Szenarien gerät die Nutzererfahrung schnell zur Frustration. Vielfach versucht man dem Problem Herr zu werden, indem man den Overlays Schließ-Verzögerungen beigibt. jquery-menu-aim geht einen anderen Weg. Anstelle mit Timeouts und Delays zu arbeiten, versucht das Plugin die Mausbewegung des Nutzers zu erkennen. Zielt dieser in Richtung eines Sub-Menüs wird dieses offen gehalten, bewegt er sie indes in Richtung eines anderen Hauptmenüpunktes, wird dieser verzögerungsfrei geöffnet.

jquery-menu-aim

Ben Kamens entwickelte das Plugin für die Khan Academy, die das Konzept inzwischen auch einsetzt. Die Idee kam ihm beim Surfen auf Amazon.com. jQuery-menu-aim steht unter MIT-Lizenz zur kostenfreien Nutzung bereit.

Links zum Beitrag

  • A jquery plugin for preloading images | Imageloader.js
  • A simple jQuery plugin for the Twitter JSON API | jtwt.js
  • Notification plugin, inspired by Windows 8 | jquery.notific8 | Github-Repo
  • Simple dropdown button menus, themable | jui_dropdown
  • Making responsive mega-dropdowns like Amazon’s | jquery-menu-aim

Kategorien
JavaScript & jQuery Programmierung

jQuery Custom Content Scroller: Schluss mit hässlichen Standard-Scrollbars

Scrollbare Elemente innerhalb einer Website sind keine Besonderheit. Leider sehen in den wenigsten Fällen weder schön aus, noch passen sie ins Layout. Denn immer, wenn es etwas zu scrollen gibt, werden standardmäßig die Scrollbars des Browsers verwendet. Das jQuery-Plugin Custom Content Scroller stellt individuelle Scrollleisten zur Verfügung, die einfach eingesetzt werden können.

jquerycustomcontentscroller
Beispiele für das Plugin im Einsatz

Plugin und Stylesheet einbinden und loslegen

Neben dem jQuery-Plugin muss eine Stylesheet-Datei mit den Standardlayout für die Scrollbars eingebunden werden. Das Standardlayout liefert ein dezentes Grund-Design, welches in einer Vielzahl bestehender Projekte wohl ohne große Anpassungen eingesetzt werden kann.

Sind beide Dateien eingebunden, lassen sich per JavaScript die Scrollleisten beliebigen Container-Elementen zuweisen. Voraussetzung ist natürlich, dass der Inhalt des Containers größer ist als der Container selbst. Das Plugin sorgt anschließend dafür, dass die Inhalte innerhalb des Containers gescrollt werden können:

<script>
  (function($){
    $(document).ready(function(){
      $(".inhalt").mCustomScrollbar();
    });
  })(jQuery);
</script>

Im Beispiel wird das Plugin allen HTML-Elementen mit der Klasse inhalt zugewiesen. Weitere Einstellungen sind nicht nötig. Allerdings stellt das Plugin eine Reihe von Optionen zur Verfügung, die etwas mehr Individualität der Optik erlauben.

So gibt es beispielsweise die Möglichkeit, neben Scrollbars auch Scrollbuttons einzublenden, die das Feature mitbringen, eine bestimmte Anzahl von Pixeln nach oben oder unten scrollen zu können:

$(".inhalt").mCustomScrollbar(
  scrollButtons: {
    enable: true,
    scrollAmount: 10
  }
);

In den meisten Fällen ist man mit dem horizontalen Scrollen gut bedient. Vertikales Scrollen kann ebenso realisiert werden:

$(".inhalt").mCustomScrollbar(
  horizontalScroll: true
);

Das Plugin stellt viele weitere Optionen zur Verfügung. Auch das Scrollen per Mausrad ist grundsätzlich vorgesehen. Dazu ist allerdings zusätzlich das Mousewheel-Plugin für jQuery notwendig.

Scrollbar individuell gestalten

Wer mit dem Standardlayout der Scrollbars nicht zufrieden ist oder sie für ein Weblayout anpassen möchte, kann das Aussehen per CSS ändern.

Das Stylesheet ist mit über 400 Zeilen zwar nicht gerade übersichtlich. Allerdings beinhaltet die Dokumentation des Plugins eine sehr schöne Grafik, aus der ersichtlich wird, welche einzelnen Elemente die Scrollbar hat und unter welchen Klassenbezeichnungen man sie in der CSS-Datei findet.

Fazit: Das Plugin Custom Content Scroller ist einfach einzusetzen und fast nach Belieben individuell anpassbar. Wer mit scrollenden Bereichen auf der Website arbeiten muss oder will, sollte dem Plugin eine Chance geben.

Links zum Beitrag

(dpe)

Kategorien
JavaScript & jQuery Programmierung

HTML5: Threesixty.js generiert 360-Grad-Ansichten aus Bild-Strecken

360 Grad und es wird noch heißer. Nee, ich glaube, da verwechsele ich gerade was. Was das jQuery-Plugin Threesixty.js leistet, hat nur dann etwas mit Temperatur zu tun, wenn man entsprechendes Bildmaterial verwendet. Ansonsten leistet Threesixty.js schlicht die Erstellung von 360-Grad-Ansichten, wie man sie etwa typischerweise auf den Websites der internationalen Auto-Marken vorfindet. Der Charme des Plugins liegt in seiner einfachen Handhabung.

threesixtyjs-homepage

Threesixty.js: Data-Attribute und eine Bilderstrecke

Alles, was Threesixty.js benötigt, ist jQuery und der Pfad zu einer Bilderstrecke. Im folgenden Beispiel sind es 61 Bilder, die für die Darstellung des Vexel-Juwels heran gezogen werden. Die Bilder sind entsprechend von 0 bis 61 so benannt: gem0.jpg, gem1.jpg,…, gem61.jpg. Das Bild mit dem Nullwert wird als Startpunkt genommen.

Das Div-Element platziert man an die Stelle im HTML-Dokument, an der die 360-Grad-Ansicht erscheinen soll. Unter Verwendung der Data-Attribute path und count werden die für die Darstellung wichtigen Werte direkt im HTML-Quelltext an die JavaScript-Funktion übergeben.

An JavaScript wurde für das Vexel-Juwel folgender Code benötigt:

$(document).ready(function(){
    $('.threesixty').threeSixty({
        dragDirection: 'horizontal'
    });
});

Der Function-Call kann um verschiedene Parameter erweitert werden. Im Beispiel findet lediglich dragDirection Verwendung. Dieser Parameter gibt an, auf welcher Ebene sich das Objekt drehen soll. Im Standard, so auch im Beispiels, handelt es sich um die horizontale Ebene, vertikale Drehungen sind mit dem Wert vertical einzustellen. Sowohl vertikal, wie horizontal zu drehen ist (noch) nicht möglich.

Die Bewegung wird über Vor- und Zurück-Links unter Verwendung von

$('.threesixty').nextFrame();

und

$('.threesixty').prevFrame();

gesteuert. Die Parameter draggable und useKeys fügen die Steuerung der Bewegung mittels der Pfeiltasten und mittels Ziehen und Bewegens mit der Maus hinzu. Die zunächst vorgesehene Unterstützung des Mausrades hat Entwickler Nick-Jonas wieder fallengelassen.

Threesixty.js ist ein ganz junges Projekt, liegt derzeit in Version 0.1.2 vor und kann kostenlos auf Github heruntergeladen werden. Empfehlenswert ist es natürlich, einen Preloader einzusetzen und die 3D-Ansicht nicht das erste sein zu lassen, was der Besucher auf der Website zu Gesicht bekommen soll. Man kann sich vorstellen, dass mehrere Dutzend Grafiken, speziell dann, wenn es sich nicht um so einfache, wie das Vexel-Juwel des Beispiels handelt, einige Zeit zum Laden benötigen.

Links zum Beitrag

Kategorien
JavaScript & jQuery Programmierung

Hook.js für jQuery – Zum Laden loslassen

Wenn ich mich recht erinnere, hat’s Apple erfunden. Oder war´s der Loren Brichter in seinem Tweetie-Client? Ich weiß es nicht mehr und letztlich ist es auch egal. Inzwischen hat sich die Funktion „Zum Laden loslassen“, „Zum Aktualisieren herunterziehen“, im Original „Pull To Refresh“ durchgesetzt, jedenfalls auf mobilen Clients, wie Smartphones und Tablets. Jordan Singer und Brandon Jacoby bieten eine ähnliche Möglichkeit seit einigen Tagen für beliebige Websites an.

hookjs-homepage

Hook.js – „Pull to refresh“ neu interpretiert

Das „Pull to refresh“, das wir von mobilen Geräten kennen, funktioniert so, dass wir im Grunde mit dem Finger versuchen, über den oberen Bildschirmrand hinau zu scrollen. Wir überdehnen quasi die App. Sobald wir das tun, erscheint die entsprechende Instruktion und mit dem Loslassen des Screens wird die Aktualisierung gestartet.

Umgesetzt für das Web wäre das also so, wie wenn man über den oberen Seitenrand hinaus scrollen würde. So funktioniert Hook.js allerdings nicht. Um „Pull to refresh“ mit Hook.js auszulösen, muss man zunächst etwas nach unten und dann wieder nach oben scrollen. Da muss man erst einmal drauf kommen. Insofern ist die Alltagstauglichkeit der Lösung doch eher fraglich. Vielleicht findet sich aber ein findiger JavaScript-Entwickler, der sofort den zündenden Gedanken mitbringt, denn die Idee kann man ja nun nicht wirklich als schlecht bezeichnen.

Hook.js setzt jQuery voraus und bringt als JS selber nur knapp 2,5k auf die Waage. Die Integration in die eigene Website ist schnell erledigt:




Unmittelbar nach dem jQuery-Aufruf erfolgt die Einbindung des mitgelieferten Stylesheet, dann diejenige des JavaScript. Ebenfalls im Download findet sich ein PNG mit dem Hintergrund, den man auch in der Demo findet, sowie ein GIF mit dem aus der Demo bekannten Ladekreis.

Die eigentliche Funktionalität implementieren Sie direkt nach dem Body-Tag wie folgt:

Reloading...

Wie Sie sehen, kann der Text, der den Refresh-Vorgang umschreibt, einfach geändert werden. Um Hook.js sinnvoll nutzen zu können, bedarf es geeigneter Websites. Auf der Demoseite empfinde ich es als durchaus unangenehm, dass bei jedem Hochscrollen zum Seitenbeginn ein Neuladen der gesamten Seite stattfindet, zumal das in dem Falle nicht einmal einen Sinn ergibt.

Nichtsdestrotrotz ist die Idee interessant und kann den einen oder anderen auf weitere, noch interessantere Ideen bringen. Wie meist bei Github-Projekten, ist auch hier die tätige Mitwirkung möglich und erwünscht.

Links zum Beitrag

Kategorien
JavaScript & jQuery Programmierung

Typeahead.js für jQuery – Flexibles Autocomplete aus dem Hause Twitter

Seit der Freigabe des Frameworks Bootstrap scheint Twitter mehr und mehr Freude am Gedanken des Open Sourcing zu gewinnen. Das neueste Geschenk an die freie Entwicklergemeinde hört auf den Namen Typeahead.js. Es handelt sich um ein jQuery-Plugin, das beliebige Input-Elemente mit Autovervollständigungs-Funktionalität ausrüstet. Dabei können die Daten fest hinterlegt oder aus lokalen und entfernten JSON-Files kommen.

typeahead-homepage

Typeahead.js: Autovervollständigung vom Feinsten

Typeahead.js benötigt mindestens jQuery 1.9. Es wurde im Hause Twitter entworfen, um flexible Autovervollständigung einfach implementieren zu können. Seit fünf Tagen steht die JavaScript-Lösung auf Github unter der MIT-Lizenz zur kostenlosen Verwendung in privaten, wie kommerziellen Projekten und darüber hinaus zur Mitwirkung und Erweiterung bereit.

Typeahead.js kann auf verschiedene Arten mit den Daten, die für die Autovervollständigung herangezogen werden sollen, bestückt werden. Zunächst ist es möglich, die Daten im Funktionsaufruf hart zu hinterlegen, also quasi im Quelltext der Seite fest einzutippen. Das wäre noch nicht der Rede wert, wenngleich das bisweilen, in kleineren Szenarien bereits ausreichen mag.

So sieht zum Beispiel eine fest hinterlegte Autovervollständigung aus, die die Namen der Planeten unseres Sonnensystems zur Verfügung stellen würde:

$('#input').typeahead([
    {
            name: 'planets',
            local: [ "Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune" ]
        }
    ]);

typeahead-hardcoded
Typeahead.js kann übrigens auch mit RTL-Sprachen umgehen

Mächtige Funktionen stehen jedoch ebenfalls bereit. So kann das zu durchsuchende Dataset auch ein JSON-File sein, welches entfernt auf einem externen Server liegt. Zur Performanceverbesserung kann dieses externe File wiederum per Prefetch in den localStorage geladen und von dort aus wieselflink abgefragt werden:

$('#input').typeahead([
    {
        name: 'countries',
        prefetch: '/countries.json',
        }
    ]);

typeahead-prefetch
Typeahead.js verarbeitet ein JSON-File lokal oder remote, in diesem Fall lokal per Prefetch

Sehr große Datasets können zudem entfernt aktiv, also im Moment der Eingabe abgefragt werden. Hierzu findet eine rasante Abfrage unter Verwendung des Parameters q?= statt. Das Abfrageergebnis erscheint als Vorschlag zur Autovervollständigung. Dieses Verhalten erreicht man, indem anstelle des im eben gezeigten Beispiel verwendeten Parameters prefetch der Parameter remote verwendet wird.

Sämtliche Methoden lassen sich kombinieren, um die bestmögliche Flexibilität, aber auch Performance der Gesamtlösung zu gewährleisten. Die zu wählende Konfiguration hängt ganz vom konkreten Projekt ab. Dabei ist es auch möglich, die zur Autovervollständigung heran zu ziehenden Daten aus verschiedenen Datasets zu ziehen. Ebenso ist es vorgesehen, mehrere Autocompletes auf einer Seite unterzubringen, sei es mit der gleichen Datenbasis oder auch einer oder mehrerer anderer.

Auf der Seite des Users verhält sich Typeahead.js mustergültig erwartungsgemäß. Im Standard wird der jeweils beste Vorschlag grau in den Hintergrund des Suchfeldes gelegt, die Vorschläge müssen dabei nicht aus einzelnen Wörtern bestehen, sondern können auch Mehrzeiler mit etwa den Basisdaten eines Twitter-Accounts oder eines Open-Source-Projekts sein, die der Nutzer dann mit den Pfeiltasten oder der Maus anwählen kann.

Typeahead.js wird zusätzlich mit einem CSS geliefert, das allerdings nicht die Optik des zu erweiternden Input-Elements antastet. Vielmehr wird über das Stylesheet lediglich die Position des Vorschlags, sowie die Dropdown-Funktionalität gesteuert. Damit das Input-Element schön aussieht, ist noch Handarbeit erforderlich. Typeahead.js erstellt statusabhängig Klassen, die dann mit eigenen Style-Definition angesprochen werden können (und müssen).

Gefällt einem Bootstrap-User nun das neue Typeahead.js so viel besser, als das bereits in Bootstrap integrierte, aber weit weniger leistungsfähige Typeahead, so bedarf es lediglich des zusätzlichen Einbindens des neuen Scripts unmittelbar nach Bootstrap. Der Rest ist Konfigurationssache.

Links zum Beitrag:

Kategorien
(Kostenlose) Services Essentials JavaScript & jQuery Programmierung

Lazy Line Painter für jQuery zeichnet SVG-Grafiken per Animation auf Websites

Dank des Canvas-Elementes und der Zeichenfunktionen von JavaScript ist es möglich, Grafiken im Browser zu berechnen und darzustellen. So kann man Zeichnungen per Animation auf eine Website zeichnen. Wer eine solche Animation nicht selbst programmieren will, findet im jQuery-Plugin Lazy Line Painter ein hilfreiches Tool, welches diese Aufgabe für SVG-Grafiken per JavaScript im Browser erledigt.

lazylinepainter1
Lazy Line Painter

Lazy Line Painter: SVG-Datei konvertieren und animieren lassen

Und so arbeitet das Tool: Die zu animierende Grafik muss für den Lazy Line Painter zwingend im SVG-Format vorliegen. Anwendungen wie Illustrator bieten Exportfunktionen für dieses Format an. Zu beachten ist, dass die Grafik ausschließlich aus nicht geschlossenen Pfaden bestehen darf. Flächen und Verläufe sind also tabu. Bei geschlossenen Pfaden (beispielsweise Kreise und Rechtecke) muss vor dem Export der Pfad an einem Punkt geöffnet werden. Optisch verändert sich dadurch nichts. Für das PLugin ist der Unterschied lebenswichtig. Es weiß dann nämlich, an welcher Stelle des Pfades die Zeichenanimation beginnen soll.

lazylinepainter2
So funktioniert das Plugin

Farbe und Konturstärke des Pfades werden ignoriert und direkt im Plugin angegeben. Da die SVG-Datei nicht direkt dem Plugin übergeben werden kann, muss sie vorher in eine JavaScript-Variable umgewandelt werden. Über die Website des Plugins ist es möglich, SVG-Dateien hochzuladen und umzuwandeln. Die Variable mit allen Pfaden und ihren Koordinaten kann anschließend an das Plugin übergeben werden. Die SVG-Variable sieht dabei in etwa so aus:

var svgData = {
  "demo": {
    "strokepath": [{
      …
    }],
  "dimensions": {
    "width": 349,
    "height":277
  }
}

Sie wird über folgenden Aufruf an das jQuery-Plugin übergeben:

$("#zeichnung").lazylinepainter({
  "svgData": svgData,
  "strokeWidth": 7,  
  "strokeColor": "#de8f8f"
})

Neben der Variable werden hier auch die Konturstärke und -farbe definiert. Im letzten Schritt muss das animierte Zeichnen noch gestartet werden:

$("#zeichnung").lazylinepainter("paint");

Lazy Line Painter: jQuery und Raphaël vorausgesetzt

Damit das Plugin läuft, muss jQuery eingebunden sein. Außerdem wird die JavaScript-Bibliothek Raphaël benötigt, welche spezielle Funktionen zum Zeichnen von SVG-Grafiken bereitstellt.

Fazit: Mit wenig Aufwand lassen sich mit Unterstützung des Lazy Line Painters komplexe Grafiken im Browser zeichnen, ohne dass selbst groß Hand an die zu animierende Grafik angelegt werden muss.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

Toolbar.js für jQuery und Bootstrap: Flexible Werkzeugleisten im iOS-Look

Ob man den Designstil des iOS mag oder nicht, spielt hier keine Rolle. Unabhängig von der aktuellen Diskussion um Skeuomorphismus wird man schnell Einigkeit darüber erzielen, dass das Toolbardesign aus Apples mobilem OS wegweisend für moderne Websites ist. Ein Tapp auf ein Icon oder einen Link bringt häufig weitere Auswahlmöglichkeiten ans Licht. Das spart Platz und ist mittlerweile etabliert. Das jQuery-Plugin Toolbar.js des Neuseeländers Paul Kinzett erlaubt die Verwendung auf beliebigen Websites und ist dabei wirklich extrem einfach im Einsatz.

Toolbar.js für jQuery

Werkzeugleisten im iOS-Look mit den Glyphicons aus Twitters Bootstrap

Toolbar.js für jQuery bietet eine sehr einfache, dabei sehr elegante Möglichkeit, Toolbars, sowohl vertikal, wie auch horizontal an beliebige Elemente zu hängen. Beliebig viele dieser Werkzeugleisten lassen sich so erzeugen. Kinzett verwendet das Iconset, sowie das dazugehörige CSS aus Twitters Bootstrap. Auf diese Weise verhalten sich die Toolbars zum einen responsiv, zum anderen sind sie mit den Bootstrap-Methoden anpassbar.

Mit hunderten von Symbolen dürften sich auch die ausgefallensten Werkzeugleisten umsetzen lassen. Die Vorgehensweise ist jQuery-Enthusiasten bekannt. Zunächst gilt es, das JavaScript zu implementieren:


Danach bringen wir die Stylesheets für die Toolbar, wie für die Bootstrap Icons unter:


Im Anschluss muss noch die Toolbar definiert werden. Das kann beispielsweise so aussehen:

Sie sehen, dass die Icons über die entsprechenden Klassen aus Bootstrap zugewiesen werden. Die Aktionen, die damit verbunden werden sollen, finden ihren Platz in entsprechenden A-Elementen. Schlussendlich wird die so definierte Toolbar an das entsprechende Element gehängt, welches für den Aufruf verantwortlich sein soll.

 $('#element').toolbar( options ); 

Options sind die Position der Leiste, als da wären über oder unter dem Element horizontal oder links oder rechts von dem Element vertikal.

Diese Definition:

$('#vertical-toolbar').toolbar({
    content: '#user-toolbar-options', 
    position: 'right'
}); 

führt zu dieser Optik:

Vertikale Toolbar

Während diese Definition:

$('#user-toolbar').toolbar({
    content: '#user-toolbar-options', 
    position: 'top'
}); 

zu dieser Optik führt:

Horizontale Toolbar

Die Anzahl der Icons ist nur begrenzt durch die eigenen Überlegungen zur diesbezüglichen Sinnhaftigkeit ;-)

Toolbar.js steht auf Github unter der liberalen MIT-Lizenz zur Nutzung in privaten und kommerziellen Projekten zur Verfügung.

Links zum Beitrag:

Kategorien
JavaScript & jQuery Programmierung

Gekippt: HTML-Elemente als Parallelogramme darstellen mit Maskew

Mit der CSS3-Eigenschaft „transform“ lassen sich HTML-Elemente als Parallelogramme darstellen, indem man sie optisch kippt. Allerdings wird durch die Verwendung dieser Eigenschaft das gesamte Element samt Inhalt verzerrt, was mindestens bei Bildern in der Regel eine unerwünschte Optik nach sich ziehen wird. Die JavaScript-Bibliothek Maskew hingegen maskiert ein HTML-Element lediglich mit einem gekippten Rechteck (also einem Parallelogramm). Der eigentliche Inhalt wird unverzerrt dargestellt.


Beispiele für mit Maskew erstellte Maskierungsrahmen

HTML-Elemente als Parallelogramme: Schicke Rahmen einfach erstellen

Frei definierbare Formen für HTML-Elemente sind auch mit CSS3 nur sehr eingeschränkt möglich. Neben Rechtecken lassen sich mit wenig Aufwand und ohne JavaScript zumindest Kreise und Ovale erstellen, mit denen auch Grafiken etc. maskiert werden können.Die Maskew Library erweitert das Spektrum der Maskierungsmöglichkeiten dank JavaScript um Parallelogramme.

Der Einsatz ist einfach. Zunächst wird die  JavaScript-Bibliothek, die keine 5 Kilobyte groß ist, ins HTML-Dokument eingebunden. Anschließend lässt sich der Maskew-Effekt mit einer Zeile JavaScript auf beliebige Blockelemente anwenden:

var maskew = new Maskew(document.getElementById("bild"), 10);

Dem Maskew-Objekt werden zwei Variablen übergeben. Die erste Variable enthält das Element, auf das der Effekt angewendet werden soll. Über die zweite Variable wird der Kippwinkel angegeben. Möglich ist ein Winkel zwischen 0 (ergibt ein Rechteck) und 45 Grad.

jQuery-Nutzer haben auch die Möglichkeit, Maskew als Plugin dafür zu verwenden:

var $maskew = $("bild").maskew(10);

Maskew mit Maus verändern

Wer ein wenig Dynamik in sein maskiertes Element bringen möchte, dem steht die Option „touch“ zur Verfügung. Sie sorgt dafür, dass sich das Parallelogramm per Maus verändern lässt. Man kann somit den Kippwinkel manuell anpassen, indem man die Maus mit gedrückter rechter Taste über das Bild bewegt. Ein entsprechender Cursor signalisiert diese Möglichkeit:

var maskew = new Maskew(document.getElementById("bild"), 10, {touch: true});

Fazit: Maskew ist ein netter Effekt, um Bilder und andere HTML-Elemente als Parallelogramme darzustellen, so dass sie sich von den üblichen Formen, die mit HTML und CSS möglich sind, abheben.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

Aus der Nähe betrachtet: Schöne Zoomeffekte mit elevateZoom für jQuery

Vor allem von Produktabbildungen in Online-Shops kennt man es, dass per Zoom ein Bildausschnitt vergrößert dargestellt werden kann. Das jQuery-Plugin elevateZoom ermöglicht genau das; nämlich einen schicken Zoomeffekt schnell und einfach auf ein Bild anzuwenden. Dabei stehen unterschiedliche Einstellungen zur Individualisierung des Effekts zur Verfügung.


elevateZoom

Ein IMG-Element, zwei Bilddateien und jQuery

Um elevateZoom aus dem Hause der walisischen Webagentur Elevate zu verwenden, bindet man zunächst die JavaScript-Datei zusammen mit jQuery im Kopf eines HTML-Dokumentes ein. Anschließend wird das Plugin per jQuery auf ein beliebiges IMG-Element angewendet. Die vergrößerte Ansicht des Bildes, die für den Zoom notwendig ist, bestimmt man über ein Data-Attribut innerhalb des Bild-Elementes:

<img id="bild" src="bild_normal.jpg" data-zoom-image="bild_fuer_zoom.jpg" />

Folgender jQuery-Aufruf wendet elevateZoom auf das Bild an:

$("#bild").elevateZoom();

Mehr JavaScript ist zunächst nicht nötig, um das Bild zoombar zu machen. Wer mit der Maus über das Bild fährt, erhält rechts neben dem Bild ein Fenster mit einem vergrößerten Ausschnitt. Innerhalb der Normalansicht veranschaulicht ein rechteckiger Rahmen, welcher Ausschnitt gerade vergrößert dargestellt wird.


Einfacher Zoomeffekt

Position des Ausschnittes festlegen

Mit der Option zoomWindowPosition ist es möglich, die Position des Zoom-Fensters festzulegen. 16 unterschiedliche Möglichkeiten gibt es, um einen Ankerpunkt um das Bild als Position zu definieren:

$("#bild").elevateZoom({
  zoomWindowPosition: 6
});

Die im Beispiel gewählte Position 6 stellt das Zoom-Fenster mittig unterhalb der Normalansicht dar. Wer das Zoom-Fenster ganz woanders platzieren möchte, kann auch einen individuellen DIV-Container als Ziel für den Zoom auswählen. Hier wird eine freie Position dann per CSS selbst bestimmt.

Als dritte Variante kann auf ein separates Zoom-Fenster ganz verzichtet werden. Dann wird der vergrößerte Ausschnitt im eigentlichen Bild-Element (inner zoom) dargestellt:

$("#bild").elevateZoom({
  zoomType: "inner"
});

Mit Vergrößerungsglas zoomen

Eine Alternative zum rechteckigen Zoomen stellt der Effekt dar, bei dem der Vergrößerungsausschnitt über eine Linse erreicht wird:

$("#bild").elevateZoom({
  zoomType: "lens",
  lensShape: "round",
  lensSize : 200
});

Größe und Form (rund oder eckig) der Linse sind zusätzlich definierbar.


Zoom mit Vergrößerungslinse

elevateZoom stellt noch weitere Einstellungsmöglichkeiten zur Verfügung. So können Ein- und Ausblendeffekte sowie ein Eassing-Effekt für die Bewegung innerhalb des Ausschnittes Verwendung finden.

Fazit: elevateZoom ist leicht anwendbar und sehr individuell konfigurierbar. Eine Beispielgalerie gibt eine Übersicht über die verschiedenen Möglichkeiten. Das Plugin steht unter der MIT- und GPL-Lizenz frei zur Verfügung.

(dpe)

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

CSS4 bereits heute nutzen: Elternelemente ansprechen mit cssParentSelector.js

Mit CSS ist es einfach, Kind- und Geschwisterelemente anzusprechen. Elternelemente anzusprechen ist – zumindest bisher – mit CSS nicht möglich. Für CSS4 ist diese Option zwar vorgesehen, allerdings dürfte es noch eine Weile dauern, bis die ersten Browser CSS4 im Ansatz interpretieren können. Mit dem jQuery-Plugin cssParentSelector nutzen Sie aber bereits jetzt diese Möglichkeit.


cssParentSelector-Plugin

Back to the Future: Plugin ermöglicht Verwendung des Parent-Selektors aus CSS4 heute

Zu den Neuerungen, mit denen CSS4 aufwarten wird, gehören unter anderem einige neue Selektoren. Einer davon ist der Parent-Selektor, der es endlich ermöglicht, auf Elternelemente zuzugreifen. Die Syntax sieht so aus:

p! > input {
  color: red;
}

Im Beispiel wird der Inhalt des P-Elementes rot gefärbt, falls es Elternelement eines INPUT-Elementes ist. Da bisher kein Browser etwas mit dieser Auszeichnung anfangen kann, müsste man heutzutage auf diese Auszeichnung verzichten. Wer das nicht möchte, der verwendet das cssParentSelector-Plugin für jQuery.

Um das Plugin nutzen zu können, genügt es, die JavaScript-Datei zusammen mit jQuery im Kopf eines HTML-Dokumentes einzubinden. Das Plugin sorgt dafür, dass der Browser dieses CSS4-Feature bereits jetzt umsetzt.

Sie können den neuen Selektor – wie Sie es von anderen Selektoren gewohnt sind – auf Klassen und IDs anwenden. Auch in Kombination mit dem Universal-Selektor funktioniert er:

*! > p {
  background: green;
}

Das Beispiel färbt den Hintergrund jedes Elternelementes eines P-Elementes grün ein.

Statt das Elternelement direkt anzusprechen besteht auch die Möglichkeit, ein spezielles Zielelement, welches Kind des Elternelementes ist, anzusprechen:

!p label > input {
  color: blue;
}

In diesem Beispiel wirkt sich die CSS-Eigenschaft color auf alle LABEL-Elemente aus, die Kind des P-Elementes sind, falls das P-Element Elternelement eines INPUT-Elementes ist.

Fazit: Das neue Parent-Element dürfte viele Webentwickler glücklich machen. Bis es als reines CSS eingesetzt werden kann, hilft  das cssParentSelector-Plugin.

(dpe)

Kategorien
Fortbildung Inspiration JavaScript & jQuery Programmierung Tutorials

JavaScript und jQuery: Mit diesen Tutorials gelingt der Einstieg auf jeden Fall

Wenn man etwas Neues lernen will, ist es wichtig, von Anfang an gute Quellen zu verwenden. Schlechte Lernquellen vermitteln unqualitatives, häufig auch fehlerhaftes Wissen. So ist es überall – natürlich auch beim Erlernen von JavaScript. Ich habe daher im folgenden Beitrag einige zuverlässige Websites mit Anleitungscharakter zusammengestellt. Die Tutorials zu jQuery sind dabei nicht nur für Einsteiger interessant. Da kann sicherlich der ein oder andere Profi sein Wissen mindestens aufpolieren.


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

JS The Right Way: ein Leitfaden für JavaScript-Anfänger

Um Missverständnisse rund um JavaScript zu vermeiden und zu verhindern, dass Anfängern fehlerhaftes Wissen vermittelt wird, kreierte William Oliveira unter JS the right way einen sehr nützlichen Leitfaden, der uneingeschränkt empfehlenswert ist.

Was ist „JS The Right Way“?

Hinter der Entstehung von „JS The Right Way“ steckt die Motivation, Anfängern in JavaScript qualitativ hochwertiges Wissen zu vermitteln. Die Webseite stellt einen Leitfaden dar, welcher Quellen mit nützlicher Lehrinformation aufzeigt. Er beginnt mit einer kleinen Einleitung, die das Ziel des Tutorial erklärt. Der Guide befindet sich noch in der Aufbauphase, wobei einige gute Sachen schon eingefügt sind. Jeder kann zum Aufbau beitragen, Vorschläge werden vor einer eventuellen Integration sorgfältig überprüft.

Bisheriger Umfang des Leitfadens

Nach der Einleitung und einigen Erläuterungen zum entstehenden Guide startet man mit dem Leitfaden. Darin finden Sie Quellen zum Thema JavaScript, die der Betreiber für seriös und gut befunden hat. Als erstes wird kurz erklärt, was JavaScript eigentlich ist und wie sich die Verwendung entwickelt hat. Längst ist JavaScript zu einem der Motoren des Web geworden, was Beispiele wie das serverseitige Framework node.js eindrücklich belegen.


node.js: Server-side JavaScript

Als weitere gute Quelle, welche zahlreiche Referenzen, Neuigkeiten rund um JavaScript sowie verschiedene Versionen davon enthält, wird das Mozilla Developer Network vorgestellt.


Referenzen und Neuigkeiten rund um JavaScript finden Sie auf Mozilla Developer Network

Weiter geht es mit Stil. Hier wird ein Styleguide mit einem interessanten Namen empfohlen: Idiomatic. Um den Code sauber zu bekommen, sollten Sie das Tool JSHint benutzen.


Ein Guide für JS-Anfänger: Idiomatic.js


Zahlreiche Patterns werden vorgestellt

Ein Beispiel hierfür kommt aus der Rubrik „Creational Design Patterns“ und stammt von Addy Osmani.


Factory Patterns: ein Ausschnitt aus dem Code

Wo gehobelt wird, da fallen Späne. Dennoch sollte man versuchen, durch gezielten Einsatz des Hobels so wenig Späne wie möglich zu erzeugen. Hierzu bieten sich Testing Tools an. Auch zu diesem Thema finden Sie einige gute Quellen. Zum Beispiel Mocha, ein Framework zum Testen von JavaScript.


Mocha: ein Code-Beispiel

Zur Weiterbildung sind Bücher sowie auch Kontakte zu wichtigen Leuten in diesem Bereich nützlich. Eine Liste kostenloser JS-eBooks wird vorgestellt. Ebenfalls in Listenform findet sich eine Übersicht interessanter JS-Profis, denen zu folgen sich nicht nur für Anfänger lohnt.


Kostenlose JS-Bücher

Listen finden sich noch etliche, so etwa solche mit JavaScript PaaS Providern, JavaScript Package Managern und Frameworks. Es kann als sicher gelten, dass Sie etwas Nützliches für sich finden werden.

jQuery-Tutorials nicht nur für Anfänger

Vielleicht beschäftigen Sie sich schon eine Weile mit Webdesign und kennen sich in HTML5, CSS und anderen Sprachen gut aus. Vielleicht sind Sie ein Anfänger im Webdesign und beginnen erst, diese wunderbare Welt zu erforschen. Auf jeden Fall ist Ihnen der Begriff „jQuery“ schon viele male begegnet. Ob Sie ein Profi darin sind oder – wie ich – noch keine Ahnung davon haben, werden Ihnen die folgenden Tutorials der Website jQuery Fundamentals sicherlich behilflich sein.


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

jQuery Fundamentals

Wir beginnen mit einem englischsprachigen Tutorial von Bocoup, einer Open Web Technology Firma. Der Name des Tutorial lautet erklärend: jQuery Fundamentals. Das Tutorial verspricht Ihnen, dass Sie nach dem Durcharbeiten in der Lage sind, jQuery Probleme selbstständig zu lösen. Dafür müssen Sie natürlich die Lektionen im Tutorial samt der Übungen gewissenhaft durchkauen.

JavaScript Basics

Sie beginnen mit Grundlagen von JavaScript, da jQuery eine Bibliothek von JavaScript ist. In dieser Rubrik werden Ihnen diese Grundlagen in ziemlich knapper und übersichtlicher Form mit Beispielen erklärt. Oben rechts finden Sie einen Editor. In jedem Beispiel gibt es oben ein Augenzeichen. Klicken Sie darauf, erscheint das Beispiel im obigen Editor und Sie können das Ergebnis des Code sehen.


Ein Code-Ausschnitt

Traversal and Manipulation Methods

In diesem Abschnitt werden Ihnen Funktionen vorgestellt, mit deren Hilfe Sie verschiedene Elemente in einer DOM-Struktur effektiv suchen und verändern können. Die Funktionen, welche dies gewährleisten nennt man traversale und manipulierende Funktionen.


Ein Code-Ausschnitt

Event Handler

Hier geht es mit Event Handlers weiter. Dabei handelt es sich um Mechanismen, die verschiedene Ereignisse, z.B. Mausklicks, erkennen. Nach der Erkennung ruft das Skript bestimmte Funktionen auf und führt diverse Aktionen als Antworten auf diese Ereignisse aus.


Event Handler: ein Code-Ausschnitt

Effects

In diesem Kapitel erfahren Sie einiges über Effekte, welche mit jQuery realisiert werden können.


Einführung in die Effekte: ein Code-Ausschnitt

Zudem finden Sie einige Workshop-Angebote rund um jQuery.

jQuery-Tutorial: Einführung und Grundlagen von Matthias Schütz

Ein weiteres jQuery-Tutorial für Anfänger kommt von Matthias Schütz. Das Tutorial ist deutschsprachig. Schütz gibt eine Einführung in die Welt von jQuery in Form eines Artikels. Weiter unten finden Sie zahlreiche hilfreiche Links zum Thema, sodass Ihr jQuery-Studium keinesfalls nur auf diesen Beitrag beschränkt ist.


Matthias Schütz gibt Ihnen eine kompakte jQuery-Einführung in deutscher Sprache

Links zu weiteren jQuery-Tutorials

Wer nun immer noch nicht genug hat, findet hier eine große Liste mit Tutorials und zahlreichen Tipps und Tricks zum Thema.


Eine grosse Sammlung von jQuery-Tutorials

(dpe)

Kategorien
JavaScript & jQuery Programmierung

HTML5: Schicke Tooltipps mit Tooltipster für jQuery

Tooltipps sind eine feine Sache. Schließlich ermöglichen sie es, kurze Infos platzsparend genau dort unterzubringen, wo sie wichtig sind. Tooltipster stellt ein jQuery-Plugin zur Verfügung, mit dem sich schnell und einfach sehr ansprechende und individuelle Tooltipps realisieren lassen. Diese sind zudem HTML5-konform und ausschließlich per CSS gestaltet, was eine Anpassung des Aussehens einfach macht.


Tooltipster

Tooltipps über TITLE-Attribut auszeichnen

Tooltipster besteht aus zwei Dateien, einer JavaScript-Datei mit dem jQuery-Plugin und einer CSS-Datei, über die das Layout der Tooltipps angepasst wird. Beide Dateien müssen zusammen mit jQuery im HTML-Head eingebunden werden. Anschließend wird das Plugin gestartet:

$(document).ready(function() {
  $(".tooltip").tooltipster();
});

Im Beispiel wird das Plugin auf alle Elemente mit der Klasse „tooltip“ angewendet. Die Inhalte der Tooltipps werden über das gängige TITLE-Attribut ausgezeichnet. Das Plugin wandelt die Inhalte dieses Attributes anschließend in schicke Tooltipps um, deren Aussehen über die CSS-Datei beliebig angepasst werden kann:

<a href="http://www.drweb.de/" title="Dr. Web Magazin" class="tooltip">drweb.de</a>

HTML im Tooltipp möglich

Wer mehr als reinen Text in einem Tooltipp unterbringen möchte, kann dies mit Tooltipster tun. Das Plugin erlaubt es, HTML-Elemente innerhalb des TITLE-Attributes zu platzieren. Diese werden per JavaScript entsprechend umgesetzt:

<a href="http://www.drweb.de/" title="<img src='drweb.png' width='50' height='50' / class="tooltip">Dr. Web Magazin">drweb.de</a>

Die Auszeichnung mag ein wenig befremdlich aussehen; aber sie funktioniert. Zu beachten ist hierbei lediglich, dass der HTML-Quelltext innerhalb des Tooltipps bei ausgeschaltetem JavaScript als reiner Text ausgegeben wird. Wer sich die Standarddarstellung des TITLE-Attributes als Fallback erhalten möchte, sollte auf HTML im Tooltipp verzichten.

Individuelle Themes und Einstellungen

Neben dem Standard-Theme sind weitere individuelle Themes per CSS möglich. Die Themes werden über den Plugin-Aufruf als Option übergeben:

$(".tooltip").tooltipster({
  tooltipTheme: ".mein-tooltip"
});


Tooltipp mit HTML-Elementen

Außerdem stehen weitere Optionen zur Verfügung, über die das Verhalten der Tooltipps gesteuert werden kann. So kann beispielsweise festgelegt werden, ob der Tooltipp an einer festen Position stehen oder ob er sich am Mauszeiger orientieren soll:

$(".tooltip").tooltipster({
  followMouse: true
});

Fazit: Tooltipster ist ein praktisches Plugin, um schicke Tooltipps ohne großen Aufwand realisieren zu können.

(dpe)