Auf vielen WordPress-Blocks befindet sich im Kommentarbereich eine Zeile mit Smileys.

…

Durch Anklicken können diese Smileys dann schnell und einfach in einen Kommentar eingebunden werden. So etwas wollte ich meinen Besuchern natürlich auch bieten und habe für Euch etwas recherchiert. Folgender Javascript-Block, den ich noch XHTML-Strict validiert habe, muss in Eurer comments.php unter (oder über) der <textarea></textarea> eingefügt werden.

<div class="smileys">
  <script type="text/javascript">
  /*<![CDATA[*/
    function SJB_appendSmiley(text) {
        var comment=document.getElementById('comment');
        comment.value=comment.value+' '+text;
    }

document.write('<a href="javascript:SJB_appendSmiley(\':wink:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_wink.gif" alt=":wink:" class="wp-smiley" title=":wink:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':-|\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_neutral.gif" alt=":-|" class="wp-smiley" title=":-|" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':-x\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_mad.gif" alt=":-x" class="wp-smiley" title=":-x" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':twisted:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_twisted.gif" alt=":twisted:" class="wp-smiley" title=":twisted:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':)\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley" title=":)" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\'8-O\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_eek.gif" alt="8-O" class="wp-smiley" title="8-O" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':(\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_sad.gif" alt=":(" class="wp-smiley" title=":(" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':roll:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_rolleyes.gif" alt=":roll:" class="wp-smiley" title=":roll:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':-P\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_razz.gif" alt=":-P" class="wp-smiley" title=":-P" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':oops:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_redface.gif" alt=":oops:" class="wp-smiley" title=":oops:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':-o\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_surprised.gif" alt=":-o" class="wp-smiley" title=":-o" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':mrgreen:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_mrgreen.gif" alt=":mrgreen:" class="wp-smiley" title=":mrgreen:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':lol:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_lol.gif" alt=":lol:" class="wp-smiley" title=":lol:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':idea:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_idea.gif" alt=":idea:" class="wp-smiley" title=":idea:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':-D\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_biggrin.gif" alt=":-D" class="wp-smiley" title=":-D" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':evil:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_evil.gif" alt=":evil:" class="wp-smiley" title=":evil:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':cry:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_cry.gif" alt=":cry:" class="wp-smiley" title=":cry:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\'8)\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_cool.gif" alt="8)" class="wp-smiley" title="8)" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':arrow:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_arrow.gif" alt=":arrow:" class="wp-smiley" title=":arrow:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':-?\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_confused.gif" alt=":-?" class="wp-smiley" title=":-?" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':?:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_question.gif" alt=":?:" class="wp-smiley" title=":?:" />');
document.write('</a> ');
document.write('<a href="javascript:SJB_appendSmiley(\':!:\')">');
document.write('<img src="http://einmal-am-tag.de/wp-includes/images/smilies/icon_exclaim.gif" alt=":!:" class="wp-smiley" title=":!:" />');
document.write('</a> ');
/*]]>*/
</script>

<noscript><p>Wenn du Javascript aktiviert hättest, würden hier klickbare Smileys stehen <br /> You could see clickable smiley faces here if you had JavaScript activated.</p></noscript></div>

Über das div mit der Klassenbezeichnung (class=”smileys”) könnt Ihr die Zeile in Eurem Stylesheet positionieren (falls gewünscht).

Der Pfad zu jedem einzelnen Smiley-Bild muss noch durch Eure eigene Domain ersetzt werden.

document.write('<img src="http://deine_domain/wp-includes/images/smilies/icon_exclaim.gif" alt=":!:" class="wp-smiley" title=":!:" />');

Wenn Ihr das nicht händig machen wollt, empfiehlt sich die Bearbeitung in einem Editor. Notepad++ bietet für solche Vorgänge unter Suche (STR+F) die Option Ersetzen.
Damit lassen sich auch in größeren Scripten einzelne Zeichen schnell und problemlos durch andere austauschen.

In allen Zeilen des beginnenen a-Tags müssen zudem die Hochkommata escaped werden.

document.write('<a href="javascript:SJB_appendSmiley(\' ... \')">');

Die Smileys (wie auch am Pfad erkennbar) befinden sich in dem Ordner …/wp-includes/images/smilies/…, der direkt im Root-Verzeichnis (1. Ebene) Eurer WordPress-Installation liegt. Werft dort einfach mal einen Blick hinein.
Den dort könnt Ihr auch weitere bzw. andere Smilies einfügen. Dazu einfach etwas im Netz stöbern. Eventuell kreiert jemand ja auch einen Satz eigener Smileys und stellt diese dann anderen zur Verfügung.

Sobald Ihr dort eigene Smileys hinzugefügt habt, müssen diese dem WordPress-System noch “bekannt” gemacht werden:

• Öffnet dazu bitte ebenfalls im wp-includes-Ordner die functions.php
• Drückt dort die Tastenkombination “STRG+F”, so dass sich das “Suchen”-Fenster öffnet und gebt dort $wpsmiliestrans = array ein
• Dadurch gelangt Ihr zu einem Array, in dem allen einzelnen Smiley-Images (aus dem zuvor angesprochenen smilie-Ordner) ein individueller Text zugeordnet wird.

  

• Der gleiche Text wird beim Anklicken eines Smileys an die Funktion SJB_appendSmiley übergeben und in den Kommentarbereich eingefügt.
  
  

  document.write('<a href="javascript:SJB_appendSmiley(\':-|\')">');
  

• Wordpress tauscht diesen Text dann durch das jeweilige im $wpsmiliestrans-Array zugewiesene Smiley aus
• Für jeden Eurer eigenen Smileys, die Ihr zuvor im smilie-Odner abgespeichert habt, legt Ihr hier nun nach dem gleichen Schema eine eigene Zeile an:
  
  

  ...
   ':neuer_smiley:' => 'neuer_smiley.gif',
  ':neuer_smiley2:' => 'neuer_smiley2.gif',
  ':neuer_smiley3:' => 'neuer_smiley3.gif',
  ...
  

• Der Javascript-Block in der comments.php muss natürlich um jedes neu hinzugefügte Smiley erweitert werden:
  
  

  document.write('<a href="javascript:SJB_appendSmiley(\':neuer_smiley:\')">');
  document.write('<img src="http://eure_domain/wp-includes/images/smilies/neuer_smilie.gif" alt=":-x" class="wp-smiley" title=":neuer_smilie:" />');
  document.write('</a> ');
  

Jetzt sollte klar geworden sein, wie es funktioniert.

Mich persönlich sprechen diese ‘manto-smileys’ besonders an, die nur noch mit GIMP (oder Photoshop) auf eine akzeptable Größe reduziert werden müßten.
Als ich diese das erste mal gesehen habe, dachte ich nur:”Wie geil ist das denn!”. Allerdings sagt die Seite nichts über die Lizenzbestimmungen des chinesischen Designers aus …!

In der Programmierung, besonders bei größeren Projekten/ Scripten, wird der Quellcode schnell unübersichtlich und schwer wartbar. Wer schon einmal ein Programm/ Script mit mehr als 1000 Zeilen geschrieben hat, wird mir da sicherlich zustimmen. Aus diesem Grund empfiehlt es sich, den Quellcode zu kommentieren und übersichtlich einzurücken. Zu dem können if/else-Kontrollstrukturen und Datenbankabfragen verkürzt dargestellt werden. In diesem Tutorial möchte ich Ihnen dazu einige Beispiele bieten.

Kommentare einsetzen
In der Programmierung sind Kommentare (Comments) meiner Meinung nach das Salz in der Suppe. Sie ermöglichen es uns auch noch nach Monaten, jeden Abschnitt des jeweiligen Quellcodes besser und somit schneller zu verstehen. Dies ist besonders wichtig, wenn fremder (nicht von uns selbst programmierter) Code vorliegt. Ich habe mir angewöhnt, besonders komplexe Passagen direkt mit einem Kommentar zu versehen. In PHP gibt es dazu zwei Möglichkeiten:

/*Einzeiliger Kommentar*/
// einzeilige Kommentare können mit ’//’ (zwei Backslashes) in den Quellcode eingefügt werden

/*Mehrzeiliger Kommentar*/
/* mehrzeilige Kommentare werden mit einem
* beginnenden ’/*’ (Slash und folgendem Sternchen)
* eingeleitet und mit ’*/’ (also umgekehrt)
* wieder abgeschlossen.
* In jeder neuen Zeile empfehle ich ein
* Sternchen als Einleitung einzufügen
*/

Auch wenn Kommentare Mehrarbeit bedeuten, möchte ich Ihnen nahelegen, davon ausgiebig Gebrauch zu machen. Spätestens wenn ein älteres Projekt verändert/angepasst werden muss, werden sie dies zu schätzen wissen. Zudem wird der Lerneffekt verstärkt, da Sie sich mit dem erstellten Quellcode intensiver auseinandersetzen.

Quellcode einrücken
Genau wie beim Kommentieren erfordert das durchgehende Einrücken des Quellcodes zunächst mehr Aufwand (obwohl es bei mir eigentlich schon automatisch erfolgt). Aber neben der verbesserten Lesbarkeit wird durch diese Maßnahme vor allem die Fehlersuche enorm erleichert. Dabei haben sich folgende zwei Möglichkeiten/ Stile etabliert (Einrückunsstile)

/* Stil 1 */
if($ausruf == 'Hallo') {
	echo "Er hat 'Hallo' gerufen";
} else  {
	echo "Er hat nichts gerufen";
}

/* Stil 2 */
if($ausruf == 'Hallo')
{
	echo "Er hat ‘Hallo’ gerufen";
}
else
{
	echo "Er hat nichts gerufen";
}

Die Einrückungstiefe kann dabei getrost selbst bestimmt werden. Einige nehmen einen ganzen ‘Tab’, andere nur zwei oder drei Leerzeichen. Ich denke, dabei kommt es auf die Verschachtelungstiefe an.

Ich persönliche ertappe mich regelmäßig dabei, dass ich Mal den einen und Mal den anderen Einrückungsstil verwende. Den ersteren Aufgrund meiner Java/C++-Erfahrung (der etwas mehr Platz spart) und den zweiten hinsichtlich PHP (den ich als etwas übersichtlicher empfinde). Des Weiteren achte ich darauf, dass z.B. Gleichheitszeichen bei Zuweisungen ordentlich untereinanderstehen.

$string    = 'Hallo Welt';
$boolean   = true;
$int       = 5;
...

Entscheiden Sie selber, wie Sie Ihren Quellcode überschaubarer gestalten! Viele Editoren besitzen bereits eine automatische Einrückung oder das sogenannte Syntaxhighlighting, wodurch dieser Schritt vereinfacht wird.

Quellcode verkürzen
Dies ist ein heikles Thema und es gehört viel Erfahrung und eine Menge Grips dazu, Algorithmen oder einfacher gesagt die Programmierlogik zu verkürzen. Während der ersten Schritte, in denen man sich die Basics der Programmierung aneignet, kommt es meistens zu ausufernden Konstrukten, um z.B. eine Anweisung zu programmieren.
Ausgiebiger Gebrauch von verschachtelten if/else-Kontollstrukturen führen zwar letztendlich ebenfalls zum Ziel, sind jedoch fehleranfälliger und verlangsamen das Programm/ Script (mal ganz abgesehen von der bereits zuvor angesprochenen schlechteren Übersichtlichkeit).

Während diverser Weiterbildungen war es ein beliebter „Wettbewerb“ unter den Teilnehmern, alles möglichst kurz zu programmieren. Die Königsklasse hierbei war der legendäre „Einzeiler“: Unter Verwendung der ausgeklügelsten Techniken (Stichworte: Modulo, Reguläre Ausdrücke, …) wurde mehrzeiliger Code zu einer einzigen Zeile komprimiert.

Ich habe dabei ein ums andere Mal große Augen bekommen, mir dies aber möglichst nicht anmerken lassen !
Doch neben genug Gehirnschmalz und Erfahrung gibt es auch ein paar Techniken, die leicht erlernbar sind und den Quellcode ebenfalls kürzer und überschaubarer gestalten.
Eine Möglichkeit besteht darin, einfache if/else-Kontrollstrukturen in einer einzigen Zeile auszuführen:

/* Lange Version */

if(isset($_POST['color']))
{
	$backgroundcolor =  $_POST['color'];
}
else
{
	$backgroundcolor =  'white';
}

/* Kurze Version */
$backgroundcolor = (isset($_POST['color'])) ? ($_POST['color'] : 'white';

Das Beispiel ist aus der Luft gegriffen und bezieht sich auf PHP. Eine ähnliche Syntax gibt es auch für Java und C++ (…). Es handelt sich hierbei um die sogenannten ‘Ternary Operators’ (engl. Dreifach-Operatoren). Am Anfang etwas gewöhnungsbedürftig, möchte man sie später (einmal verinnerlicht) nicht mehr missen.
Mit dem PHP-Befehl sprintf läßt sich der Quellcode ebenfalls oftmals verürzt und übersichtlicher darstellen.

/* Beipiel herkömmliche Schreibweise */
<?php
$query = "SELECT telefon
          FROM kunde
          WHERE vorname = '".addslashes($vorname)."'
          AND name = '".addslashes($name)."'
          AND strasse = '".addslashes($strasse)."'";
$result = mysql_query($query);
...
/* Nicht sehr übersichlich, oder?!
Dann schauen Sie sich mal dieses Beispiel an*/

$query = sprintf("SELECT telefon
                  FROM kunde
                  WHERE vorname= '%s'
                  AND name = '%s'
                  AND strasse = '%s'",
                  addslashes($vorname),
                  addslashes($name),
                  addslashes($strasse));
$result = mysql_query($query);
?>

Hierbei werden im Quellcode Platzhalter (Literale) eingesetzt, die anschließend in der gleichen Reihenfolge durch die angefügten Parameter ersetzt werden.
Ein %s bedeutet hierbei, dass an dieser Stelle ein String gesetzt wird. Es können auch Dezimalzahlen (%d) oder Zahlen vom Typ float (%f) übergeben werden. Zudem lassen sich neben anderen Angaben auch Ausrichtung und Länge einfügen, auf die ich hier aber nicht weiter eingehen werde (weiterführende Informationen).

Tun Sie sich (und eventuell anderen) einen Gefallen und schreiben Sie lesbaren Quellcode!

Wenn viel mit Javasript und Ajax gearbeitet wird, kommt es vor, dass der Benutzer bei der einen oder anderen Anwendung warten muss. Dann erscheint meist ein Ladebild oder Loadpicture, um dies zu symbolisieren. Für den Videomodus* habe ich ein neues gesucht und bin heute auf folgende Seite gestoßen:

Dort kann man verschiedene Ladebilder, seinen Vorstellungen angepasst, herunterladen. Vielleicht kannte es der eine oder andere noch nicht.
(*Anmerkung: Der Videomodus ist nur im Firefox, Opera und IE8 verfügbar)

Keine Sorge, ich möchte hier kein weiteres Tutorial über Ajax und das XMLHttpRequest-Objekt schreiben (es sei denn, es wird danach gefragt). Bestimmt wissen Sie, dass die verschiedenen Browser mit dem XMLHttpRequest-Objekt arbeiten, um Daten zwischen Server und Browser zu übertragen, ohne dass die Seite neu geladen werden muss.
Nur der Internet Explorer arbeitet mit einer MSXML-Komponente, die als ActiveX-Objekt geladen wird. Aus diesem Grund wird in fast allen Ajax-Tutorials eine Browserweiche eingebaut, um an das benötigte Objekt zu gelangen. Hier möchte ich Ihnen einen kürzeren Weg vorstellen.
Zunächst zwei übliche Browserweichen.
try/catch-Block:

function erzXMLHttpRequestObject(){

/* try/catch */
var resObjekt = null; //Object-Variable deklarieren
try{
   resObjekt = new ActiveXObject("Microsoft.XMLHTTP");//IE alt
  }
   catch(Error){
     try{
	  resObjekt = new ActiveXObject("MSXML2.XMLHTTP");//IE neu
     }
      catch(Error){
	  try{
	     resObjekt = new XMLHttpRequest();//IE7+, Firefox, Chrome, Opera, Safari
	  }
	  catch(Error){
		alert("Erzeugung eines XMLHttpRequest-Objekts ist nicht möglich");
	  }
      }
  }
	return resObjekt;//Rückgabe des Objekts !
}

Oder über eine if/else-Abfrage:

/* if/else */
function erzXMLHttpRequestObject()
{
var resObjekt = null;
if (window.XMLHttpRequest)
  {
  // IE7+, Firefox, Chrome, Opera, Safari
  resObjekt = new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // IE6, IE5
  resObjekt = new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Erzeugung eines XMLHttpRequest-Objekts ist nicht möglich!");
  }
  return resObjekt;
}

Bei Wikipedia finden Sie auch noch eine Möglichkeit, die beides kombiniert.


Bei meinen endlosen Recherchen habe ich eine weitere Lösung gefunden, die ich schon seit längerem ohne Probleme einsetze und die auf Microsofts Conditional Compilation (engl. bedingte Ausführung) basiert. Auf diese Weise lässt sich Javascript-Code vor allen Browsern bis auf den Internet Explorer “verstecken”. Dabei handelt es sich um ein Javascript-Kommentar.

 /*@cc_on ... @*/

Während alle anderen Browser dies ignorieren (da Kommentar), erkennt der IE in ‘@cc_on’ (Conditional Compilation –> CC) eine Anweisung und behandelt den Text zwischen öffnendem und schliessendem ‘@’-Zeichen als normalen Javascript-Code.
Durch diesen Sonderfall lässt sich eine schöne XMLHttpRequest-Erkennung basteln.

/*@cc_on @
    if (@_win32 && @_jscript_version >= 5)
      if (!window.XMLHttpRequest)
	 window.XMLHttpRequest = function() {
           return new  ActiveXObject('Microsoft.XMLHTTP')
         }
@end @*/

resObjekt = new XMLHttpRequest();

Durch (!window.XMLHttpRequest) wird dabei getestet, ob der XMLHttpRequest nicht schon existiert, was beim IE bis Version 6 ausgeschlossen ist. Der IE ab Version 7 kennt es dann endlich und lässt die Bedingung aus bzw. nutzt dann ebenfalls den “normalen” XMLHttpRequest.
Eine nette Geschichte, wie ich finde. Gefunden habe ich es hier: design-noir.de. Vielen Dank!
Übrigens lassen sich so auch noch weitere Konstrukte bauen.

if (/*@cc_on ! @*/ false) {
alert("Dies würde nur im IE ausgeführt werden, da bei allen anderen Browsern die Negation durch '!' nicht greift!");
}

Bei den ständigen Problemen mit den IEs für Webworker bestimmt ein interessanter Ansatzpunkt.

Im dritten Teil möchte ich Ihnen nun einen Scroll Top Link ohne Verwendung von jquery zeigen. Dies ist vor allem dann wichtig, wenn Sie sich mit der Programmierung beschäftigen und etwas hinter die Kulissen schauen wollen. Oder aber, Sie suchen lediglich eine „schlanke“ Möglichkeit für einen Scroll Top Link.

Natürlich kann ich hier nicht den Komfort bieten, wie dies ein ausgewachsenes Framework wie zum Beispiel jquery mit all seinen Funktionen ermöglicht. Aber das will ich auch gar nicht. Mein Anliegen beschränkt sich auf schlichten, funktionierenden und besonders schlanken Code, mit dem sich ein Scroll Top Link realisieren lässt (309 Byte).
Hierbei gehe ich wieder Schritt für Schritt vor, damit Sie mir auch folgen können, wenn Sie sich noch nicht so gut in der Programmierung auskennen.

1. Scroll Top Link modifizieren
Zunächst muss der Scroll Top Link in unserer Webseite modifiziert werden. Es reicht nun nicht mehr aus, diesem lediglich eine ID zuzuweisen und dann einfach über die click-Funktion von jquery zu „horchen“, ob dieser betätigt wurde. Wir erinnern uns …

...
$('a#top').click(function(){
...

Denn (richtig!), wir verwenden kein jquery mehr und müssen nun alles selber programmieren. Dazu benötigen wir zunächst einen so genannten event-Handler, mit dem auf ein Anwender-Ereignis, in unserem Fall der Klick auf den Scroll Top Link, eingegangen werden kann. Und dieser heißt, welch Zufall , onclick-Event-Handler.

(Anmerkung)

Dieses onclick-Ereigniss verbinden wir nun mit unserem Scroll Top Link:

 <a href='#' id='top' title='Nach oben' onclick='toTop()'> </a> 

Wenn nun der Benutzer auf dieses Element „klickt“, dann wird durch das onclick-Ereignis die Funktion toTop() angesprochen/ aufgerufen, die wir nun programmieren werden.

2. Scroll Top Funktion programmieren
In unserer Scroll Top Funktion müssen wir zunächst feststellen, ob sich unsere Webseite bereits am oberen Punkt oder aber weiter unten befindet. Um dies feststellen zu können, benutzen wir das pageYOffset-Objekt, welches die momentane vertikale Position unserer Seite beinhaltet. Wie immer kocht der Internet-Explorer der Redmonder sein eigenes Süppchen und dort lässt sich die vertikale Position mit document.body.scrollTop ermitteln.
Nachdem nun anhand der aktuellen Position festgestellt werden kann, ob gescrollt werden muss/ kann, kommt nun die Javascript-Funktion scrollBy() zum Einsatz.

/* Javascript-Funktion scrollBy() mit Parameter */ 
scrollBy(0, -20);

Dieser Funktion können Parameter übergeben werden, welche die Seite um eine angegebene Anzahl von Pixeln scrollen lässt. Dabei spricht der erste Parameter die x-Achse und der zweite Parameter die y-Achse unserer Webseite an.
Die x-Achse würde nun den Wert 0 erhalten, da wir ja nach oben scrollen wollen. Der y-Achse geben wir den Wert -20, so dass die Seite um 20 Pixel nach oben scrollt (sofern sie noch nicht oben angelangt ist).
Jetzt werden Sie sich eventuell fragen, warum nur 20 Pixel … ich möchte doch ganz nach oben. Das ist richtig, aber wir möchten einen Scroll-Effekt erzielen und nicht sofort oben ankommen. Dazu ist es nötig, immer wieder 20 Pixel nach oben zu scrollen, was letztendlich den Eindruck erzeugt, dass die Seite langsam nach oben gleitet. Dazu ist es wiederum nötig, dass sich die Funktion solange selber aufruft, bis das obere Ende unserer Webseite erreicht wurde. Betrachten wir dazu den nötigen Quellcode:

/*<![CDATA[*/
/* Unsere scrollTop-Funktion */
function toTop() {
/* Variable für die aktuelle Position deklarieren */
var seitenposition = 0;
/* Aktuelle Position ermitteln */
if (typeof window.pageYOffset != 'undefined') { /* Für normale Browser   ... */
   seitenposition = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined'
&& document.compatMode != 'BackCompat'){ /* ... und für den IE */
   seitenposition = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
   seitenposition = document.body.scrollTop;
}

/* Wenn sich die Seite nicht oben befindet (Seitenposition größer 0) … */
if (seitenposition > 0) {
    scrollBy(0, -20); /* ... dann scrolle um 20 Pixel nach oben  … */
    setTimeout("toTop()", 5); /* ... ‘warte’ kurz und rufe die Funktion wieder auf ! */

 }
/*]]>*/

Achten Sie bitte da drauf, dass vor pageYOffset das oberste Objekt der Objektfamilie, “window”, mit aufgeführt wird. Selfhtml.org sagt hier zwar aus, dass dieses Objekt auch weg gelassen werden darf, …

window oder self können auch weggelassen werden.

… ich kann Ihnen aber versichern, dass dies zum Beispiel auf den IE7 nicht zutrifft (Fehler: ‘pageYOffset’ ist undefiniert).
Die einzelnen Werte für den Scroll-Schritt und die Wartezeit können Sie Ihren Vorstellungen anpassen.
Damit ist unsere selbstprogrammierte scrollTop-Funktion fertig und muss nur noch als Javascript-Datei in unsere Webseite integriert werden.


Wirklich fertig? Wenn Sie sich Teil 1 und Teil 2 durchgelesen haben, dann müsste Ihnen aufgefallen sein, dass ein wichtiger Schritt noch fehlt.
Genau! Um das „springen“ vor dem animierten „nach oben gleiten“ zu unterdrücken, müssen wir noch das href-Attribut unseres Scroll Top Links entfernen.
Hierfür bedarf es einer weiteren Funktion:

/*  Nodes/Attribute entfernen */
function removeAttribute() {
/* Wenn der ScrollTop Link vorhanden ist (HTML-Elementzugriff über id-Attribut) ... */
  if(document.getElementById('top')){
      /* ... dann speichere den Rückgabewert (Element-Objekt) in der Variablen d ... */
      var d = document.getElementById('top');
      /* ... schaue nach, ob das href-Attribute (bzw. das Attributknoten-Objekt) vorhanden ist ... */
      if(d.getAttributeNode('href')){
           /*  ... und wenn ja, speichere wiederum den Rückgabewert (des Attributknoten-Objekts) in der Variablen href … */
           var href = d.getAttributeNode('href');
           /* ... und entferne diesen Attributknoten von unserem Scroll Top Link (Element-Objekt) */
           d.removeAttributeNode(href);
      }
   }
}
/* Diese Funktion wird automatisch aufgerufen, sobald die gesamte Seite vollständig geladen wurde (window.onload)! */

window.onload=removeAttribute;

Durch diese Funktion wird über das DOM (Document Object Model) gezielt auf das href-Attribut unseres Scroll Top Links zugegriffen und dieses letztendlich entfernt ( … oder vielleicht besser gesagt, aus dem DOM-Baum ausgehängt. Denn im Quelltext ist es weiterhin vorhanden …).
Hier genauer auf das Document Object Model einzugehen, würde den Rahmen dieses Tutorials sprengen.

(Ich möchte sofort eine kurze und einfache Erklärung)

Dennoch möchte ich Ihnen eine kurze und einfache Erklärung liefern .
Betrachten Sie Ihre Webseite als einen Baum mit Stamm, den Ästen, den Blättern …!
Der Baum als Gesamtbild entspricht dabei dem obersten Objekt, dem window (das gesamte Browserfenster). Innerhalb unserer removeAttribut-Funktion könnte man das window-Objekt noch mit aufführen:

      var d = window.document.getElementById('scrolltop');

Dies ist aber an dieser Stelle nicht notwendig und kann weggelassen werden, da hier direkt das document-Objekt folgt. Dieses Ausgangsobjekt unseres Element-Baumes entspricht dem Stamm (Inhalt des Browserfensters), über den alle folgenden (HTML-) Elemente erreicht werden können.
Die einzelnen Elemente, Attribute und Eigenschaften einer Webseite können nun über entsprechende Funktionen (Methoden) angesprochen und verändert werden. Auf unser Baum-Beispiel bezogen würde das folgendermaßen aussehen:
Über unser Gesamtbild des Baumes (window) kann über den Stamm (document) und über die Äste (HTML-Elemente wie a, p, div, span, …) auf deren Blätter (href, title, alt, style, …) zugegriffen werden. Hierzu existieren verschieden Wege, um dies zu bewerkstelligen. Es kann über den Namen …

 ... name=’scrolltop’ ...
... document.getElementsByName(’scrolltop’)[0] ...

… die ID …

... id=’scrolltop’ ...
... document.getElementByID(’scrolltop’) ...

… oder eine Klasse …

... class=’scrolltop’ ...
... document.getElementsByClassName(’scrolltop’) ...

… in Verbindung mit dem so genannten Knotenpunkt …

... getAttributeNode('href') ...

… ein bestimmter Teil eines Elementes angesprochen werden.
Dazu „hangeln“ Sie sich praktisch von oben nach unten durch. Dafür ist es natürlich notwendig, die bereitstehenden Funktionen (Methoden) zu kennen. Sollte Ihr Interesse geweckt sein, dann finden Sie unter Javascript/DOM umfangreiche Informationen.

Aber anstatt das href-Attribut zu entfernen, gibt es noch eine einfachere Lösung. Und zwar indem wir unserem Scroll Top Link nach dem Aufruf der toTop-Funktion ein return false; anhängen.

 <a href='#' id='top' title='Nach oben' onclick='toTop(); return false';> </a> 

Dadurch wird das href-Attribut nicht mehr ausgeführt.
Es reicht also aus, unsere toTop-Funktion, wie schon in Scroll Top Link Teil1 beschrieben wurde, entweder direkt (CDATA nicht vergessen) oder als externe Javascript-Datei in den Header unserer Webseite einzufügen.
Nun haben sie drei Möglichkeiten, Ihre Webseite um einen Scroll Top Link zu erweitern.
Ich hoffe, dass Sie mir auf Grund der vielen Umwege nicht böse sind. Aber so erhalten Sie einen tieferen Einblick in das Thema.
Falls Ihnen die Tutorials Spaß bereitet haben und verständlich waren, würde ich mich über ein kurzes Feedback freuen.

Wie angekündigt nun der Scroll Top Link mit der jQuery.scrollTo-Funktion von Ariel Flesler (… hier noch mal die Demo-Seite) .

Hierzu laden wir uns zunächst die neueste Version (momentan scrollTo-1.4.2) besagter scrollTop-Funktion herunter.
Dann entpacken wir die gezippte Datei in einen beliebigen vorher erstellten Order auf unserem PC und schieben die nun verfügbare Javascript-Datei auf unseren Webspace. Bei lokal installiertem Webserver in das entsprechende Verzeichnis auf unserem Rechner … zum Beispiel beim xampp in “c:/xampp/htdocs/…/scrollto-1.4.2-min.js“.
Anschließend folgt fast die gleiche Prozedur, die schon im ersten Teil beschrieben wurde. Unter der bereits eingefügten jquery.js im Head-Bereich Ihrer Webseite binden wir zunächst die soeben heruntergeladene scrollTo.js ein.

<html>
<head>
<title>Scroll Top Link</title>
<!-- jquery.js -->
<script src=‘http://code.jquery.com/jquery-latest.js‘ type=‘text/javascript‘></script>

<!-- ... und die scrollTo.js -->
<script src=‘http://ihre_domain.de/wp-content/themes/ihr_theme/js/jquery.scrollTo-1.4.2-min.js‘ type=‘text/javascript‘></script>
</head>
<body>
…

Anschließend öffnen wir wieder einen Editor unserer Wahl und erstellen eine Datei mit folgendem Inhalt:

/*<![CDATA[*/
/* ###### Unsere Scroll Top Funktion ###### */
/* Sobald die Webseite fertig geladen wurde ... */
$(document).ready(function(){
   /* ... und der Scroll Top Link angeklickt wird ... */
   $('a#top').click(function(event){
        /* ... unterdrücke die normale Funktion des a-Tags  ... */
        event.preventDefault();
        /* ... und scrolle nach oben! */
        $.scrollTo( 0, 4000);
        /* ... hier wird jetzt anstatt der animate-Funktion
            aus dem ersten Teil die scrollTo-Funktion eingefügt */
   });
});
/*]]>*/

Diese speichern Sie dann wieder, wie in Teil 1 beschrieben, unter einem beliebigen Namen ab und ermöglichen den Zugriff, in dem Sie diese wiederum in Head-Bereich einbinden.

(Hinweis)

 /* ### MEINE JAVASCRIPT FUNKTIONEN ### */
 /* --- SCROLLTO --- */
$(document).ready(function(){
   $('a#top').click(function(event){
        event.preventDefault();
        $.scrollTo( 0, 4000);
   });
});
 /* --- SCROLLTO ENDE --- */

 /* --- WEITERE FUNKTION --- */
…
 /* --- WEITERE FUNKTION ENDE --- */

Wenn Sie den ersten Teil gelesen haben, dann werden Sie spätestens jetzt gemerkt haben, dass kein großer Unterschied zu diesem Scroll Top Link besteht. Nur dass bei diesem noch eine weitere Javascript-Datei herunter geladen und eingebunden werden muss.
Allerdings bietet die hier eingebundene scrollTo.js noch weitere Möglichkeiten zum animierten Scrollen, wie auf der Demo-Seite ersichtlich ist (hierfür ist die vollständige 8 KB-Version nötig).


Aber so schön diese auch anzusehen sind … mir ist der Sinn noch nicht so ganz klar geworden ist. Ein Einsatz wäre für mich eventuell bei einer Bildergallerie nützlich, um über ein Menü ein bestimmtes Bild anzusteuern.
Ein Unterschied besteht aber: Diese Scroll-Funktion passt sich der Seitenlänge an, wie ich beobachten konnte. Bei kurzen Seiten mit wenig Text wird langsamer gescrollt als bei längeren Seiten mit mehr Textinhalt, obwohl wie bei der animate-Funktion die Scroll-Geschwindigkeit festgelegt wurde.
Ich setze auf dieser Seite die hier vorgestellte Version ein, allerdings lässt sich die animate-Funktion mindestens genauso gut anpassen. Hierzu müssten lediglich einzelne animate-Funktionen gekoppelt werden. Die erste scrollt schnell bis zu einer vorgegebenen Stelle, zum Beispiel 300 Pixel unter dem oberen Rand. Anschließend folgt eine weitere animate-Funktion und scrollt etwas langsamer bis 200 Pixel unter dem oberen Rand usw.!

 /* Angepasstes Scrollen */
...
 $('html, body') .animate({scrollTop:300}, 2000).animate({scrollTop:200}, 2300).animate({scrollTop:100}, 2600).animate({scrollTop:0}, 3000);
...

Je näher ich mir das momentan anschaue, umso mehr gelange ich zu der Einsicht, nur noch die animate-Funktion einzusetzen und meinen Bedürfnissen anzupassen (wie dies bereits beim Videomodus geschehen ist).
Entscheiden Sie für sich selber, welche Möglichkeit Sie nutzen möchten!

Im folgenden dritten Teil zeige ich noch eine komplett eigenständig programmierte Version… ohne jquery und ohne die hier vorgestellte scrollTop.js!
Da ich persönlich noch weitere auf jquery basierende Funktionen auf meiner Seite implementiert habe, kommt dies für mich nicht in Betracht. Aber ich denke, dass der eine oder andere, der nur wenig Javascript auf seiner Seite einsetzt, seinen Nutzen daraus ziehen kann. Zudem lassen sich so einige KB sparen …!

Scroll Top Link (Teil 3)

Nachdem wir nun in der Einleitung zu diesem Tutorial das jquery-Framework eingebunden haben, erstellen wir als nächstes eine eigene Scroll Top Funktion, die auf der jquery-Funktion animate aufbaut.

Dazu öffnen wir zunächst eine neue Datei in einem Editor (zum Beispiel Notepad++) und kopieren folgenden Quellcode hinein:

/*<![CDATA[*/
/* ###### Unsere Scroll Top Funktion ###### */

/* Sobald die Webseite fertig geladen wurde ... */
$(document).ready(function(){
   /* ... und der Scroll Top Link angeklickt wird ... */
   $('a#top').click(function(){
        /* ... entferne das href-Attribut ... */
        $(this).removeAttr('href');
        /* ... und scrolle nach oben! */
        $('html, body').animate({scrollTop:0},'slow')
   });
});
/*]]>*/

Der Quelltext dürfte sich durch die eingefügten Kommentare selbst erklären.
Das href-Attribut wird durch die removeAttr-Funktion entfernt, da die Seite sonst beim Betätigen des Scroll Top Links erst zum Top der Webseite springen würde, um dann anschließend (wieder unten beginnend) animiert nach oben zu scrollen. Sollte Javascript deaktiviert sein, wird das href-Attribut nicht entfernt und der Scroll Top Link funktioniert ebenfalls (ohne Animation) … sehr schön!

Anstatt das href-Attribut zu entfernen, kann man auch ein Klick-Ereignis anhängen.

Mit event.preventDefault() verhindert man die standardmäßige DOM-Ereignisaktion. Bei einem <a>-Tag mit href wäre das der normale Link Effekt, also das Weiterleiten zu einer anderen Seite.

/*<![CDATA[*/
/* ###### Unsere Scroll Top Funktion ###### */
/* Sobald die Webseite fertig geladen wurde ... */
$(document).ready(function(){
   /* ... und der Scroll Top Link angeklickt wird ... */
   $('a#top').click(function(event){
        /* ... unterdrücke die normale Funktion des a-Tags  ... */
        event.preventDefault();
        /* ... und scrolle nach oben! */
        $('html, body').animate({scrollTop:0},'slow')
   });
});
/*]]>*/

Sie sehen, in der Programmierung führen viele Wege nach Rom.

Übrigens, den Wert ’slow’ der animate-Funktion können Sie neben ‘middle’ oder ‘fast’ auch durch einen Zahlenwert ohne Hochkomma (Millisekunden, z.B. 5000) ersetzen und so die Scroll-Geschwindkeit Ihren Vorstellungen anpassen.

Diese Datei speichern Sie nun zum Beispiel als scrolltop.js ab und fügen diese ebenfalls in den Header Ihrer Seite unter der jquery.js ein (…).
Es besteht auch die Möglichkeit, den Quelltext direkt in den Head-Bereich einzufügen.

<html>
<head>
<title>Scroll Top Link</title>
<!-- jquery  -->
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
<!-- ScrollTop-Funktion -->
<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function(){
   $('a#top').click(function(){
        $(this).removeAttr('href');
        $('html, body'').animate({scrollTop:0},'slow')
   });
});
/*]]>*/
</script>
</head>
<body>
...

Das kann jedoch schnell unübersichtlich werden. Daher ist es anzuraten, alle Javascript-Dateien in einem eigenen Ordner unterzubringen.
Beachten Sie hierbei bitte, den Quellcode mit CDATA zu verpacken. Dem Validator wird dadurch mitgeteilt, dass es sich im CDATA-Tag um Text (Character Data) handelt, welcher nicht als XHTML anzusehen ist. Ältere Browser verstehen diesen Tag nicht, daher wird er einfach auskommentiert, was für den Validator wiederum keine Bedeutung hat.

Damit ist die erste Möglichkeit, einen animierten Scroll Top Link in die eigene Webseite einzufügen, abgeschlossen.
Noch mal die einzelnen Schritte:

• Den Scroll Top Link wie in der Einleitung im Fußbereich oder unter dem Inhalt platzieren
• Das jquery-Framework im Header der Webseite integrieren
• Unter vorigem Framework die erstellte ScrollTop-Funktion einfügen

Zum Schluss fügen Sie in Ihre CSS-Datei noch folgende Formatierung für unseren Scroll Top Link ein:

#top {
  cursor:pointer;
  margin:0;
  padding:3px;
  position:absolute;
  bottom:0;
  left:310px;
        /*oder 'right' , je nachdem, was Sie bevorzugen*/
 }

Die Werte für left oder right können Sie Ihren Bedürfnissen anpassen. Probieren Sie einfach selber etwas herum.
An dieser Stelle möchte ich noch erwähnen, das die animate-Funktion sehr viel mächtiger ist und es ermöglich, mehrere Eigenschaften auf einmal zu ändern (Sichtbarkeit, Rahmen, Farbe …). Der Bereich für die Einstellungen oder der Video-Modus auf dieser Seite sind ein gutes Beispiel dafür (nur verfügbar im IE8, Firefox und Opera bei aktiviertem Javascript!).

(Bei mir funktioniert es nicht!)

Scroll Top Link (Teil 2)

In diesem Tutorial möchte ich erklären, wie ein Scroll Top Link in die Webseite integriert werden kann.

Ein Scroll Top Link ermöglich es den Besuchern, nachdem sie die Seite fertig gelesen haben, bequem an den Seitenanfang zurück zu gelangen, ohne den Scrollbalken (oder die Nach-Oben-Taste) benutzen zu müssen. Dies gehört zum Usability und sollte auf keiner Seite fehlen, die viel Content und somit lange Seiten enthält. Dadurch wird dem Benutzer das Durchforsten der Webseite erleichert.

Dies kann auf 2 Arten realisiert werden. Bei der ersten springt die Seite direkt zum Anfang (Top) der Seite. Bei der zweiten Variante erfolgt dies animiert durch Javascript, dabei scrollt bzw. gleitet die Seite bis nach oben. Letzteres sieht elegant (smooth) aus und wird ihnen gefallen. Es erfordert jedoch aktiviertes Javascript im Browser.
Der Scroll Top Link in diesem Tutorial beinhaltet beide Möglichkeiten, funktioniert also mit (animiert ) wie auch ohne Javascript. Javascript-Funtionalitäten sollten stets eine Alternative bieten. Vor allem dann, wenn grundsätzliche Dinge wie zum Beispiel das Menü damit realisiert werden.

Da sich der Scroll-Top Link im unteren Bereich der Webseite befindet, bietet es sich an, diesen im Footer zu platzieren. Unter Wordpress wäre dieser in der (/wp-content/theme/dein_theme/) footer.php zu finden. Da in meiner Seite der Footer sehr schmall ist, habe ich den Scroll Top Link in der index.php nach den Loop gesetzt (… unter den Textbereich). Es besteht aber auch die Möglichkeit, den Link ständig im Blickwinkel (position:fixed) anzuzeigen. Dieser kann zum Beispiel automatisch eingeblendet werden, sobald der Benutzer beginnt nach unten zu scrollen.

Ob man sich für ersteres oder letzteres entscheidet, wird letztendlich durch die Zuweisungen im (Cascading) Stylesheet definiert. Dafür wird dem Link eine ID zugewiesen, über die er angesprochen werden kann.

<html>
<head>
<title>Scroll Top Link</title>
 </head>
<body>
<div id=“container“ >
	<div id=“header“>...</div>
	<div id=“navi“>...</div >
	<div id=“content“>...</div >
	<div id=“footer“>
        <a href=“#“ id=“top“ title=“Nach oben“ > </a> 
	</div>
</div>
</body>
</html>

Der so eingefügte Scroll Top Link wäre in dieser Variante bereits voll funktionsfähig. Es fehlt lediglich noch der Text (Nach oben) oder aber eine Grafik. Ein Beispiel dafür sieht man unten auf dieser Seite.
Im Internet finden sich teilweise Anleitungen, bei denen ein Anker im Header der Seite platziert wird:

<a name=“top“> </a>

Dieser wird dann über den Scroll Top Link angesprochen/ aufgerufen, um nach oben zu gelangen:

… <a href=“#top“ title=“Nach oben“ > </a> …

Oder der Header wird über die ID angeprochen:

… <a href=“#header“ title=“Nach oben“ > </a>  …

Eine weitere Lösung implementiert Javascript direkt im href-Attribut des a-Tags:

… <a href=“javascript:scroll(0,0)“ title=“Nach oben“ > </a> …

Welche Möglichkeit eingesetzt wird ist Geschmacksache. Die hier gezeigte Variante über href=“#“ ist wohl die einfachste. Letztere funktioniert nur bei aktiviertem Javascript und sollte vermieden werden.

Kommen wir nun nun zu unserer animierten Scroll Top Funktion.
Um diese zu realisieren, besteht die Möglichkeit, selbstständig etwas in Javascript zu programmieren oder aber ein Javascript-Framework einzusetzen. Neben Mootools, Script.aculo.us, Prototype, Dojo und anderen verweise ich hier auf jquery.

Dieses schlanke Framework hat sich etabliert und bietet eine große Anzahl unterschiedlichster Funktionen, um eine Webseite ansprechend gestalten zu können.
Um jquery nutzen zu können, muss das Framework zunächst in die Webseite integriert werden. Ich werde dies Schritt für Schritt erklären, damit auch Nutzer mit weniger oder keinen Kenntnissen zum Ziel gelangen.
Für den einfachen Weg binden Sie jquery direkt über die Herstellerseite von jquery oder über googleapis im Header Ihrer Seite ein:

<html>
<head>
<title>Scroll Top Link</title>
<!-- jquery Herstellerseite -->
<script src=‘http://code.jquery.com/jquery-latest.js‘ type=‘text/javascript‘></script>

<!-- ... oder googleapis -->
<script src=‘http://ajax.googleapis.com/ajax/lips/jquery/1.3.2/jquery.min.js‘ type=‘text/javascript‘></script>
</head>
<body>
…

Für welche Quelle man sich dabei entscheidet ist wurscht. Ich bevorzuge die dritte Möglichkeit, in dem man sich die neueste jquery-Version von der Webseite des Herstellers herunterladet und in einem Ordner auf seinem eigenen Webspace entpackt. Diese bindet man anschließend wie eine von den beiden erstgenannten Möglichkeiten im Header der eigenen Webseite ein:

<!-- Lokal vorliegende jquery-Version einbinden -->
<script src=‘http://meinedomain.de/pfad_zum_ordner/jquery-min.js‘ type=‘text/javascript‘></script>

So fühle ich mich einfach wohler, zumal die Dateigröße von jquery nicht ins Gewicht fällt. Für Unerfahrene ist die Einbindung über eine der beiden erstgenannten Wege eventuell empfehlenswerter, da unproblematischer.
Nachdem das Framework nun verfügbar ist, stehen uns mehrere Möglichkeiten für das ScrollTop-Ereignis zur Verfügung

• Wir verwenden die schon vorhandene Animate-Funktion in Verbindung mit der scrollTop-Eigenschaft und schreiben uns eine eigene Funktion
• Wir verwenden jQuery.ScrollTo von Ariel Flesler (Demo)
• Wir verwenden kein Framework und programmieren uns unsere eigene ScrollTop-Funktion

Ich werde auf alle drei Möglichkeiten eingehen … allerdings zeigt die Uhr gerade 01:11 Uhr an und es wird Zeit ins Bett zu gehen. Ich wünsche eine gute Nacht, morgen geht es weiter!

Scroll Top Link (Teil 1)