Aus- und Einblenden der Standardwerte

Wie in diesem Bild dargestellt sollte das Ergebnis aussehen. Im inaktiven Status sollte »Dein Name« im Feld stehen, und die Besucher ermutigen ebendiesen in das Feld zu tippen. Klickt die Besucherin dann auf das Feld, soll »Dein Name« verschwinden und der Weg zur Eingabe ihres Namens frei sein. Dieser Effekt wird normalerweise mit »onfocus« einem Bindeglied, das xhtml und Javascript verbindet, umgesetzt. Im Adminbereich des Plugins kann zwar ein Standardwert vergeben werden, Event-Handler jedoch funktionieren nicht, und es gibt auch keine Auswahlbox für diesen Effekt. Will man verhindern, dass die Besucher den Standardwert selbst entfernen müssen um Platz für ihre Angaben zu bekommen, muss eine Lösung gefunden werden.

Da auch an anderen Stellen der Seite jQuery zum Einsatz kam, entschied ich mich zu einer Lösung mit Hilfe dieser Javascript-Bibiliothek. Im Weblog von Matthias Schütz fand ich ein Tutorial, in dem er eine Lösung für das umschriebene Problem erklärte.

Da ich neben den input-Feldern (bspw. Name, E-Mail und Betreff) auch das textarea-Feld (das Eingabefeld für die eigentliche Nachricht) ansprechen wollte, den Button zum abschicken der Nachricht, der auch ein input-Feld ist, jedoch unberührt lassen musste, entschied ich mich dazu, den Feldern, die ich ansprechen wollte eine Klasse zu geben, in meinem Fall »eingabe«. Darauf hin passte ich den Code so an, dass alle Felder innerhalb des Kontaktformulares mit der Klasse »eingabe« angesprochen werden. Schließlich wollte ich auch, dass wenn ein Besucher seinen Namen wieder löscht, der Standardwert wieder erscheint. Dafür existiert der Event-Handler »onblur« und eine jQuery Anweisung ».blur«. Folgender jQuery-Code führt schließlich zum gewünschten Ergebnis:

→ jQuery Code als Text ein-/ausblenden

jQuery('.wpcf7-form .eingabe').each(function() {
    var wert = jQuery(this).val();
        jQuery(this)
            .focus(function(){
                if (jQuery(this).val() == wert) {
                    jQuery(this).val("");
                }
            })
            .blur(function(){
                if (jQuery(this).val() == "") {
                    jQuery(this).val(wert);
                }
            })
});

Wird in einer Seite sowieso jQuery verwendet, kann durch das Einfügen dieses Codes und das Vergeben einer entsprechenden Klasse, der gewünschte Umgang mit Standardwerten im Contact Form 7 Plugin erziehlt werden.

Heute habe ich ein Projekt hier eingeflegt das bereits seit einer ganzen Weile im Netz ist und über das ich mich sehr freue. Bei dem Projekt handelt es sich um die Webseite der MakeUp-Artistin Gabriele Kotecki die unter dem Namen ZIMT * makeup die Welt verschönert.

Ein paar Infos zum Projekt finden sich hier. Einen Besuch der Webseite solltest du dir auf keinen Fall entgehen lassen: ZIMT * makeup.

jQuery: The Write Less, Do More, JavaScript Library.

Das jQuery-Motto gefällt mir sehr gut und ich stimme gerne in den Chor derer ein, die diese Bibliothek und die Einfachheit des Programmierens loben. Schöne Effekte lassen sich mit jQuery recht einfach umsetzen und tragen meiner Ansicht nach zur Übersichtlichkeit und Benutzbarkeit einer Webseite bei.

WordPress hat schon seit einiger Zeit auf diese schlanke JavaScript Bibliothek umgestellt. Dennoch kann es beim Einsatz von jQuery unter WordPress zu Schwierigkeiten kommen, da die Interpretation der kurzen Schreibweise der jQuery-Funktion: $ auch von prototype verwendet wird. Diese Schwierigkeit kann jedoch recht einfach durch eine geänderte Schreibweise umgangen werden. Da $() lediglich als Abkürzung für jQuery() verwendet wird, kann dies auch wieder rückgängig gemacht werden. Es gibt auch andere Wege diese Schwierigkeit zu umgehen, doch gerade für kleine jQuery-Skripte scheint mir dieses Vorgehen äußerst sinnvoll.

Desweiteren gefällt mir an jQuery dass „unter der Haube“ semantisches MarkUp steckt und der gesamte Inhalt auch bei abgeschaltetem JavaScript zu sehen ist und so einfach zugänglich bleibt.

Was sind eure Erfahrungen mit jQuery?