HTML, CSS, Javascript & PHP

Tipps & Tricks fürs Webdesign

10.9.2012 von Anna Kobylinska und Filipe Pereira Martins

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

ca. 3:05 Min
Ratgeber
VG Wort Pixel
Tipps & Tricks fürs Webdesign
Tipps zur Menügestaltung mit CSS
© CG - Fotolia.com

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

(function() { var mX, mY, entfernung, $entfernung = $('#entfernung span'), $element = $('#element'); function berechneEntfernung(elem, mouseX, mouseY) { return Math.floor(Math.sqrt(Math.pow(mouseX - (elem. offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2))); } $(document).mousemove(function(e) { mX = e.pageX; mY = e.pageY; entfernung = berechneEntfernung($element, mX, mY); $entfernung.text(entfernung); }); })();

 

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 Raphael 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.

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, apple, safari, web-apps, ios, remote debugging, tipps, tricks

Tipps & Tricks

Remote Debugging mit Safari Web Inspector

Wie Sie mit dem Safari-Browser schnell Webseiten und Web-Apps auf iOS debuggen können, zeigen wir Ihnen.

internet, webdesign, responsive webdesign, Performance, optimierung

Responsives Webdesign

Mehr Performance fürs Responsive Webdesign

Trotz aller Verzüge gibt es auch einen Schwachpunkt beim Responsive Webdesign: Die Performance ist oft schlecht, da dieselben Ressourcen für…

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.