“Rising Curtain”-Effekt bei Input-Feldern mit jQuery
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:
<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:
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:
jQuery(document).ready(function($) {
$('input').focus( function() {
$(this).parent().addClass('active');
$(this).animate({'background-position-y' : '-28px'}, 500, 'linear');
});
$('input').blur( function() {
$(this).parent().removeClass('active');
$(this).animate({'background-position-y' : '0'}, 500, '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.
7 hilfreiche Tutorials zum Thema Transitions in CSS3
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
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
Chris Walker zeigt, wie man den Mac OSX-Dock nur mithilfe von CSS3 nachbauen kann.
3. Going Nuts with CSS Transitions
Natalie Downe demonstriert, wie man eine Polaroid-Galerie mithilfe von CSS-Transitions baut.
4. Nicer Navigation with CSS Transitions
Schöne Anleitung, wie man Website-Navigationen schöner gestalten kann mit CSS3.
5. Create the accordion effect using CSS3
Der Akkordeon-Effekt nur mit CSS3 und Transitions realisiert.
6. CSS3 Hover Tabs ohne JavaScript
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
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:
<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:
#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:
<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:
.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:
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 Facebook 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.
Das machen wir mit allen Icons, die wir benötigen. Danach widmen wir uns dem HTML-Teil:
<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:
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:
#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
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:
<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:
.wp-caption {
position: relative;
margin-bottom: 20px;
border: 3px solid #999;
overflow: hidden;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.wp-caption-text {
padding: 5px 10px;
background-color: #333;
color: #EEE;
border-top: 1px solid #666;
}
Wichtig hierbei ist die Angabe "position: relative", da wir beim Verschieben des Bildes mit einem negativen margin arbeiten und der IE6 ohne diesen Zusatz rumzickt. Des weiteren ist die Angabe "overflow: hidden" wichtig, 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.
Zum Schluss den nötigen JavaScript- bzw. jQuery-Teil, ohne den hier gar nichts läuft:
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> </head>
Im Kopf-Bereich binden wir die jQuery-Library ein.
jQuery(document).ready(function($) {
$('div.wp-caption').each(function(i) {
var img_ = $('img', this);
var img_height = img_.attr('height');
var p_height = $('p', this).outerHeight();
$(this).height(img_height);
$(this).hover(function() {
img_.animate({marginTop : -p_height}, 500);
}, function() {
img_.animate({marginTop : '0'}, 500);
});
});
});
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 ganze wird mit der animate()-Funktion von jQuery animiert.
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.
Schwarzweiß-Foto mit jQuery in Farb-Foto verwandeln, wenn man mit dem Cursor drüberfährt
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:
<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:
#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:
$(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!
Der "perfekte" WordPress-Suchschlitz
Heute zeige ich, wie man mit etwas JavaScript und PHP einen benutzerfreundlichen Suchschlitz in WordPress baut. Das "perfekt" steht deshalb in Anführungszeichen, weil ich mir nicht anmaßen möchte, den wirklich perfekten Suchschlitz zu präsentieren. Möglicherweise würde es "advanced" eher treffen, aber wie klingt das denn bitte?!
Also los: Wir wollen einen Suchschlitz, in dem "Suchen…" steht, was wiederum verschwinden soll, wenn der Nutzer auf das Eingabefeld klickt und wieder erscheinen soll, wenn der Nutzer außerhalb des Eingabefeldes klickt. Des weiteren soll auf der Suchergebnis-Seite im Suchschlitz der Suchbegriff stehen, welcher ebenfalls verschwinden und erscheinen soll, je nachdem, wohin der Nutzer klickt.
Das klingt extrem kompliziert, ich weiß, aber bei Verständnisproblemen einfach die Demo anschauen. Ansonsten lege ich mal los. Und zwar brauchen wir folgenden HTML-Teil in der WordPress-Theme-Datei "searchform.php":
<form method="get" id="search" action="<?php bloginfo('url'); ?>/">
<fieldset>
<input type="text" value="<?php echo $search_text; ?>" id="s" name="s" />
<div>
<input type="submit" name="submit" value="Absenden" />
</div>
</fieldset>
</form>
Falls ihr in eurem WordPress-Theme keine "searchform.php" habt, legt sie einfach an, ihr könnt sie mit folgendem Code-Schnippel in eure Templates einbinden:
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
Ansonsten handelt es sich um ein simples Formular mit einem Eingabefeld und einem Submit-Button, welchen ich in ein div-Element eingebettet habe. Warum, könnt ihr in meinem Beitrag zum "Barrierefreien Button mit Text Replacement" nachlesen.
Als nächstes kommt der JavaScript-Teil, der dafür sorgt, dass das Eingabefeld beim Draufklicken geleert wird und zusätzlich dem Submit-Button die Klasse submit_active anhängt, wodurch der Farbwechsel im Schein um den Suchschlitz realisiert wird.
window.onload = function() {
var input = document.getElementById('s');
var value = document.getElementById('s').value;
var submit = document.getElementsByName('submit')[0];
mFocus = function() {
if ( this.value == value ) {
this.value = '';
}
submit.className = 'submit_active';
}
mBlur = function() {
if ( this.value == '' ) {
this.value = value;
}
submit.className = '';
}
with ( input ) {
onfocus = mFocus;
onblur = mBlur;
}
}
Als erstes werden die Selektoren für das Eingabefeld, für dessen Value und den Submit-Button in Variablen gespeichert. Danach die Funktionen definiert, die den Value wechseln und die Klasse submit_active anhängen bzw. entfernen. Zum Schluss werden diese den Events onfocus und onblur zugewiesen.
Als nächstes brauchen wir ein wenig PHP, um auf der Suchergebnis-Seite den spezifischen Suchbegriff im Suchschlitz erscheinen zu lassen:
<?php
if (!is_search()) {
$search_text = "Suche…";
} else {
$search_text = "$s";
}
?>
Über if (!is_search()) fragen wir ab, ob es sich nicht um die Suchergebnis-Seite handelt (man beachte das Ausrufezeichen, welches die Bedingung negiert). Ist dem so, speichert die Variable $search_text den Wert "Suche…". Andernfalls, wenn der Besucher sich auf der Suchergebnis-Seite befindet, speichert die Variable den spezifischen Suchbegriff. Wenn wir nochmal hoch zum HTML-Teil gucken, können wir sehen, dass die Beschriftung des Suchschlitzeingabefeldes mit genau dieser Variable $search_text realisiert wird, indem das Attribut value den Wert bekommt.
Zum Schluss muss der ganze Spaß nur noch gestylet werden:
#search {
width: 301px;
height: 52px;
clear: left;
}
#s,
#search div input,
#search div input.submit_active {
background-image: url('images/sprite.jpg');
background-repeat: no-repeat;
}
#s {
width: 231px;
height: 22px;
padding: 17px 12px 13px 17px;
float: left;
border: none;
line-height: 22px;
font-size: 16px;
color: #666;
background-position: 0 0;
}
#search div {
width: 41px;
height: 52px;
float: left;
overflow: hidden;
}
#search div input {
width: 41px;
padding-top: 52px;
border: none;
background-position: -260px 0;
cursor: pointer;
}
#s:focus {
background-position: 0 -52px;
color: #369;
}
#search div input.submit_active {
background-position: -260px -52px;
}
#search div input:hover {
background-position: -301px -0;
}
#search div input.submit_active:hover {
background-position: -301px -52px;
}
Ich denke, die Style-Angaben sind relativ selbsterklärend. Die Input-Elemente werden formatiert und die jeweiligen Zustände mit der entsprechenden Hintergrundgrafik versehen, wobei ich hier auf ein sog. CSS-Sprite zurückgreife, wodurch sich die Grafik-Datei nicht ändert, sondern nur deren Position. Außerdem nutze ich immer ein sog. CSS-Reset, wodurch u.a. das Element fieldset direkt am Anfang die Style-Angabe border: 0 zugewiesen bekommt, weshalb das hier im CSS-Teil nicht auftaucht. Bedenkt das, wenn ihr die Sachen hier direkt aus dem Beitrag rauskopiert. Im Zweifelsfalle geht ihr auf Nummer sicher, wenn ihr die Beispiel-Dateien runterladet.
Außerdem dürften der IE6 und der IE7 Probleme mit der Darstellung haben, da sie nicht mit den Pseudo-Klassen :hover und :focus um können, bzw. erstere nur bei Links anwenden können. Um diesen Makel zu beheben, guckt nochmal in meinen Beitrag zum Thema Internet Explorer 6.
Ansonsten ist der "perfekte" Suchschlitz fertig. Ich habe noch die .psd-Datei für das CSS-Sprite in den Download-Ordner gepackt, damit ihr die Farben bei Bedarf anpassen könnt. Alternativ könnt ihr natürlich auch ein ganz eigenes Design machen.
In diesem Sinne viel Spaß damit und bei Fragen immer ran an die Kommentar-Funktion.
Nachtrag:
Ich habe im JavaScript-Teil zwei Ergänzungen bei der mFocus- und der mBlur-Funktion vorgenommen. Bevor der Inhalt des Eingabefeldes automatisch gelöscht oder mit dem Wert "Suche…" aufgefüllt wird, findet eine Abfrage statt. So wird verhindert, dass das vom Nutzer eingegebene Suchwort nach dem Klicken außerhalb des Eingabefeldes verschwindet.
Navigation mit JavaScript
Dieses mal geht es um eine Navigation, bei der zu jedem Item eine kurze Info erscheint, wenn man mit dem Cursor rüberfährt. Dies wird regelmäßig von Usability-Experten empfohlen und kann durchaus Sinn machen. Meine Lösung baut wie gewohnt auf HTML und CSS, sowie JavaScript für den Hover-Effekt.
Beginnen wir mit dem HTML-Teil:
<ul id="nav">
<li>
<a href="index.html">Home</a>
<span>Back to frontpage</span>
</li>
<li>
<a href="#">About</a>
<span>Learn more about this site</span>
</li>
<li>
<a href="#">Contact</a>
<span>Send me an email</span>
</li>
</ul>
Eine einfache, ungeordnete Liste, bei der zusätzlich zum Link die jeweilige Info in einem <span>-Elements steht.
Als nächstes der CSS-Teil:
#nav {
width: 456px;
height: 100px;
list-style: none;
clear: left;
}
li {
width: 130px;
height: 80px;
padding: 20px 10px 0 10px;
float: left;
border-left: 2px solid #FFF;
cursor: pointer;
}
li span {
display: none;
}
.active {
background: url('images/li_bg.jpg') 0 0 no-repeat;
}
.active span {
display: block;
line-height: 15px;
color: #EEE;
}
a {
display: block;
margin-bottom: 5px;
font: bold 24px Helvetica, Arial;
color: #FFF;
line-height: 30px;
}
Die Liste weist vom Styling her keine Abnormalitäten auf, außer, dass durch die Angabe cursor: pointer; über dem ganzen li-Element der für Links typische Cursor in Form einer Hand auftaucht. Warum das so ist, wird im JavaScript-Teil ersichtlich. Ansonsten ist das <span>-Element unsichtbar, es sei denn das li-Element hat die Klasse "active".
Nun zum JavaScript-Teil:
window.onload = function() {
var lis = document.getElementById('nav').getElementsByTagName('li');
mOver = function() {
this.className = 'active';
}
mOut = function() {
this.className = '';
}
mClick = function() {
location.href = this.getElementsByTagName('a')[0].href
}
for ( i=0; i<lis.length; i++ ) {
with ( lis[i] ) {
onmouseover = mOver;
onmouseout = mOut;
onclick = mClick;
}
}
}
Innerhalb einer window.onload-Funktion definieren wir als erstes den Selektor für die li-Elemente der ungeordneten Liste. Danach werden die Funktionen für die Maus-Events aufgestellt. Fährt man mit der Maus über ein li-Elemente, wird diesem die Klasse "active" angehängt. Geht man mit dem Cursor wieder vom li-Element runter, wird die Klasse wieder entfernt. Klickt man auf ein li-Element, wird man zu dem im jeweiligen Link spezifizierten URL weitergeleitet.
Dadurch erklärt sich auch die Angabe cursor: pointer; für li-Elemente im Stylesheet. Der klickbare Bereich wird einfach vergrößert, was dem Besucher der Seite die Nutzung der Navigation erleichtert.
Nachdem die Funktionen für die Maus-Events aufgestellt sind, werden sie in einer for-Schleife zugewiesen. Fertig ist die Navigation mit eingeblendeter Info. Wie immer könnt ihr euch die nötigen Dateien runterladen. Viel Spaß!
Animierte Navigation mit jQuery
Dies ist eine Reiter-Navigation, bei der der aktive Reiter am Inhaltsbereich andockt und die inaktiven Reiter darüber schweben. Sozusagen ein Wink mit dem Zaunpfahl für den User. Damit die Benutzung noch ein bißchen geschmeidiger ist, docken die inaktiven Reiter am Inhaltsbereich an, wenn man mit dem Cursor über sie fährt. Für den Effekt nutze ich das JavaScript-Framework jQuery.
Als erstes wie gewohnt der HTML-Teil:
<ul> <li class="active"><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul>
Eine schlichte, ungeordnete Liste. Wichtig ist jedoch, dass der aktive Reiter die Klasse active bekommt.
Als nächstes der CSS-Teil:
ul {
width: 800px;
height: 51px;
padding: 0 0 0 10px;
clear: left;
list-style: none;
background: url('pixel.gif') left bottom repeat-x;
}
li {
width: auto;
_width: 97px;
height: 40px;
float: left;
display: inline;
margin-right: 10px;
text-align: center;
}
a {
display: block;
width: auto;
height: 38px;
padding: 0 10px;
margin-bottom: 0;
line-height: 38px;
border: 1px solid #333;
text-decoration: none;
}
a:link,
a:visited {
color: #333;
background-color: #EEE;
}
a:hover {
color: #333;
background-color: #FFF;
}
a:active {
color: #666;
background-color: #FFF;
}
.active a:link,
.active a:visited {
margin-top: 11px;
border-bottom-color: #FFF;
background-color: #FFF;
}
.active a:hover{
color: #666;
}
.active a:active {
color: #999;
}
Da der Internet Explorer Höhen- und Breitenangaben flexibel handhabt, können wir das a-Element nicht einfach mit dem entsprechenden margin-Wert über das ul-Element hinaus schieben. Deshalb habe ich den unteren Rand des ul-Elements nicht mit einer CSS-border, sondern mit einer ein Pixel großen Grafik realisiert.
Des weiter befindet sich beim Teil für das li-Element die Angabe "_width: 97px". Das ist für den IE6, da dieser das li-Element bei der Angabe "width: auto" über die komplette Breite des Inhaltsbereich zieht.
Als nächstes kommen wir zum JavaScript-Teil:
if ( navigator.appName != 'Microsoft Internet Explorer' ) {
$(document).ready(function() {
$('li').filter('[class=]').hover(function() {
$('a', this).animate({ marginTop: '11px', color: '#CFF' }, 200).animate({ borderBottom: '1px solid #FFF' }, 1);
}, function() {
$('a', this).animate({ borderBottom: '1px solid #333' }, 1).animate({ marginTop: '0', color: '#EEE' }, 200);
});
});
}
Direkt am Anfang kommt eine Abfrage, ob es sich beim Browser des Nutzers um den Internet Explorer handelt. Dieser spuckt beim vorliegenden JavaScript-Code einen Script Error aus, was meinen Recherchen zufolge an der jQuery-Funktion animate() liegt. Leider konnte ich keine Lösung des Fehlers finden, weshalb die Navigation im Internet Explorer ohne jQuery mit reinem CSS auskommen muss.
Ansonsten ist der jQuery-Code-Schnippel schnell erklärt. Fährt man mit dem Cursor über ein in nichtaktives li-Element, wird das darin liegende a-Element animiert, fährt runter und bekommt einen weißen unteren Rand. Beim Verlassen des li-Elements mit dem Cursor, wiederholt sich das Spiel in umgekehrter Reigenfolge.
Zum Schluss bauen wir noch die entsprechenden Style-Angaben ein, um die Navigation für den Internet Explorer und Browser mit deaktiviertem JavaScript fit zu machen:
<!--[if IE]>
<style type="text/css">
a:hover {
margin-top: 11px;
border-bottom: 1px solid #FFF;
}
</style>
<![endif]-->
<noscript>
<style type="text/css">
a:hover {
margin-top: 11px;
border-bottom: 1px solid #FFF;
}
</style>
</noscript>
Fertig ist die animierte Navigation mit jQuery. Oben findet ihr den Link zu den Dateien. Bei Fragen oder Anregungen freue ich mich wie immer über einen Kommentar.