Weitere Einssatzzwecke dieser Funktion sind z.B. Social Media Buttons: Wer einen hohen Wert auf diese Buttons legt, könnte sie rein theoretisch mit dem Benutzer beim Lesen mitfliegen lassen – so dass der User jederzeit die Möglichkeit hat die Buttons während des Lesens aufzufinden und den Beitrag zu teilen.

Ich habe das floating Menü (oder auch floating DIV) gestern hier auf Chukki.de eingebaut, wenn der User nun nach unten Scrollt bleiben ihm trotzdem die wichtigsten Funktionen erhalten – das Menü, die Suche und die Social Media Links. Auf einer Seite wie Chukki.de nicht unbedingt wichtig für ein gutes User Interface, aber ein Beispiel dafür wie man mit jQuery den Nutzwert einer Seite doch sehr leicht erhöhen kann.

HTML

...

<div id="float">Fliegender Content</div>

...

CSS

#float{width:300px; height:300px; background:red;}
.fixed{position:fixed; top:0; width:100%; z-index:100000000000;}

jQuery

$(document).ready(function () {
    $(window).scroll(function (event) {
        var y = $(this).scrollTop();
        var top = 163;
        if (y >= top) {
            $('#float').addClass('fixed');
        } else {
            $('#float').removeClass('fixed');
        }
    });
});

Im Prinzip ganz einfach: jQuery soll bei dem Event “Scroll” schauen auf welcher Höhe sich der User befindet. Mit der Variable “top” wird festgelegt ab welcher Höhe gescrollt werden soll – ist nun der User oberhalb dieses Wertes (also der Abstand nach oben hin größer als in “top” festgelegt), wird dem DIV Container “float” die CSS Klasse “fixed” zugewiesen. Per CSS teilen wir nun mit das die Position “fixed” sein soll, also feststehend – dadurch schwebt die Box mit dem User mit.

Ist der Benutzer nun wieder unterhalb des in “top” festgelegten Wertes wird die Klasse “fixed” wieder entfernt und der DIV Container verhält sich ganz normal wie man es gewöhnt ist.

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...

In der neusten Version von Chukki.de, welche seit gestern online ist, habe ich nun auch erstmals darauf gesetzt um Gallerien und Twitter Status-Updates einzubinden. Das schöne daran ist die Tatsache das es nicht immer ein komplett neuer Blogbeitrag sein muss um die Seite am leben zu halten. Ein Statusupdate bei Twitter oder ein paar geschossene Fotos sind schneller mal angelegt als ein Tutorial über jQuery Funktionen o.ä.

Tumblr ist dafür gerade durch diese Funktion bekannt geworden zwischen den Post Types zu unterscheiden und hat sich auch deswegen von WordPress.com immer stärker differenziert. Hier hat WordPress nun endlich nachgezogen und ein schönes Stilmittel bereitgestellt. Einfach mal kurz einen Link Posten, den letzten Twitter Statusupdate, oder ein paar geschossene Hipstamatic Fotos – all dass ist nun ganz leicht einbindbar.

WordPress unterscheidet dabei zwischen verschiedenen Formaten:

• standard – Ein normaler Blogbeitrag
• aside – Typischer Beitrag nur ohne Title
• gallery – Eine Gallerie von Bildern, einzubinden per Gallery Short Code
• link – Ein Link zu einer anderen Seite. Kann durch Plugins z.B. so getaltet werden wie bei Facebook das eine kurzvorschau des Links dargestellt wird.
• image – Ein einzelnes Bild, entweder der erste img HTML Tag im Beitrag oder eine URL.
• quote – Ein Zitat, am besten im “blockquote” HTML-Tag mit der Quellenangabe, etc.
• status – Kurzer Statusupdate, ähnlich zu Twitter
• video – Ein Youtube, MyVideo oder Vimeo Video, direkt eingebunden oder auch einfach nur per Link
• audio – Eine Audiodatei, wie etwa ein Podcast.
• chat – Ein Chat Verlauf zwischen 2 oder mehreren Chatpartnern.

Die Umsetzung

Die Umsetzung ist mit ein wenig WordPress Kenntnis eigentlich leicht machbar, zuerst muss in der functions.php die Funktion “freigeschaltet” und anschließend in den Theme dateien der Support für die Formate bereitgestellt werden.

Functions.php

add_theme_support( 'post-formats', array( 'aside', 'gallery' ) );

Hier wird der Support für die Funktion bereitgestellt in dem array() müssen die Formate eingestellt werden welche später genutzt werden sollen. Die Parameter entsprechen der Auflistung oben.

Index.php, Single.php, Archiv.php, Search.php

if ( has_post_format( 'status' )) {
  echo 'Das ist ein Twitter Statusupdate';
}

In den Theme Dateien könnt ihr nun die Formate abfragen und je nach Typ drauf reagieren. Dies ist ganz einfach per if Abfrage möglich. Wichtig ist daran zu denken das auch die Archiv.php, Search.php, etc. abgearbeitet werden, denn sonst könnte es zu einem unschönen Effekt kommen.

Design

Ein besonderes Merkmal der Post-Formats ist die Unterscheidung per Icon, auch dies ist bekannt geworden durch die Tumblr Blogs. So kann jedem Format eine eigenes Icon bereitgestellt werden um schnell zwischen den Typen differenzieren zu können. Ich habe auf Chukki.de vorerst nur 2 Icons im Einsatz, eins für die Gallerie und eins für Twitter – für weitere Inspirationen könnt ihr mal bei Elmastudio vorbeischauen.

Einsatz

Um die Post Formats zum Einsatz zu bringen müsst ihr nun ganz einfach beim erstellen eines neuen Beitrages im WordPress Backend das Format einstellen. Die Liste an Formaten beinhaltet alles was ihr vorher in der functions.php vorgegeben habt. Wichtig ist nach wie vor das ihr auch für jedes Format den Code angepasst habt. Viel Spass damit.

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...

Heute möchte ich gerne auf die jQuery Selektoren eingehen – diese sind so ziemlich das wichtigste was es in jQuery zu beachten gibt. Ein falsch gesetzter Selektor kann die Performance einer jeden Website sehr stark abfallen lassen, was wieder der Usability schadet – doch dieser sollte eigentlich durch das Framework geholfen werden.

Aufbau

Kommen wir zum grundsätzlichen Aufbau von jQuery:

$("selektor").funktionsname({ function({ }); });

Der Selektor begrenzt sich auf

$("selektor")

Damit ist dem ganzen nun fast keine Grenze mehr gesetzt. Man kann HTML Elemente direkt ansprechen, auf Klassen zugreifen, ID’s auswählen und hat durch die weitere Spezialisierung durch “:last”, “:first”, “:parent”, “:child” wie man es von CSS mit “a:hover” o.ä. kennt noch gezielteren Zugriff um z.B. nur das letzte Element einer Liste zu löschen oder zu verändern.

Beispiele

Selektor für das Überschriftenelement H2:

$("H2")

Klasse “content”:

$(".content")

ID “wrapper”:

$("#wrapper")

Wie ihr also sehr eigentlich ziemlich einfach… ihr könnt direkt auf die DOM (Document Object Model) Elemente zugreifen ohne lange zu überlegen. Wenn wir jetzt etwas spezieller werden wollen z.B. nur die Listenpunkte einer bestimmten Klasse sieht es wie folgt aus:

$("ul .liste li")

Damit greift ihr nur auf die “li” Elemtente der unordered list “ul” mit der Klasse “liste” zu – also wirklich sehr gezielt.

$("a [rel="extern"])

Alle Links die ein rel=”extern” mit sich bringen werden selektiert.

$("ul:child")

Alle Kindelemente von “ul”, einer unordered list – in diesem Fall eigentlich immer ein “li”.

Ich kann jetzt nicht im Detail auf jeden Selektor eingehen, auf der jQuery Selectors Website findet ihr eine Übersicht welche Selektoren es alles gibt. Es sind eigentlich keine Grenzen gesetzt, es können Formularfelder selektiert werden die einen gewissen Inhalt haben, bestimmte bilder die einen gewisses “alt” Attribute erfüllen usw. – am besten einfach mal ein wenig rumprobieren, mit ein wenig Training läuft das ganze dann meist wie von alleine.

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...

Doch diese Grenzen heben sich langsam dank jQuery und anderen Frameworks auf. Sie bringen viele Animationstechniken mit, die Scrollbare Inhalte, Farbübergänge oder ähnliches bewerkstelligen können. In einigen vorherigen Tutorials habe ich schon die jQuery Tools beschrieben und was für schöne Sachen man damit anstellen kann.

Eine schöner Effekt war bzw. ist das mitskalieren eines großen Hintergrundbildes, wie z.B. auf der Website der Deutschen Post. Dies passt sich automatisch der Browser- bzw. Auflösungsgröße des jeweiligen Users an. Zusätzlich ein paar schöne halb-transparente Text boxen und eine schöne Website ist fertig gestaltet.

Umsetzung

Doch wie macht man das? Eigentlich ganz einfach. Wir benötigen dafür jQuery (aktuell in Version 1.4.2) und fragen via Eventabfrage ab ob der User die Browsergröße verändert. Wenn dies geschieht, wird einem (möglichst gut aufgelöstem) Bild auf der Seite mitgeteilt das es seine größe verändern soll – und zwar auf die des Browser-Viewports.

Hört sich erst einmal ganz einfach an – und das ist es im Prinzip auch, soweit man natürlich schon etwas mit JavaScript bzw. jQuery gearbeitet hat.

CSS

body{margin:0px;}
#background{position:fixed; top:0; left:0; z-index:0;}
#ausgabe{background:black; padding:10px 15px; margin:10px; border:1px solid #cecece; color:white; opacity:0.8; position:absolute; top:140; z-index:10; font-size:12px; width:500px;}

HTML

<body>
     <img src="bg.jpg" alt="Background-Image" id="background" />
     <div id="ausgabe">Ein Layer über dem Hintergrundbild</div>
</body>

Wir legen eine kleine HTML Datei an, welche nur das Bild zur Skalierung und eine halbtransparente Ebene mit dem Content beinhält.

JavaScript

$(document).ready(function(){
    var width  = $(window).width();
    $("#background").width(width);
    $(window).resize(function(){
        width  = $(window).width();
        $("#background").width(width);
    });
})

Wenn das Dokument fertig geladen ist, wird die größe des Browser-Viewports an die Variable width weitergegeben und die ID Background (das Bild) in der Breite an das Fenster angepasst. Die höhe skaliert sich automatisch mit. Das gleiche soll natürlich auch passieren wenn sich die Fenstergröße ändert. Dafür fragen wir das Event resize in Verbindung mit dem Browserfenster (window) ab. Sollte sich hier etwas tun wird das Event ausgelöst und ebenfalls die Breite angepasst.

Also insgesamt ein leichtes diesen Effekt zu nutzen. Optimal z.B. für Seiten im Vintage Style.

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...

Was bedeutet Scrollable? Im Grunde ist es versteckter Content, der durch eine Scrollfunktion sichtbar gemacht wird. Optimale Einsatzgebiete dafür sind Bildergalerien oder Newsticker. So wird der Fokus auf ein Thema oder eine begrenzte Anzahl an Fotos gelegt – sollte einen User dies nicht für Interessant halten, kann er mit einem klick andere Themen und Bilder sichtbar machen. Insgesamt eine sehr schöne und imposante Funktion, welche den Content auf Seiten deutlich lebendiger werden lässt.

Impressionen

Da man diese Funktion mit Bildern nur schlecht präsentieren kann, erläutere ich in diesem Fall nur anhand von Beispielen den Einsatz.

Coda
Optimal nutzt wieder einmal Panic’s Coda diese Funktion. Coda hat die eigene Seite in 7 Bereiche aufgeteilt, welche alle Informationen zu der Software abdecken. Möchte man nun Wissen wie der Editor funktioniert, klickt man auf den Menüpunkt und der Inhalt “rutscht” von rechts nach Links in den Fokus. Also alle Informationen schnell an der Hand ohne die Seite neu laden zu müssen.

Chukki.de
Auf Chukki.de wird diese Funktion ebenfalls im Kopfbereich genutzt. Als Vorschau für den WordPress Theme Download habe ich einige Bilder hinterlegt welche abwechselnd dargestellt werden.

jQuery Tools Example
Im Beispielbereich der jQuery Tools ist ein Anmeldungs Formular mit mehreren schritten, welche Step-by-Step abgearbeitet werden, erläutert. Hier wird im ersten Schritt der Benutzername eingegeben und wenn alle Informationen ausgefüllt sind kann zum nächsten Schritt “gerutscht” werden bis die Anmeldung abgeschlossen ist.

Erläuterung

Natürlich ist wieder die jQuery Tools Library nötig um folgendes Script zu verwenden. Der Download ist nach wie vor auf der jQuery Tools Seite zu finden

JavaScript

<script type="text/javascript">
$(document).ready(function(){
    $("div.scrollable").scrollable();
});
</script>

Dieses Stück Quelltext besagt das auf den Div Container mit der Klasse “scrollable” die Funktion Scrollable ohne jegliche weiteren Parameter angewendet werden soll. Das ist es im groben auch schon was man dafür brauch. Aber auch hier bieten die jQuery Tools viele viele Parameter mit denen man die Funktion weiter anpassen kann.

So kann man mit “size” die Größe der Schritte angeben, mit “vertical” ob das Scrollen statt horizontal vertikal ausgeführt werden soll und mit “items” welche Klasse die Bilder oder Texte beinhalten soll. Dies kann z.B. so aussehen:

<script type="text/javascript">
$(document).ready(function(){
    $("div.scrollable").scrollable({size: 1, vertical: true, loop: true});
});
</script>

Diese Parameter verändern das Scrollable dahin das nur 1 Bild weiter gescrollt wird, dabei aber Vertikal anstatt Horizontal und das wenn das letzte Element erreicht ist, wieder vorne begonnen werden soll.

Was brauchen wir an HTML und CSS um das ganze zu realisieren?

HTML

<!-- vorige Seite Button (wird mit CSS gestylet) -->
<a class="prevPage browse left"></a>
<!-- Die Scrollable haben wir im JavaScript Code als zu Scrollendes Objekt ausgewählt und muss den Rest beinhalten  -->
<div class="scrollable">
    <!-- Die Klasse "items" beinhaltet immer alle Bilder, es sei denn ein anderes Parameter ist angegeben -->
<div class="items">
        <img src="http://example.com/bild1.jpg" />
        <img src="http://example.com/bild2.jpg" />
        <img src="http://example.com/bild3.jpg" />
        <img src="http://example.com/bild4.jpg" />
        <img src="http://example.com/bild5.jpg" />
    </div>
</div>
<!-- nächste Seite Button (wird mit CSS gestylet) -->
<a class="nextPage browse right"></a>

CSS

div.scrollable {
    position:relative;
    overflow:hidden;
    width: 660px;
    height:90px;
}
div.scrollable div.items {
    width:20000em;
    position:absolute;
} 

Dieser CSS Code sagt das alles was in der Scrollable Klasse überhängt abgeschnitten werden soll. Die Items werden absolut positioniert und haben eine riesige Breite damit der komplette Inhalt nebeneinander dargestellt werden kann. Dadurch das Scrollable auf eine Breite von 660px begrenzt ist, gibt es hier keine Darstellungsprobleme.

Alles weitere an Feintuning entnehmt ihr wie immer der jQuery Tools Seite oder einem Beitrag auf noupe.com, welche ebenfalls die Funktionen sehr gut erläutert. Bei Fragen einfach ein Kommentar schreiben oder mich über Twitter kontaktieren.

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...

Der unterschied zwischen beiden Varianten liegt darin ob man die “Permalink-Struktur” angepasst hat. Sollte dies der Fall sein, wird die 404.php genutzt. Wenn aber die Seiten ID’s benutzt werden, wird der “else” Zweig innerhalb der Theme Dateien single.php, index.php und page.php für das error Reporting verwendet. Für beide Varianten stell ich nun eine Funktion vor, um eine E-Mail zu versenden wenn so ein Fehler auftritt. Natürlich kann die Funktion selbst auch für andere Projekte genutzt werden, aber ich beschreibe das ganze etwas vereinfacht für WordPress.

404.php Variante

Damit die 404.php Datei genutzt wird muss die Permalink Struktur angepasst werden. Das geschieht im WordPress Adminbereich unter Einstellungen -> Permalinks und hat den Vorteil, das die Page-ID’s in schöne, lesbare URLs umgeschrieben werden. Google und weitere Suchmaschinen legen viel wert auf eine gute Linkstruktur und deshalb dienen die Permalinks auch zur Suchmaschinenoptimierung.

Nun kommen wir zur eigentlichen Funktion. Die Datei 404.php muss im Theme Ordner liegen und natürlich die nötigen Funktionen beinhalten, welche jedes Theme benötigt. Im Normalfall sollte der Aufbau ungefähr so aussehen:

404.php

<?php
    get_header();
    get_sidebar();
    get_footer();
?>

Damit werden die Dateien header.php, sidebar.php und footer.php eingebunden – soweit sollte aber jeder, der schonmal ein WordPress Theme gemacht hat selber kommen. Desweiteren wird natürlich ein Ausgabetext benötigt damit dem User sichtbar gemacht wird, das die Seite nicht verfügbar ist.

404.php

<?php
    get_header();
    get_sidebar();
?>
    <div class='post'>
        <h2>404 - Die Seite wurde nicht gefunden</h2>
        <div class='entry'>Die gesuchte Seite ist leider nicht auffindbar, bitte versuch es mit einer anderen!</div>
    </div>
<?php
    get_footer();
?>

Dem User wird eine Fehlermeldung ausgegeben, dass die gesuchte Seite nicht verfügbar ist. Erweitert werden kann dies unter anderem durch ein Suchfeld oder aber auch ein Verweis auf eine Sitemap. Um nun ein error Reporting zu erstellen und per Mail zu verschicken benötigen wir folgende Funktion:

functions.php

<?php
function 404_reporting(){
	$send_to = "andre@chukki.de"; // diese Zeile mit der eigene E-Mail Adresse füllen
	$from    = "Chukki.de"; // URL des Blogs ohne http://www.
	$header  = "MIME-Version: 1.0 \r\n";
	$header .= "Content-type: text/html; charset=utf-8 \r\n";
	$header .= "From:". $from ." Administrator <info@". $from ."> \r\n";
	$ip = getenv ("REMOTE_ADDR"); // IP Adresse des Besuchers
	$server = getenv("SERVER_NAME"); // Seiten URL
  	$uri = getenv("REQUEST_URI"); // Angeforderte URL
	$referer = getenv("HTTP_REFERER"); // Von welcher Website der User gekommen um evtl. Verlinkungsfehler zu finden
	$agent = getenv("HTTP_USER_AGENT"); // Browser- bzw. Renderingversion
	$date = date("D M j Y g:i:s a T"); // Zeitstempel
	$message = "404 - Eine Seite nicht gefunden werden".
	"\n<br />----------------------------------------------------------------------".
	"\n<br /><strong>Datum:</strong> ".$date.
	"\n<br /><strong>User IP:</strong> ".$ip.
	"\n<br /><strong>Fehler Seite:</strong> http://".$server.$uri.
	"\n<br /><strong>Referer:</strong> ".$referer.
	"\n<br /><strong>User Agent:</strong> ".$agent;
	mail($send_to,"[".$from."] - 404 Error", $message, $header); // Versand der Mail mit allen Informationen
}
?>

Dieser Code muss in die functions.php geschrieben oder kopiert werden – diese liegt ebenfalls im Theme Ordner. Geändert werden müssen nur die ersten zwei Zeilen, welche angeben wohin die Mail verschickt werden soll und unter welcher URL der Website läuft.

Um die 404.php abschliessend zu komplettieren muss die Funktion noch eingefügt werden. Das sieht dann folgendermaßen aus:

404.php

<?php
    get_header();
    get_sidebar();
?>
    <div class='post'>
        <h2>404 - Die Seite wurde nicht gefunden</h2>
         <div class='entry'>Die gesuchte Seite ist leider nicht auffindbar, bitte versuch es mit einer anderen!</div>
             <?php 404_reporting(); ?>
         </div>
<?php
	get_footer();
?>

Else Variante

Sollte der Fall eintreten das man die Variante mit der Page-ID nutzt, kann die gleiche Funktion genutzt werden. Nur anstatt einer 404.php nutzen wir die single.php, index.php und page.php.
Hierfür muss auch wieder der Grundaufbau geleistet werden – ich zeige das anhand der index.php

index.php

<?php
    get_header();
    get_sidebar();
    if(have_posts()): while(have_posts()):the_post();
?>
    <div class='post'>
        <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
        <div class='entry'><?php the_content(); ?></div>
    </div>
<?php
    endwhile; endif;
    get_footer();
?>

Damit haben wir den Grundaufbau geleistet… mit der while-Schleife werden die Beiträge – sofern vorhanden – angezeigt und die Überschrift verlinkt. Um auch hier das error Reporting zu aktivieren muss die Funktion, welche wir oben geschrieben haben in dem “Else” Teil der Abfrage “if(have_posts())“.

index.php

<?php
    get_header();
    get_sidebar();
    if(have_posts()): while(have_posts()):the_post();
?>
    <div class='post'>
        <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
        <div class='entry'><?php the_content(); ?></div>
    </div>
<?php
    endwhile; else:
        404_reporting();
    endif;
    get_footer();
?>

Eigentlich ziemlich einfach, aber sehr effektiv – jedes mal wenn nun eine Seite nicht gefunden wird, bekommen wir eine E-Mail mit den wichtigsten Daten zugeschickt. Mit dieser Mail kann man entscheiden, ob es sich um einen Eingabefehler handelt oder ob irgendwo eine fehlerhafte Verlinkung vorhanden ist.

Das Ergebnis:

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...

Zunächst wird ein Bild geöffnet und zum Beispiel durch Tonwertkorrekturen und Gradationskurven korrigiert. Da dies in den Meisten Fällen über Einstellungsebenen vorgenommen wird, werden die Ebenen anschließend zusammengefügt, damit mit einer Ebene gearbeitet werden kann (wichtiges Shortcut, um die darunterliegenen Ebenen zuerhalten: shift + alt + cmd + E).

Fotofilter

Nun werden zwei Einstellungsebenen Fotofilter hinzugefügt. Zum Einen Cyan (100%) und zum anderen Magenta (100%). Das sind die Filter die anschließend mit dem Original verrechnet werden. Anschließend wird jede Fotofilter-Ebende mit dem Original auf jeweils eine Ebene zusammengefügt – daher sollte der oben genannte Shortcut verwendet werden, da dieser die darunetrliegenen Ebenen immer erhält, sodass zwei neue Ebenen entstehen, wobei eine das Original mit dem Cyan-Filter und die andere das Original mit dem Magentafilter zeigt.

Die beiden mit den jeweiligen Fotofiltern zusammengefügten Ebenen sind die, mit denen im weiteren Verlauf gearbeitet wird. Dabei sollte die Cyan-Ebene direkt unter der Magenta-Ebene liegen (zum Experimentieren auch andersherum möglich), die anderen Ebenen können deaktiviert werden. Die Magenta-Ebene wird den auf Modus “Inneinanderkopieren” gesetzt und die beiden Ebenen werden zu einer zusammengefügt.

Einstellungen über Einstellungsebenen

Über die Einstellungsebenen werden weitere Anpassungen vorgenommen. Zunächst  wird die Einstllungsebene Farbton/Sättigung angewählt. Der Farbton bleibt gleich, die Sättigung wird um 44 verringert und die Helligkeit um 5 erhöht (also 0/-44/+5). Danach werden die Gradationskurven angepasst. Hierbei werden Rot und Grün angehoben und Blau abgesenkt (siehe Abbildungen). Anschließend wird die Einstellungsebene Kanalmixer gewählt. Dem Ausgabekanal Rot wird zu seinen 100% Rot noch 5% Grün hinzugefügt, Grün bleibt unverändert und der Ausgabekanal Blau wird um 5% Blau reduziert.

Letzte Schritte

Nach den Anpassungen über die Einstellungsebenen, werden die Ebenen wieder zu einer zusammengefügt. Jetzt sollten die darunterliegenden Ebenen nicht deaktiviert werden! Die zusammengefügte Ebene wird über den Gaußschen Weichzeichner weichgezeichnet. Die Intensität ist variabel -  je stärker, desto unklarer werden die Konturen. Der Ebenenmodus “Inneinanderkopieren” wird für diese Ebene gewählt und die Deckkraft wird auf 50% gesetzt. Diese Ebene wird dupliziert (Apfel + j), auf den Modus “Multiplizieren” gestzt und die Deckkraft wird auf 30% verringert- Fertig.

Das Ergebnis ist oftmals abhängig vom Ausgangsmaterial, also ist es normal dass oftmlas recht unterschiedliche Ergebnisse entstehen. Viel Spaß mit diesem Tutorial :)

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...

Dazu nutzen wir die Mootools Funktion tween, welche einen Überlauf zwischen zwei CSS Eigenschaften zulässt.

$$('a').each(function(link){
    var hover_color = link.getStyle('color');
    link.addEvents({
        'mouseenter': function (){ this.tween('color', '#fa8749'); },
        'mouseleave': function (){ this.tween('color', hover_color); }
    });
});

Wir nehmen den DOM Selektor ($$) und weisen ihm a (alle Links) zu. Durch die Funktion each wird mitgeteilt das jeder Link durch die folgenden Zeilen Code beeinflusst werden soll. In der Variable hover_color speichern wir die Ausgangsfarbe des Links um nach dem hover wieder die Ursprungsfarbe herzustellen.

Die beiden Events mouseenter und mouseleave führen die Animation anschliessend aus.

Damit ist es schon getan. 7 Zeilen Code um eine kleine Animation zu zaubern. In der Demo bzw. beim Download habe ich zusätzlich mit einer Klasse gearbeitet, um den Unterschied zwischen dem normalen hover und dem animierten, innerhalb einer Datei besser ersichtlich zu machen. Dafür habe ich einfach den Selektor (oben a – Alle Links) durch eine CSS Klasse ersetzt.

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...

Sicherlich mag es mehrere Wege geben wie man diese Funktion umsetzten kann. Ich werde euch den Weg aufzeigen, welchen ich bisher immer genutzt habe. Für weitere, eventuell auch leichtere und bessere Umsetzungen würde ich mich über ein Kommentar freuen.

Die Grundlage

Die Grundlage ist mal wieder Mootools 1.21. Diese muss natürlich im Header eingebunden werden, damit das Framework seine Tat vollziehen kann.

Javascript

Sobald die Seite fertig geladen ist, soll die Klasse .tab mittels CSS versteckt werden (display:none). Die ID #tab_1 soll jedoch erscheinen. Damit ist das erste Tab beim laden aktiv. Ich habe nun 3 Tabs angelegt und damit auch 3 Toggler (Schalter). Beim Klick auf die Toggler 1-3 wird ein Event ausgeführt, welches alle Tabs wieder versteckt und nur den Inhalt des jeweiligen angeklickten Tab anzeigt. Das wiederhole ich für alle Tabs. Sollten mehr Tabs gewünscht sein, müssen noch mehr Events hinzugefügt werden; natürlich mit fortlaufender Zahl beim Toggler und Tab.

window.addEvent('domready', function() {<br />
	$$('.tab').setStyle('display', 'none');<br />
        $('tab_1').setStyle('display', 'block');</p>
<p>        $('toggler_1').addEvent('click', function(a){<br />
            $$('.tab').setStyle('display', 'none');<br />
            $('tab_1').setStyle('display', 'block');<br />
        });<br />
        $('toggler_2').addEvent('click', function(b){<br />
            $$('.tab').setStyle('display', 'none');<br />
            $('tab_2').setStyle('display', 'block');<br />
        });<br />
        $('toggler_3').addEvent('click', function(c){<br />
            $$('.tab').setStyle('display', 'none');<br />
            $('tab_3').setStyle('display', 'block');<br />
        });<br />
    });

HTML

Der HTML Code ist ziemlich einfach. Erst ein paar Links als Toggler für die verschiedenen Tabs und darunter in den div Containern den Content der Tabs.

<ul>
    <li><a href='#' class="toggler" id='toggler_1'>News</a></li>
    <li><a href='#' class="toggler" id='toggler_2'>Kommentare</a></li>
    <li><a href='#' class="toggler" id='toggler_3'>Suche</a></li>
</ul>
<div class="tab" id="tab_1">
    Das sind die News!
</div>
<div class="tab" id="tab_2">
    Und das die Kommentare...
</div>
<div class="tab" id="tab_3">
    Hier kannst du suchen...
</div>
<p>

CSS

Nun machen wir das Ganze noch ein klein wenig hübscher. CSS sei dank ist das ziemlich leicht zu bewerkstelligen. Ich lege in diesem Fall die Links alle durch display:inline nebeneinander, entferne den Listenpunkt und spiele ein wenig mit den Farben und Abständen.

ul li{<br />
    display:inline;<br />
    list-item:none;<br />
    border:1px solid #444444;<br />
    background-color:#cccccc;<br />
    padding:2px;<br />
    margin:1px;<br />
}

Zum Schluss

Die Tabs können natürlich mit allem Möglichen gefüttert werden. Das kann z.B. ein Suchfeld sein, eine MySQL Abfrage zur Ausgabe der News mit PHP oder aber eben auch die letzten Kommentare von WordPress als Widget.

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...

Sicherlich ist es möglich die Deckkraft einfach per CSS zu verändern und bei “:hover” dann die volle Deckkraft zu nutzen. Ich erkläre jedoch den Vorgang in zusammenarbeit mit dem JavaScript Framework Mootools, welches viele schöne Effekte mit sich bringt und somit ein fließender Übergang zwischen den beiden Stufen der Deckkraft möglich ist.

Als erstes benötigen wird dafür die Javascript Dateien von Mootools, welche es hier zum Download gibt.

Die Datei wird in den Quelltext eingebunden. Dazu wird unter “src” der Pfad zur .js Datei angegeben.

<script src="js/mootools-1.2-core.js" type="text/javascript">

Anschließend werden die beiden Werte für die Deckkraft angegeben:

<script type="text/javascript">
    var fade_in = 1;
    var fade_out = 0.5;
</script>
<body onload="$$('img').fade(0.5);">

Wenn die Grafik mit der Maus markiert wird soll Sie voll sichtbar sein, deswegen der Wert 1 bei fade_in. Wenn die Maus die Grafik wieder verlässt soll sie wieder leicht die Deckkraft verlieren, wofür der Wert 0.5 bei fade_out steht

Im "body" wird dem Browser mitgeteilt das er beim laden der Seite alle Bilder eine Deckkraft von 0.5 geben soll. Sollten nicht alle Bilder diese Deckkraft bekommen, wird anstatt "img" die für die Bilder genutzte CSS Klasse oder ID genutzt.

Der dritte und letzte Schritt wendet die Funktion auf die Bilder an. Dafür werden die Javascript Events onmouseover und unmouseout genutzt.

<img title="Chukki.de Logo" onmouseover="this.fade(fade_in);" onmouseout="this.fade(fade_out);" src="chukki.jpg" alt="Chukki" />

Die beiden Events lösen jeweils eine Funktion aus. In diesem Fall ist es "this.fade". Beim MouseOver wird, wie oben beschrieben, der Wert von "fade_in" genutzt und beim MouseOut der Wert von "fade_out". Durch die angabe von "this" vor dem "fade bezieht sich die Funktion nur auf sich selbst, also in diesem Fall das Bild.

So entsteht ziemlich schnell ein schöner Effekt für Bilder, welche nicht durchgehend angezeigt werden sollen oder als Link fungieren sollen.

// Update - Ein weiterer Vorschlag von Johannes, welcher den JavaScript Code vom HTML trennt:

window.addEvent(’domready’, function(){<br />
    $$(’img’).each(function(img){<br />
         img.set(’opacity’, 0.5).addEvents({<br />
            ‘mouseover’: function(){<br />
                 this.fade(1);<br />
             },<br />
            ‘mouseout’: function(){<br />
                 this.fade(0.5);<br />
             }<br />
        });<br />
    });<br />
});

Chukki.de bei
Facebook | Twitter

Andere interessante Posts...