HTML, CSS, Javascript & PHP Tipps & Tricks fürs Webdesign

10.09.2012

Wir geben Ihnen nützliche Tipps und hilfreiche Tricks fürs Webdesign mit HTML, CSS Javascript und Co.

jQuery: Entfernung berechnen

Um die aktuelle Entfernung des Mauszeigers von einem Seitenelement dynamisch zu berechnen, können Sie jQuery einspannen. Ausgehend von dem folgenden Markup

<p>Bitte bewegen Sie die Maus.</p> <p id="entfernung">Die Entfernung des Mauszeigers von der Mitte des Rechtecks beträgt: <span>0</span>px</p> <div id="element"></div>

können Sie die betreffenden Elemente wie folgt darstellen und selektieren:

body { font: 11px helvetica, arial, sans-serif; text-align: center; } #entfernung { font-size: 16px; font-weight: bold; margin-top: 10px; } #element { background: #000; color: #fff; height: 10px; left: 50%; margin: -25px 0 0 -25px; position: absolute; top: 50%; width: 10px; }

Die ganze Arbeit erledigt jQuery mittels

Google Maps API , HTML: Interaktive Anfahrtsskizze

Wer auf der Website eine Anfahrtsskizze anbringt, kann den Besuchern auch gleich mit einer interaktiven Wegbeschreibung unter die Arme greifen. Diese kann den Startpunkt der Reise sowie lokale Gegebenheiten wie die Verfügbarkeit von Infrastruktur berücksichtigen. Das geht am einfachsten mit Google Maps, zum Beispiel so:

<form action="http://maps.google.de/maps" method="get" target="_blank"> <label for="saddr">Tragen Sie bitte Ihren Standort ein:</ label> <input type="text" name="saddr" /> <input type="hidden" name="daddr" value="WEKA MEDIA GmbH & Co. KG, Römerstraße 4, D-86438 Kissing" /> <input type="submit" value="Optimale Anfahrt und Benzin kosten berechnen!" /> </form>

Der Besucher bekommt dank des Formulars die Möglichkeit, den Startpunkt seiner Reise im Eingabefeld festzulegen ("saddr"). Dieser Standort kann daher von der aktuellen Geo- position des Besuchers abweichen. Die Zieladresse ist im unsichtbaren Formularelement codiert ("daddr"). Beim Abschicken des Formulars wird der Besucher auf eine Karte in Google Maps umgelenkt, wo für ihn inzwischen die optimale Anfahrt und die voraussichtlich anfallenden Benzinkosten berechnet wurden.

PHP: E-Mail-Adresse überprüfen

Das Validieren von E-Mail-Adressen bereitet vielen Webentwicklern echtes Kopfzerbrechen. Und nicht nur ihnen: Benutzer ungewöhnlicher E-Mail-Adressen werden durch fehlerhaft programmierte Skripte oft völlig unnötig abgewiesen.

Nicht allen Entwicklern von Validierungsskripten ist es zum Beispiel bewusst, dass der lokale Teil einer gültigen E-Mail-Adresse (also alles vor dem @-Zeichen) unter bestimmten Bedingungen unter anderem einen Apostrophen, ein Plus-, ein Ausrufe- und/oder ein Fragezeichen beinhalten kann.

Dennoch werden solche E-Mail-Adressen durch Validierungsskripte selten akzeptiert. Abhilfe schafft ein PHP-Filter, zum Beispiel so:

<?php if(isset($_POST['email'])){ $email = $_POST['email']; if(filter_var($email, FILTER_VALIDATE_EMAIL)){ echo '<p>Diese E-Mail-Adresse scheint gültig zu sein.<p>'; } else{ echo '<p>Die eingegebene E-Mail-Adresse scheint ungültig zu sein. Bitte überprüfen Sie Ihre Eingabe.</p>'; } } ?> <form action="" method="post"> Email: <input type="text" name="email" value="<?php echo $_POST['email']; ?>"> <input type="submit" value="E-Mail-Adresse validieren"> </form>

Bis PHP 5.3.3 (in PHP 5.3) und PHP 5.2.14 (in PHP 5.2) akzeptierte der Filter allerdings E-Mail-Adressen in der Form benutzername@test. Dieser Fehler wurde inzwischen behoben. Die Einführung neuer internationaler Domains dürfte die Validierung sicherlich noch weiter erschweren.

jQuery: Dynamische Zeitleistendiagramme

Wer ein Zeitleistendiagramm im Stil von Google Analytics auf seiner Website präsentieren möchte, kann dieses mit dem jQuery-Plug-in Morris.js dynamisch erzeugen. Das Plug-in ist unter der Adresse verfügbar. Das Plug-in setzt jQuery ab Version 1.7 und die Bibliothek Raphaël ab Version 2.0 voraus. Unterstützt werden neben Safari, Chrome und Firefox auch mobiles Safari auf iOS ab Version 3, mobiles Chrome auf Android OS ab Version 3 und Internet Explorer ab Version 6.

Tipps-Newsletter bestellen

Autor/en: Anna Kobylinska, Filipe Pereira Martins Quelle: internetmagazin