ek

Beiträge zum Thema JS, HTML, CSS & anderem Kram

Require.js-Autoloader

Wenn aus dem “One-Pager” ein “Multi-One-Pager” wird, kann sich ein gewisser Overhead bezüglich der geladenen Skripte einstellen. Angenommen man baut eine Web-App, die aus vielen Einzelseiten besteht, und jede Einzelseite stellt für sich einen “One-Pager” dar, welcher nicht zwingend beim Besuch eines Nutzers aufgerufen wird. Dann werden – benutzt man Require.js zum Laden der Skripte – beim initialen Aufruf der Web-App alle Skripte geladen, auch wenn sie letztlich gar nicht benötigt werden.

In diesem Fall wäre es praktischer, mehrere Require.js-Instanzen anzulegen und durch einen zentralen Router gesteuert bei Bedarf aufzurufen. Dieses Szenario habe ich einmal mithilfe von Backbone.js nachgestellt. Die “Web-App” besteht aus diversen Einzelseiten, welche bestimmte jQuery-UI-Widgets beinhalten. Außerdem gibt es eine Startseite mit einem kurzen Erklärungstext. Ziel ist es, den Startseiteninhalt und die jQuery-UI-Widgets nur bei Bedarf zu laden.

Dafür wird beim Aufruf der Seite lediglich eine fundamentale Require.js-Instanz aufgerufen, die die global benötigten Skripte – jQuery, Underscore, Backbone, den jQuery-UI-Core und einen Observer – laden und einen Backbone-Router initialisieren, der die Autoloader-Funktionalität zur Verfügung stellt.

JavaScript

require(['jQuery', 'Underscore', 'Backbone', 'Observer'], function ($, _, Backbone, Observer) {

	var Router = Backbone.Router.extend({

		routes : {
			':site/*sub' : 'autoLoad'
		},

		initialize : function () {
			location.hash = location.hash || 'index/';

			Backbone.history.start();
		},

		autoLoad : function (site, sub) {
			var path = 'sites/' + site + '/app';

			require([path], function (App) {
				App.init({
					subPages : sub
				});
			});
		}
	}),

	router = new Router();

});

Der Router prüft als erstes, ob ein Location-Hash gesetzt ist. Ist dies nicht der Fall, wird der Hash “/index/” gesetzt, was die Initialisierung der Startseite einleitet. Weiterhin wartet der Router auf Änderungen des Location-Hash und führt im Bedarfsfall die “autoLoad”-Funktion aus, welche das gewünschte Modul/die gewünschte Seite lädt. Das “*sub” im “routes”-String des Routers stellt sicher, dass auch beim initialen Aufruf von Unter-Unterseiten die Autoload-Funktion tut, was sie soll.

Das vom Autoloader geladene Skript übergibt eine “init”-Funktion – dabei kann es sich, je nachdem ob die Seite lediglich statischen Inhalt hat oder tiefergreifende Funktionalität besitzt, entweder um eine Backbone-View- oder eine Backbone-Router-Instanz handeln.

JavaScript

var init = function () {
		return new View();
	};

return {
	init : init
};

JavaScript

var init = function (args) {
		return new Router(args);
	};

return {
	init : init
};

Das Datepicker-Modul habe ich als Beispiel für eine zusätzliche Router-Instanz gewählt. Inhaltlich zugegebenermaßen etwas mau, wird doch deutlich, dass auf diese Weise die Funktionalität der Web-App auch auf Unterebenen gewährleistet werden kann, ohne dass dies beim initialen Aufruf der Seite angemeldet bzw. geladen werden muss.

Beobachtet man den Inhalt des HTML-Head beim Durchklicken der Seite im Firebug bzw. Web Inspector, kann man sehr schön verfolgen, wie die jeweils benötigten Module und Widgets sukzessive nachgeladen werden.

Ich hoffe, mein Versuch, den Sachverhalt hier darzustellen, ist einigermaßen verständlich. Über Anregungen, Anmerkungen und Fragen freue ich mich immer. Sollte diesbezüglich Bedarf bestehen, kann ich nur dazu ermutigen, regen Gebrauch von der Kommentar-Funktion zu machen.

Außerdem sei darauf hingewiesen, dass der Code zur schnellen Inspektion auch auf GitHub zur Verfügung steht.

Backbone.js ist ein interessantes JavaScript-MVC, mit welchem ich mich seit etwa zwei Wochen beschäftige. Und nun möchte ich ein kleines Tutorial dazu präsentieren - wir bauen uns ein Merkliste. Das Konzept sieht wie folgt aus: Ständig laufen einem tolle Filme, Bücher und Spiele über den Weg, die man unbedingt noch sehen/lesen/spielen möchte, aber man merkt sie sich nie. Das ist der Punkt, wo die Merkliste ins Spiel kommt.

Bei der Programmierung habe ich mich stark an der Todo List Application orientiert, allerdings ist die Merkliste vom Funktionsumfang her schmaler, beinhaltet dafür aber einen Controller für das URL-Routing.

Aber nun zur Sache:

Als erstes benötigen wir den HTML-Teil.

HTML

<!doctype html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	
	<title>Backbone.js-Tutorial - Merkliste</title>	
	<link rel="stylesheet" href="style.css" />
	
</head>

<body>

	<ul id="nav"></ul>
	<input type="text" placeholder="Gib einen Titel ein&hellip;" id="list_input" />
	<ul id="list"></ul>
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
	<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
	<script src="js/backbone-localstorage.js"></script>
	<script src="js/list.min.js"></script>
	
	<script type="text/template" id="list-item-template">
		<strong><%= title %></strong>
		<span class="delete_item">x</span>
	</script>
	
	<script type="text/template" id="nav-template">
		<a href="#/category/<%= title %>"><%= title %></a>
	</script>
	
</body>
</html>

Für die Merklisten-App benötigen wir jQuery, Underscore.js, Backbone.js und die Backbone-Erweiterung Local-Storage, damit die Einträge im Browser gespeichert werden können. Des weiteren werden die Container für die Navigation und die Listeneinträge, sowie das Eingabefeld angelegt. Schlussendlich brauchen wir noch zwei Templates - eins für die Navigation, eins für die Liste.

Kommen wir nun zum JavaScript-Teil. Als erstes benötigen wir hier unser Model:

JavaScript

window.List = Backbone.Model.extend();

Als nächstes erstellen wir zwei Collections, eine für die Navigation, eine für die Listeneinträge:

JavaScript

window.NavCollection = Backbone.Collection.extend({
	model : List
});
	
window.ListCollection = Backbone.Collection.extend({				
		
	model : List,				
		
	localStorage : new Store('List'),
		
	getByCategory : function ( category )
	{
		return this.filter( function (item)
		{
			return item.get('category') == category;
		});
	}
});

In der Collection für die Listen-Einträge wird der Local Storage angemeldet und eine Funktion eingefügt, die es ermöglicht, die Einträge der Collection nach ihrer Kategorie zu filtern.

Kommen wir nun zum Controller der App:

JavaScript

window.ListController = Backbone.Controller.extend({
		
	_navModel : new NavCollection([
		{title : 'Filme'},
		{title : 'Buecher'},
		{title : 'Spiele'}
	]),
	_navViews : [],
	_categoryModel : new ListCollection,				
	_inputView : null,
		
	routes : {
		'' : 'init',
		'/category/:category' : 'getItems',
	},
		
	initialize : function ()
	{			
		this._navModel.each( function ( item, i )
		{
			this._navViews[i] = new NavigationView({
				model : item
			});
		}, this);
			
		Backbone.history.start();
	},
		
	init : function ()
	{
		window.location.hash = '/category/Filme';
	},
	
	getItems : function ( category )
	{			
		for ( view in this._navViews )
		{
			this._navViews[view]
				.render()
				.setClass();
		};
							
		if ( this._inputView == null )
		{		
			this._inputView = new ListInputView({
				model : this._categoryModel,
				category : category
			});
		}
		else
		{
			this._inputView.options.category = category;
			this._inputView.model.trigger('refresh');
		}
	}
		
});

Als erstes werden - jeweils für die Navigation und die Liste - neue Instanzen der zugehörigen Collection erstellt und Platzhalter für die jeweiligen Views angemeldet. Danach werden die relevanten Pfade mit Funktionen verknüpft. In diesem Fall wird die Funktion init() ausgeführt, wenn kein Hash vorhanden ist, und die Funktion getItems(), wenn ein Kategorie-Hash vorhanden ist.

Als nächstes folgt die initialize-Funktion, welche als erstes beim Aufrufen des Controllers ausgeführt wird. Dabei wird das Navigation-Model mit den nötigen Einträgen versehen, danach für jeden Eintrag der Navigation-Collection eine View-Instanz erstellt und im _navView-Array gespeichert, sowie die Backbone.history-Funktion gestartet.

Als nächstes wird die init-Funktion definiert. Diese sorgt einfach nur dafür, dass die Kategorie "Filme" gewählt wird, indem der entsprechende Kategorie-Hash gesetzt wird. Die Kategorie ist hierbei willkürlich von mir gewählt.

Danach folgt die Definition der getItems-Funktion. In dieser werden als erstes die Views für die Navigationspunkte ge-rendert. Daraufhin folgt entweder die Initialisierung des Views für die Listeneinträge, oder - falls dies schon geschehen ist - das Überschreiben der aktuellen, dem View übergebenen Kategorie und das Neu-Aufbauen der Liste mit den entsprechenden Einträgen. Dabei kommt die Filter-Funktion der Listen-Collection zum Einsatz.

Nachdem nun Model, Collection und Controller vorhanden sind, geht es an die Views. Davon benötigen wir drei - einen für das Eingabefeld, einen für die Liste und einen für die Navigation. Fangen wir mit dem Eingabefeld an:

JavaScript

window.ListInputView = Backbone.View.extend({
	
	el : $('#list_input'),
	
	list : $('#list'),
	
	events : {
		'keypress' : 'createListItem'
	},
	
	initialize : function ()
	{
		_.bindAll(this, 'addListItem', 'addAllListItems');
		
		this.model.bind('add', this.addListItem);
		this.model.bind('refresh', this.addAllListItems);
		
		this.model.fetch();
	},
	
	createListItem : function (e)
	{
		if ( e.keyCode == 13 )
		{			
			this.model.create({
				category : this.options.category,
				title : this.el.val()
			});
			
			this.el.val('');
			this.el.blur();
		}
	},
	
	addListItem : function ( item )
	{					
		var view = new ListItemView({model : item});
		
		!view.model.length && this.list.append( view.render().el );
	},
	
	addAllListItems : function ()
	{
		this.list.empty();
		
		_.each(this.model.getByCategory(this.options.category), function(item)
		{
			this.addListItem(item);
		}, this);
	}
	
});

Der ListInputView nimmt die Eingabe entgegen, erstellt eine neue Instanz des Listen-Eintrag-View und fügt füllt die Liste mit Einträgen. Die Funktion createListItem() erstellt einen neuen Eintrag in der Collection, wenn das Eingabefeld abgefeuert wurde. Über die Angabe this.model.bind('add', this.addListItem); in der initialize-Funktion wird gesorgt, dass daraufhin die Funktion addListItem() aufgerufen wird, die für den neuen Eintrag in der Collection eine Instant des Listen-Eintrag-View erstellt und diesem den Befehl render() mit auf den Weg gibt. Über die Funktion addAllListItems() wird einerseits sichergestellt, dass die Liste geleert wird, bevor neue Einträge nach einem Kategorie-Wechsel reingladen werden, und andererseits, bei Übergabe einer Collection mit mehreren einträgen, für jeden Eintrag die Funktion addListItem() ausgeführt wird.

Als nächstes kommen wir zum Listen-Eintrag-View:

JavaScript

window.ListItemView = Backbone.View.extend({
		
	tagName : 'li',
		
	className : 'list_item',
		
	tmpl : _.template( $('#list-item-template').html() ),
		
	events : {
		'click .delete_item' : 'removeItem'
	},
		
	render : function ()
	{		
		$(this.el).html( this.tmpl( this.model.toJSON() ));
			
		return this;
	},
		
	removeItem : function ()
	{
		this.model.destroy();
		$(this.el).fadeOut( function()
		{
			$(this).remove();
		});
	}
		
});

Hier wird das Element vom Standard (div) auf li gesetzt, die gewünschte CSS-Klasse gesetzt, das Template für den Eintrag angemeldet, ein Klick-Event mit der Funktion removeItem() verknüpft und anschließend die Funktionen render() und removeItem() definiert. Erstere fügt die Daten des Collection-Eintrags in das Template ein, letztere löscht den View und den dazugehörigen Collection-Eintrag.

Schlussendlich benötigen wir noch einen View für die Navigation:

JavaScript

window.NavigationView = Backbone.View.extend({
		
	tagName : 'li',
		
	tmpl : _.template( $('#nav-template').html() ),
		
	hash : function ()
	{
		return window.location.hash.replace('#/category/', '');
	},
		
	render : function ()
	{							
		$('#nav').append($(this.el).html( this.tmpl( this.model.toJSON() ) ));
			
		return this;
	},
		
	setClass : function ()
	{
		var curHash = this.hash();
			
		this.el.className = ( curHash == $(this.el).find('a').text() ) ? 'current' : '';
	}
		
});

Neu und interessant ist hier die Funktion setClass(). Diese sorgt nach dem Rendern der Navigation, dass der aktuelle Reiter die Klasse "current" bekommt.

Um die Listen-App nun zum Laufen zu bringen, erstellen wir eine neue Instanz des Controllers:

JavaScript

var listApp = new ListController();

Der ganze Spaß wird in eine anonyme jQuery-Funktion geschrieben, damit die App gestartet wird, sobald das DOM geladen ist.

Das war es auch schon. Ich hoffe, meine Erklärungen sind einigermaßen nachvollziehbar. Falls nicht, nutzt auf jeden Fall die Kommentar-Funktion. Des weiteren würde ich mich natürlich über Anregungen und Verbesserungsvorschläge freuen, da ich ja doch ein Neuling in Sachen Backbone.js bin. Ansonsten noch der Hinweis, dass bei Gefallen natürlich gerne regen Gebrauch von den unten stehenden Social-Media-Buttons gemacht werden kann.

Vielen Dank!

Heute möchte ich kurz zeigen, wie man mit etwas HTML, CSS und ein paar kleinen GIF-Grafiken eine pixelige Seiten-Navigation im 8Bit-Stil baut. Außerdem benutzen wir etwas jQuery-Magic, um der Navigation noch Fly-Out-Menus zu spendieren.

8Bit-Style-Navigation mit Fly-Out-Menus

Beginnen wir wie gewohnt mit dem HTML-Teil:

HTML
<div id="nav">
  <ul>
    <li class="top">
      <a href="index.html">
        <strong>Home</strong>
      </a>
      <div class="sub">
        <div>
          <ul>
            <li>
              <a href="#">Sub-Item 1</a>
            </li>
            <li>
              <a href="#">Sub-Item 2</a>
            </li>
            <li>
              <a href="#">Sub-Item 3</a>
            </li>
            <li>
              <a href="#">Sub-Item 4</a>
            </li>
            <li>
              <a href="#">Sub-Item 5</a>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li class="top">
      <a href="#">
        <strong>About</strong>
      </a>
      <div class="sub">
        <div>
          <ul>
            <li>
              <a href="#">One Sub-Item</a>
            </li>
            <li>
              <a href="#">Another Sub-Item</a>
            </li>
            <li>
              <a href="#">Still a Sub-Item</a>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <a href="#">
        <strong>Contact</strong>
      </a>
    </li>
  </ul>
</div>

Wie gewohnt eine ungeordnete Liste für die Haupt-Navigation und jeweils eine für die Sub-Navigationen. Um die charakteristischen Ecken hinzubekommen, müssen zwei Elemente ineinander verschachtelt und gegeneinander verschoben werden. Das macht den Quelltext Tag-intensiver. In meinen Augen jedoch noch in einem vertretbaren Rahmen und weit entfernt von klassischer "Diveritis".

Als nächstes kommen wir zum CSS:

CSS
@font-face {
  font-family: 'SilkscreenNormal';
  src: url('slkscr-webfont.eot');
  src: local('☺'), url('slkscr-webfont.woff') format('woff'), url('slkscr-webfont.ttf') format('truetype'), url('slkscr-webfont.svg#webfontUx1SMfhe') format('svg');
  font-weight: normal;
  font-style: normal;
}

ul {
  list-style: none;
}

body {
  background-color: #FFF;
  color: #333;
  font: normal 13px SilkscreenNormal, sans-serif;
}

#nav,
#nav > ul,
#nav > ul > li {
  float: left;
  display: inline;
}

#nav,
#nav > ul {
  width: auto;
  _width: 1%; /* IE6 Hack */
  height: 32px;
}

#nav {
  margin: 50px;
  position: relative;
  border-width: 2px 0;
  border-style: solid;
  border-color: #666;
}

#nav > ul {
  position: relative;
  left: -2px;
  margin-right: -4px;
  padding: 0 10px;
  border-width: 0 2px;
  border-style: solid;
  border-color: #666;
  background: url('data:image/gif;base64,R0lGODlhBAAEAIAAAP///73n/yH5BAAAAAAALAAAAAAEAAQAAAIGTACGqBkFADs=') 0 0 repeat;
  *background: url('img/tile1.gif') 0 0 repeat; /* IE6 and IE7 can't handle data uris */
}
		
#nav > ul > li {
  _width: 1%; /* IE6 Hack */
  margin: 3px 5px;
  position: relative;
}
			
#nav > ul > li > a {
  display: block;
  position: relative;
  width: auto;
  height: 22px;
  border-width: 2px 0;
  border-style: solid;
  border-color: #999;
  background-color: #FFF;
}
				
#nav > ul > li > a:link,
#nav > ul > li > a:visited {
  color: #999;
  text-decoration: none;
  background: url('data:image/gif;base64,R0lGODlhBAAEAIAAAP/////fvSH5BAAAAAAALAAAAAAEAAQAAAIGTACGqBkFADs=') 0 0 repeat;
  *background: url('img/tile2.gif') 0 0 repeat; /* IE6 and IE7 can't handle data uris */
}
				
#nav > ul > li > a:hover,
#nav > ul > li > a:focus,
#nav > ul > li > a:active {
  color: #666;
  background-image: url('data:image/gif;base64,R0lGODlhBAAEAIAAAP/////MmSH5BAAAAAAALAAAAAAEAAQAAAIGTACGqBkFADs=');
  *background-image: url('img/tile3.gif'); /* IE6 and IE7 can't handle data uris */
				}
				
#nav > ul > li > a strong {
  display: block;
  position: relative;
  width: auto;
  height: 22px;
  padding: 0 10px;
  line-height: 22px;
  left: -2px;
  margin-right: -4px;
  border-width: 0 2px;
  border-style: solid;
  border-color: #999;
}
					
#nav > ul > li.top > a > strong {
  padding-left: 21px;
  background: url('data:image/gif;base64,R0lGODlhBgAEAIABAJmZmf///yH5BAEAAAEALAAAAAAGAAQAAAIHhI8WocuwCgA7') 5px center no-repeat;
  *background: url('img/arrow.gif') 5px center no-repeat; /* IE6 and IE7 can't handle data uris */
}
					
#nav > ul > li > a:hover,
#nav > ul > li > a:hover strong,
#nav > ul > li > a:focus,
#nav > ul > li > a:focus strong {
  border-color: #666;
}
				
#nav > ul > li.top > a:hover strong,
#nav > ul > li.top > a:focus strong {
  background-image: url('data:image/gif;base64,R0lGODlhBgAEAIABAGZmZv///yH5BAEAAAEALAAAAAAGAAQAAAIHhI8WocuwCgA7');
  *background-image: url('img/arrow_hv.gif'); /* IE6 and IE7 can't handle data uris */
}
				
#nav > ul > li > a:active {
  top: 1px;
}
				
.sub {
  position: absolute;
  width: auto;
  top: 24px;
  left: 0;
  padding-top: 9px;
  display: none;
}
				
.sub div {
  position: relative;
  border-top: 2px solid #666;
  border-bottom: 2px solid #666;
}
					
.sub div ul {
  position: relative;
  left: -2px;
  margin-right: -4px;
  border-left: 2px solid #666;
  border-right: 2px solid #666;
  background: url('data:image/gif;base64,R0lGODlhBAAEAIAAAP///+7u7iH5BAAAAAAALAAAAAAEAAQAAAIGTACGqBkFADs=') 0 0 repeat;
  *background: url('img/tile4.gif') 0 0 repeat; /* IE6 and IE7 can't handle data uris */
}
						
.sub div ul li {
 border-top: 2px solid #666;
}
							
.sub div ul li:first-child {
  border-top: none;
}
						
.sub div ul li a {
  display: block;
  padding: 0 10px;
  line-height: 22px;
  font-size: 12px;
  white-space: nowrap;
}
								
.sub div ul li a:link,
.sub div ul li a:visited {
  color: #666;
}
								
.sub div ul li a:hover,´
.sub div ul li a:focus {
  background: url('data:image/gif;base64,R0lGODlhBAAEAIAAAP///93d3SH5BAAAAAAALAAAAAAEAAQAAAIGTACGqBkFADs=') 0 0 repeat;
  *background: url('img/tile5.gif') 0 0 repeat; /* IE6 and IE7 can't handle data uris */
}
								
.sub div ul li a:active {
  background: url('data:image/gif;base64,R0lGODlhBAAEAIAAAP///8zMzCH5BAAAAAAALAAAAAAEAAQAAAIGTACGqBkFADs=') 0 0 repeat;
  *background: url('img/tile6.gif') 0 0 repeat; /* IE6 and IE7 can't handle data uris */
}

Als erstes binde ich den Pixel-Font "SilkScreen von Jason Kottke ein. Danach folgen die Angaben für die Navigation.

Interessant ist dabei, dass selbst das äußere Element <div id="nav"> die Angabe float: left hat, damit es sich der Breite des Inhalts anpasst. Das kann zu Layout-Problemen führen, weshalb man im praktischen Einsatz darauf achten muss, das Element direkt unterhalb der Navigation mit einem clear: left zu versehen.

Des weiteren kann man sehen, wie die charakteristischen Ecken zustande kommen: Das äußere Element hat jeweils unten und oben eine zwei-Pixel-starke border und das innere jeweils links und rechts. Das innere Element wird dann per left: -2px und margin-righ: -4px um jeweils zwei Pixel nach links und rechts aus dem umgebenden Element hinaus gezogen. Schon ist der gewünschte Effekt da.

Ebenfalls erwähnenswert sind die Grafiken. Da diese nur 4x4 Pixel bzw. 4x6 Pixel groß sind, lohnt es sich, sie in Form von Data URIs einzubinden und so unnötige HTTP Requests zu sparen. Blöderweise können IE6 und IE7 damit nicht umgehen, weshalb die richtigen Grafiken ebenfalls eingebunden werden müssen. Diese werden dann mithilfe des Star-Hack den beiden Browsern zugewiesen.

Bilder in Data URIs umwandeln könnt ihr übrigens mit diesem Online-Tool.

Zum Schluss noch etwas jQuery um die Fly-Out-Menu-Funktionalität zu realisieren:

JavaScript
$(document).ready( function() {
  $('#nav li.top').hover( function() {
    $(this).find('div').stop(true, true).fadeIn('slow');
  }, function() {
    $(this).find('div').stop(true, true).fadeOut('slow');
  });
});

Ich denke, das ist die spartanischste Lösung und bedarf keiner weiteren Erläuterung.

Das war es auch schon. Die Navigation ist beliebig per Copy&Paste erweiterbar, denkt nur daran, den li-Elementen, die eine Sub-Navigation beinhalten, die Klasse top zu verpassen, damit die Fly-Out-Menu-Funktionalität gewährleistet ist.

Ansonsten wünsche ich viel Spaß mit der Navigation. Bei Fragen bitte wie immer die Kommentar-Funktion nutzen. Und bei Gefallen fleißig via Twitter und Facebook verbreiten. Vielen Dank :-)

"Rising Curtain"-Effekt bei Input-Feldern mit jQuery

Hinweis:

Die CSS-Eigenschaft background-position-x bzw. background-position-y ist eine Erfindung von Microsoft und funktioniert leider nur im Internet Explorer und in Webkit-Browsern. Deshalb gibt es im jQuery-Skript eine Browser-Weiche. Im Firefox und im Opera verschwindet die Grafik einfach nur, der "Rising Curtain"-Effekt findet also nicht statt.

Kommen wir aber zum eigentlichen Tutorial:

Heute möchte ich zeigen, wie man input-Felder in Formularen mithilfe des "Rising Curtain"-Effekts und jQuery interessanter gestalten kann, wenn der Fokus auf ihnen liegt. Alles was man dafür braucht, ist eine kleine Hintergrundgrafik mit einem Farbverlauf und ein paar Zeilen jQuery. Als erstes aber wenden wir uns dem HTML-Teil zu:

HTML
<div>
   <span>
      <input type="text" id="input1" />
   </span>
   <label for="input1">Input 1</label>
</div>

Dieser bedarf wohl keiner großen Erklärung. Es gibt ein input-Feld plus dem dazugehörigen Label. Das input-Feld ist in span-Tags eingefasst, welche für den Rand sorgen.

Als nächstes der CSS-Teil:

CSS
div {
   height: 24px;
   margin-bottom: 10px;
   clear: left;
}
   
   span {
      height: 24px;
      float: left;
      display: inline;
      margin-right: 10px;
      border: 1px solid #999;
}

   span.active {
      border-color: #063050;
   }

      input {
         display: block;
         width: 200px;
         height: 18px;
         padding: 2px 4px;
         line-height: 18px;
         background: #FFF url('img/gradient.jpg') 0 0 repeat-x;
         border: 1px solid #FFF;
         color: #063050;
      }

   label {
      height: 24px;
      float: left;
      display: inline;
      line-height: 24px;
      cursor: pointer;
   }

span und label werden mit float: left nebeneinander angeordnet. Das input-Feld bekommt einen weißen Rand, damit der dunkle Hintergrund nicht an den dunklen Rand des span-Elements klatscht. Der Hintergrund wiederum stellt einen Farbverlauf von dunkelblau zu weiß dar, der mehr als doppelt so hoch wie das input-Feld ist.

Kommen wir nun zum jQuery-Teil:

JavaScript
jQuery(document).ready(function($) {
   $('input').focus( function() {
      $(this).parent().addClass('active');
      if ( jQuery.browser.webkit || jQuery.browser.msie ) {
         $(this).animate({'background-position-y' : '-28px'}, 500, 'linear');
      } else {
         $(this).animate({'background-position' : '0 -28px'}, 0, 'linear');
      }
   });
   $('input').blur( function() {
      $(this).parent().removeClass('active');
      if ( jQuery.browser.webkit || jQuery.browser.msie ) {
         $(this).animate({'background-position-y' : '0'}, 500, 'linear');
      } else {
         $(this).animate({'background-position' : '0 0'}, 0, 'linear');
      }
   });
});

Liegt der Fokus auf einem input-Feld, bekommt das umschließende span-Element die Klasse "active" zugewiesen und der Rand wird dunkelblau. Außerdem verschiebt sich der Hintergrund des input-Feldes nach oben mithilfe der animate()-Funktion von jQuery. Das ist der so genannte "Rising Curtain"-Effekt, durch den der Hintergrund des input-Feldes heller wird. Gesteuert wird das ganze über die CSS-Eigenschaft background-position-y.

So einfach ist das. Das ganze lässt sich natürlich auch bei einer textarea anwenden. Denkt aber daran, dass die Hintergrund-Grafik entsprechend groß sein muss. Auch ist es denkbar, die Hintergrund-Grafik ganz aus dem sichtbaren Bereich fahren zu lassen, so dass das input-Feld weiß wird. Der Kreativität sind kaum Grenzen gesetzt.

Das war es auch schon. Bookmark setzen oder dieses Tutorial via twitter durch den Äther jagen, wird wie immer gern gesehen. Bei Fragen und Anregungen steht die Kommentar-Funktion zur Verfügung. Nichts neues also.

Das Thema Transition in CSS3 ist so neu nicht mehr, doch nach wie vor aktuell. Das liegt u.a. daran, dass mit Firefox und Chrome neuerdings zwei weitere Browser neben Safari auf dem Markt sind, die diese Funktion unterstützen.

So entwickeln sich CSS-Transitions von der Spielerei zur ernsten Alternative zu JavaScript, wenn es um Animationen im Webdesign geht. Deshalb habe ich 7 Tutorials rausgesucht, die einen Überblick über die Möglichkeiten von CSS-Transitions geben.

1. CSS: Transition Timing Functions

The Art of Web

Der Artikel behandelt die Eigenschaften transition-duration und transition-timing-function, und beschreibt, wie man Dauer und Geschwindigkeit von Animationen beeinflusst.

2. CSS Transforms and Transitions - The OSX Dock example

Mac OSX-Dock realized with- CSS3-Transition

Chris Walker zeigt, wie man den Mac OSX-Dock nur mithilfe von CSS3 nachbauen kann.

3. Going Nuts with CSS Transitions

Polaroid-Gallery with CSS3

Natalie Downe demonstriert, wie man eine Polaroid-Galerie mithilfe von CSS-Transitions baut.

4. Nicer Navigation with CSS Transitions

Nicer Navigations with CSS Transitions

Schöne Anleitung, wie man Website-Navigationen schöner gestalten kann mit CSS3.

5. Create the accordion effect using CSS3

CSS Ninja

Der Akkordeon-Effekt nur mit CSS3 und Transitions realisiert.

6. CSS3 Hover Tabs ohne JavaScript

Dosonaro - Blog

Hover Tabs ohne JavaScript. Über die Praxistauglichkeit dieser Lösung kann man streiten, aber nichtsdestotrotz veranschaulicht sie sehr schön die Möglichkeiten von CSS3.

7. CSS Transitions 101

CSS Transitions on Webdesigner Depot

Zum Abschluss eine schöne Gesamtübersicht zum Thema CSS-Transitions auf Webdesigner Depot.

Ich hoffe, ihr habt ein paar hilfreiche Sachen gefunden. Zwar surfen viele Leute noch immer mit einem veralteten Browser, der keine CSS-Transitions unterstützt, doch trotzdem gibt es Möglichkeiten, diese Technik bereits jetzt einzusetzen. Es sind eben die Details, wenn bspw. ein Link nicht schlagartig beim Hover die Farbe ändert, sondern das langsam tut, die eine moderne Website ausmachen. Hat man keinen modernen Browser, kommt man nicht in den Genuss, kann die Seite aber trotzdem nutzen.

Semi-transparente Navigation in WordPress mit CSS

Heute geht es um eine horizontale Reiternavigation in WordPress, deren inaktive Reiter dank CSS Browser-übergreifend semi-transparent sind. Dafür muss als erstes ein span-Element innerhalb der Listen-Elemente der Navigation eingefügt werden. Dies geschieht über folgenden PHP-Code-Schnipsel:

HTML/PHP
<div id="header">
   <ul>
      <li<?php if (is_home() || is_paged() ) echo " class=\"current_page_item\""; ?>>
         <span></span>
         <a href="<?php bloginfo( 'url' ); ?>" title="Back to Main    Page">Home</a>
      </li>
      <?php
         echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><span></span><a$2>$3</a>', wp_list_pages('echo=0&title_li=&depth=1'));
      ?>
   </ul>
   <div class="hr"><hr /></div>
</div>

Das span-Element bekommt in diesem Fall die Transparenz. Würde man die Transparenz auf das a-Element anwenden, würde auch die darin liegende Schrift transparent werden und das soll vermieden werden. Außerdem wird vor der Funktion zur Ausgabe der Seiten noch ein Listenelement mit dem Link zur Startseite eingesetzt. Der ist optional und kann auch entfernt werden, wenn man z.B. den Blog-Titel auf die Startseite verlinkt. Schlussendlich befindet sich unterhalb der Navigation noch ein von einem div-Element umschlossenes hr-Element. Unter diesem werden die inaktiven Listenelemente verschwinden.

Kommen wir nun zum CSS:

CSS
#header ul {
   height: 60px;
   position: relative;
   clear: left;
}

   #header ul li {
      width: auto;
      _width: 140px; /* IE6 needs a fixed width */
      height: 60px;
      margin-left: 20px;
      float: left;
      display: inline;
      position: relative;
   }

      #header ul li span {
         display: block;
         width: 100%;
         _width: 140px; /* IE6 needs a fixed width */
         height: 60px;
         position: absolute;
         top: 10px;
         left: 0;
         z-index: 1000;
         background-color: #FFF;
         background: -moz-linear-gradient( top, #c7e0ed, #fff );
         background: -webkit-gradient( linear, left top, left bottom, from(#c7e0ed), to(#fff) );
         opacity: 0.7;
         filter: alpha(opacity=70);
         -moz-opacity: 0.7;
         filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
         -khtml-opacity: 0.7;
         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
      }

      #header ul li a:link,
      #header ul li a:visited {
         display: block;
         width: auto;
         height: 24px;
         padding: 13px 20px 23px 20px;
         line-height: 24px;
         position: relative;
         bottom: -10px;
         z-index: 2000;
         color: #0660cf;
         text-decoration: none;
         text-shadow: #FFF 0 1px 2px;
      }

      #header ul li a:hover,
      #header ul li.current_page_item a {
         background-color: #FFF;
         background: -moz-linear-gradient( top, #c7e0ed, #fff ); /* gradient for firefox */
         background: -webkit-gradient( linear, left top, left bottom, from(#c7e0ed), to(#fff) ); /* gradient for chrome and safari */
         position: relative;
         bottom: 0;
         _top: 0; /* special invite for IE6 to get goin' */
      }

      #header ul li a:hover {
         color: #c41604;
      }

      #header ul li a:active {
         color: #0059ce;
         position: relative;
         bottom: -1px;
         _top: 1px; /* special invite for IE6 to get goin' */
      }

.hr {
   height: 30px;
   background-color: #333;
   background: -moz-linear-gradient( top, #333, #555 ); /* gradient for firefox */
   background: -webkit-gradient( linear, left top, left bottom, from(#333), to(#555) ); /* gradient for chrome and safari */
   position: relative;
   z-index: 3000;
}

   .hr hr {
      display: none; /* hiding hr because of the IE. quel surprise! */
   }

Am meisten Platz nehmen hier die Angaben für die Transparenz ein. Das liegt daran, dass alle Eventualitäten - sprich "Browser" - berücksichtigt werden müssen. Dafür lässt sich diese Navigation aber auch mit reinem CSS und ohne PNG-Grafiken umsetzen, die ja im IE6 für Ärger sorgen würden.

Trotzdem funktioniert auch das hier nicht ohne dem ein oder anderen Mätzchen unserer Lieblings-Browser aus Redmond - den Internet Explorern. Der IE6 benötigt eine feste Breite für die Listenelemente. Hier ist also etwas Anpassung nötig, je nachdem wie lang die Beschriftung der Reiter ist. Der IE7 hingegen hat Probleme mit den Hover-Zuständen, so dass die Reiter hier nicht nach oben fahren und intransparent werden, wenn man mit dem Cursor rüberfährt. Das ist ärgerlich, schränkt jedoch die Benutzbarkeit der Seite nicht ein.

Des weiteren habe ich noch etwas CSS3 verwendet. Mit den aktuellen Versionen von Firefox, Safari und Chrome bekommt man deshalb einen Farbverlauf bei den Reitern serviert. In den gleichen Browsern sowie der aktuellen Version von Opera gibt es außerdem noch einen leichten Schlagschatten bei der Link-Beschriftung.

Das ist auch schon alles. Und natürlich ist diese Navigation nichts WordPress-spezifisches. In der Demo gibt es eine statische Variante, die in jeder anderen Seite auch verwendet werden kann.

Ansonsten mein übliches Mantra an dieser Stelle: Wenn ihr Fragen habt oder etwas nicht so funktioniert, wie es soll, nutzt die Kommentar-Funktion. Und wenn euch das Tutorial gefallen hat, würde ich mich freuen, wenn ihr es bookmarked oder twittert. Vielen Dank :-)

Hover-und-Spotlight-Effekt in Bildergalerie mit jQuery

Jede Bildergalerie gewinnt, wenn das Thumbnail-Bild unter dem Cursor durch einen Hover-Effekt hervorgehoben wird und der Nutzer weiß, was gerade Sache ist. Wenn die umliegenden Thumbnails dann auch noch durch einen Spotlight-Effekt abgedunkelt werden, ist es noch leichter für den Nutzer, sich auf das aktuelle Bild zu konzentrieren. Wie man das mit jQuery realisiert, zeige ich jetzt.

Als erstes der HTML-Teil:

HTML
<body class="js">
	<div class="wrap">
		<a href="path/to/image.html" class="image">
			<img src="path/to/image.jpg" alt="" />
		</a>
		<a href="path/to/image.html" class="image">
			<img src="path/to/image.jpg" alt="" />
		</a>
		<a href="path/to/image.html" class="image">
			<img src="path/to/image.jpg" alt="" />
		</a>
	</div>
</body>

Als nächstes der CSS-Teil:

CSS
.wrap {
	width: 321px;
	height: 321px;
	padding: 20px 0 0 20px;
	margin: 30px auto;
	clear: left;
}

	.image {
		width: 77px;
		height: 77px;
		padding: 5px;
		margin: 0 20px 20px 0;
		float: left;
		display: inline;
		position: relative;
		z-index: 10;
		background-color: #CCC;
	}
	
	.js .image:hover {
		background-color: #36F;
	}
	
		.image img {
			position: relative;
			z-index: 30;
			border-width: 1px;
			border-style: solid;
			border-color: #666 #999 #999 #666;
		}
		
		.layer1, .layer2 {
			display: block;
			position: absolute;
		}
		
		.layer1 {
			width: 87px;
			height: 87px;
			top: 0;
			left: 0;
			z-index: 20;
			background-color: #36F;
		}
		
		.layer2 {
			width: 77px;
			height: 77px;
			top: 5px;
			left: 5px;
			z-index: 40;
			background-color: #000;
		}

Kleine Anmerkung dazu: Wenn JavaScript im Browser aktiviert ist, wird die Klasse js vom body-Tag entfernt. Geschieht dies nicht, bekommt das a-Tag um die Thumbnails einen :hover-Effekt.

Schlussendlich der jQuery-Teil:

JavaScript
jQuery(document).ready(function($) {
	$('body').removeClass('js');
	var image = $('a.image');
	var html = '<span class=\"layer1\"></span><span class=\"layer2\"></span>';
	image.append(html).find('span').css('opacity', '0');
	image.each( function() {
		$(this).hover( function() {
			$('span.layer1', this).stop().fadeTo(800, 1);
			$(this).siblings().find('span.layer2').stop().fadeTo(800, 0.5);
		}, function() {
			$('span.layer1', this).stop().fadeTo(800, 0);
			$(this).siblings().find('span.layer2').stop().fadeTo(800, 0);
		});
	});
});

Als erstes wird die Klasse js vom body-Tag entfernt. Danach werden die beiden span-Tags eingefügt, die für den Hover- und den Spotlight-Effekt zuständig sind. Danach wird in einer each()-Schleife festgelegt, dass bei einem Hover die span-Tags erscheinen und entsprechend wieder verschwinden.

Das war es auch schon. Falls es Fragen oder Probleme gibt, möchte ich euch wie immer die Kommentar-Funktion nahe legen. Ansonsten freue ich mich natürlich, wenn ihr den Artikel bookmark't oder auf twitter verbreitet.

Social Icon-Bar mit jQuery

Um meine Besucher auf meine diversen Profile in Social Communities aufmerksam zu machen, habe ich rechts in der Sidebar eine Social Icon Bar installiert, deren Icons bspw. auf Flickr und Xing verweisen. Und damit das nicht so langweilig ist, habe ich den Spaß noch ein wenig mit jQuery befeuert.

Jetzt möchte ich kurz erläutern, wie das geht. Als erstes brauchen wir ein passendes Icon-Set. Ich habe für dieses Tutorial auf die Matte Black Social Media Icons zurückgegriffen, da diese Sammlung u.a. auch ein Xing-Icon beinhaltet. Die Icons bringen wir nun in einem Grafik-Programm mithilfe des Crop-Tools auf die gewünschte Größe, in meinem Fall 40x40 Pixel.

Icon mit dem Crop-Tool auf die richtige Groesse bringen

Das machen wir mit allen Icons, die wir benötigen. Danach widmen wir uns dem HTML-Teil:

HTML
<ul id="iconbar">
	<li>
		<span class="s1"></span>
		<span class="s2"></span>
		<span class="s3"></span>
		<span class="s4"></span>
		<a href="http://name.tld/feed/" title="Den RSS-Feed abonnieren">
			<img src="images/rss.png" alt="Den RSS-Feed abonnieren" width="40" height="40" title="Den RSS-Feed abonnieren" />
		</a>
	</li>
</ul>

Basis ist eine ungeordnete Liste. Der Übersichtlichkeit halber habe ich nur einen Listenpunkt angegeben. Die Liste kann natürlich beliebig erweitert werden. Innerhalb der Listenelemente sind vier span-Elemente. Diese bilden die Abdeckungen des jweiligen Icons, welche ähnlich einer Blende zu allen Seiten wegfahren, wenn man mit dem Cursor drüber geht.

Als nächstes kommt der jQuery-Teil:

JavaScript
jQuery(document).ready(function($) {
	$('body').addClass('js_active');
	$('#iconbar li').each(function(i) {
		$(this).hover(function() {
			$('span.s1', this).stop().animate({'left' : '-20px'}, {queue:false,duration:500});
			$('span.s2', this).stop().animate({'top' : '-20px'}, {queue:false,duration:500});
			$('span.s3', this).stop().animate({'right' : '-20px'}, {queue:false,duration:500});
			$('span.s4', this).stop().animate({'bottom' : '-20px'}, {queue:false,duration:500});
		}, function() {
			$('span.s1', this).animate({'left' : '0'}, {queue:false,duration:500});
			$('span.s2', this).animate({'top' : '0'}, {queue:false,duration:500});
			$('span.s3', this).animate({'right' : '0'}, {queue:false,duration:500});
			$('span.s4', this).animate({'bottom' : '0'}, {queue:false,duration:500});
		});
	});
});

Als erstes fügen wir dem body-Element die Klasse "js_active" hinzu. Dadurch werden die span-Elemente sichtbar. So ist dafür gesorgt, dass die Social Icon Bar auch ohne Effekt funktioniert, wenn der Besucher JavaScript deaktiviert hat. Als nächtes wird mit der each()-Funktion auf die einzelnen Elemente der ungeordneten Liste zugegriffen. Fährt der Besucher mit dem Cursor über eines der Listen-Elemente, fahren die span-Elemente ausgelöst durch die animate()-Funktion von jQuery in die jeweils vorgegebene Richtung. Der Wert 500 gibt an, dass dieser Vorgang eine halbe Sekunde dauern soll. Bewegt man den Cursor vom Listen-Element weg, gehen die span-Elemente wieder in ihre Ausgangsposition.

Zum Schluss muss das ganze natürlich noch ansprechend mithilfe von CSS ausgerichtet werden:

CSS
#iconbar {
	clear: left;
	overflow: hidden;
	list-style: none;
}

#iconbar li {
	width: 40px;
	height: 40px;
	margin-right: 10px;
	float: left;
	position: relative;
	overflow: hidden;
	border: 1px solid #999;
	-moz-border-radius: 2px;
	-khtml-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

#iconbar li span {
	display: none;
}

body.js_active #iconbar li span {
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	background-color: #FFF;
	opacity: 0.7;
	cursor: pointer;
}

.s1 {
	left: 0;
	top: 0;
}

.s2 {
	top: 0;
	right: 0;
}

.s3 {
	right: 0;
	bottom: 0;
}

.s4 {
	bottom: 0;
	left: 0;
}

Die Listen-Elemente sind 40 Pixel breit und hoch, und werden nach links gefloated. Wichtig beim Listen-Element sind die Angaben position: relative;, damit die darin liegenden span-Elemente absolut positioniert werden können, und overflow: hidden;, damit die span-Elemente beim Mouseover auch wirklich verschwinden. Zusätzlich geben wir den Listen-Elementen noch eine leichte Eckenrundung mit.

Die span-Elemente sind durch die CSS-Angabe display: none; eigentlich unsichtbar. Ist JavaScript allerdings im Browser des Besuchers aktiviert, bekommt das body-Element die Klasse "js_active" hinzugefügt und es greift die darunter liegende Stylesheet-Angabe. Die span-Elemente sind nun 20x20 Pixel groß und absolut positioniert. Durch die Angabe opacity: 0.7; werden sie außerdem leicht durchsichtig und geben einen Blick auf das dahinter liegende Icon frei. Durch die Angabe cursor: pointer; wird der Cursor schon beim Überfahren der span-Elemente zur - für Links charakteristischen - Hand. Das erhöht die User Experience.

Zum Schluss werden die einzelnen span-Elemente noch positioniert und schon ist die Social Icon Bar fertig. Ihr könnt sie wie ich in die Sidebar integrieren oder unter jeden Blog-Eintrag für die Bookmark-Links. Möglichkeiten gibt es wie immer viele.

Solltet ihr noch Fragen haben oder Probleme auftreten, nutzt die Kommentar-Funktion und scheut euch nicht, mir Fragen zu stellen. Ansonsten danke ich für eure Aufmerksamkeit und - falls euch der Artikel gefallen hat - würde mich freuen, wenn ihr ihn einschlägigen Bookmark-Diensten zuführt.

Animierte Image-Caption mit jQuery unter WordPress


Update 15.10.2013

Da der Code schon etwas in die Jahre gekommen ist, habe ich mir mal die Mühe gemacht, ihn zu aktualisieren. Hauptsächlich geändert ist die Art der Animation. Diese läuft nun über CSS-Transitions. Ältere Browser, wie bspw. der IE8, stellen also keine Animation dar. Die Grundfunktionalität ist jedoch auch ohne Animation gegeben.

Google liebt es ja, wenn unter oder neben Bildern noch ein beschreibender Text steht. Deswegen hat WordPress vor einiger Zeit die Image-Caption eingeführt. Diese kann man - wenn man kein Freund von Bildunterschriften ist - mit jQuery jedoch so manipulieren, dass sie nur bei einem MouseOver erscheint. Wie das geht, erkläre ich in diesem Tutorial.

Wie gehabt als erstes der HTML-Teil:

HTML
<div class="wp-caption" style="width: ???px">
	<img src="/path/to/img.jpg" alt="Dies ist eine Beschreibung" title="Dies ist eine Beschreibung" width="???" height="???" class="size-full wp-image-3402" />
	<p class="wp-caption-text">Dies ist eine Beschreibung</p>
</div>

Dies ist der Caption-Quelltext, der von WordPress ausgegeben wird. Anstatt der Fragezeichen kommen natürlich die richtigen Höhen- und Breitenangaben, ebenso wie der richtige Pfad zum Bild.

Als nächstes ein bißchen CSS für das entsprechende Aussehen:

CSS

.wp-caption {
    position: relative;
    margin-bottom: 1.5em;
    border: 3px solid #999;
    overflow: hidden;
    border-radius: 2px;
}

.wp-caption img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-transition: margin .3s ease-in-out;
    -moz-transition: margin .3s ease-in-out;
    transition: margin .3s ease-in-out;
    }

.wp-caption-text {
    padding: .357143em .714286em;
    margin: 0;
    background-color: #333;
    color: #F3F3F3;
    border-top: 1px solid #666;
}

Wichtig hierbei ist die Angabe "overflow: hidden", da der Caption-Text sonst nicht verschwinden würde. Alle anderen Angaben zu Farben, Innen- und Außenabständen können ohne weiteres angepasst werden. Auch die transition-duration kann noch feinjustiert werden. Ja nach persönlicher Preferenz.

Zum Schluss den nötigen JavaScript- bzw. jQuery-Teil, ohne den hier gar nichts läuft:

JavaScript

(function (win, $) {

    /*
     * init!
    **/
    function init() {

        // no animated Image Captions on touch devices
        if ( 'ontouchstart' in document.documentElement || win.navigator.msMaxTouchPoints ) {
            return;
        }

        // animated captions 4 all.
        $('.wp-caption').each(captionThis);

    }

    /*
     * Enabling the animated captions.
    **/
    function captionThis() {

        var $this = $(this),
            $img = $this.find('img'),
            imgHeight = $img.attr('height'),
            captionHeight = $this.find('p').outerHeight();

        $this
            .height(imgHeight)
            .hover(function () {
                $img.css('margin-top', -captionHeight);
            }, function () {
                $img.css('margin-top', 0);
            });

    }

    /*
     * Starting on DOMLoad
    **/
    $(init);

})(window, jQuery);

Touch-Devices sind von dieser Spielerei ausgenommen. Mit der each()-Funktion wird jede einzelne Image-Caption auf der Seite angesprochen. Danach wird die Höhe des dazugehörigen Bildes und der Beschreibung gespeichert. Als nächstes wird die Höhe des Caption-div gleich der Höhe des Bildes gesetzt, so dass die Beschreibung abgeschnitten und nicht sichtbar ist.

Daraufhin wird eine hover()-Funktion aufgemacht. Fährt man mit dem Cursor über eine Image-Caption, bekommt das dazugehörige Bild einen negativen margin-top, der der Höhe der Beschreibung entspricht, so dass diese in den sichtbaren Bereich fährt. Verlässt man die Image-Caption wieder mit dem Cursor, wird der margin-top des Bildes wieder auf Null gesetzt.

Das war es auch schon, fertig ist die animierte Image-Caption unter WordPress. Wobei natürlich nichts dagegen spricht, das ganze außerhalb von WordPress einzusetzen. Wie immer verweise ich an die Kommentar-Funktion, falls es Fragen gibt oder etwas nicht so funktioniert, wie es soll.

Wie euch vielleicht aufgefallen ist, habe ich in die Sidebar eine kurze Autoren-Info gepackt, damit die Leute wissen, wer hier schreibt. Und wer von euch mal mit dem Cursor über das Foto drüber gefahren ist, wird gemerkt haben, dass sich das Schwarzweiß-Foto dabei in ein Farb-Foto verwandelt. Das ist sicher kein Basis-Feature, aber eine nette jQuery-Spielerei. Und wie das geht, verrate ich jetzt.

Als erstes brauchen wir den entsprechenden HTML-Code:

HTML
<div id="image">
	<img src="image_bw.jpg" alt="Scharzweiß-Bild" />
</div>

Ein normales, von einem div-Element umschlossenes Bild. Im img-Element ist das Schwarzweiß-Foto eingebunden.

Als nächstes etwas CSS:

CSS
#image {
  width: …;
  height: …;
  background: url('image_color.jpg') 0 0 no-repeat;
}

Die Breite und Höhe des div-Elements entsprechen der Breite und Höhe eures Bildes. Als Hintergrund-Bild ist das Farb-Foto eingebunden. Es befindet sich also die ganze Zeit hinter dem Schwarzweiß-Foto und wird von diesem verdeckt.

Nun zum jQuery-Teil:

JavaScript
$(document).ready(function() {
	$('#image img').hover(function() {
		$(this).stop().fadeTo('slow', 0);
	}, function() {
		$(this).stop().fadeTo('slow', 1);
	});
});

Fährt man mit dem Cursor über das Schwarzweiß-Foto, wird dieses ausgeblendet und offenbart das Farb-Foto. Geht man mit dem Cursor vom Foto runter, wird das Schwarzweiß-Foto wieder eingeblendet. Das ganze mit der Geschwindigkeitsangabe slow, damit es auch schön geschmeidig vonstatten geht.

Das war es auch schon. Bei Fragen oder Anregungen sei wie immer auf die Kommentar-Funktion verwiesen.

PS: Eine Demo des ganzen gibt es auf der Blog-Startseite!