HTML, CSS, Javascript & PHP

Tipps & Tricks fürs Webdesign

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

Tipps & Tricks fürs Webdesign

© CG - Fotolia.com

Tipps zur Menügestaltung mit CSS

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 überprü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 zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…