Kategorie: jQuery

Windows 8 Design mit CSS3 und jQuery nachbauen

Nach gefühlten 100 Jahren mal wieder ein Artikel von mir über das Thema Web-Design. Bei Google+ hat Sergej heute einen Link gepostet, den ich sehr interessant fand: „Windows 8 Animations„.

Wie der Name schon sagt geht es um die neue Windows 8 Oberfläche und wie man diese mit HTML5, CSS3 und JavaScript bzw. jQuery realisieren kann. Neben dem ausführlichen Tutorial ist auch ein Demo vorhanden, welche das beeindruckende Ergebnis zeigt. Die Demo läuft in aktuellen Versionen von Firefox, Opera, Chrome und Safari. Ebenso im Internet Explorer 10.

Zum Tutorial „Windows 8 Animations“

Vector Maps – SVG-Karten mit jQuery

Interaktive Karten auf Webseiten sind ein toller Blickfang und können für verschiedene Zwecke eingesetzt werden. Mit modernen Webtechnologien lassen sich mittlerweile vektorisierte Land- oder Weltkarten realisieren, komplett ohne Flash. Stattdessen kommt bei den beiden jQuery-Plugins jQuery Vector Maps und jVectorMap SVG und JavaScript zum Einsatz.

Die Plugins werden von Firefox, Chrome, Opera, Safari und IE9 unterstützt. jQuery Vector Maps ist dabei eine modifizierte Version von jVectorMap, mit einigen Veränderungen und neuen Funktionen. Beide Plugins bieten auf ihrer Homepage eine ausführliche Dokumentation und einige Beispielkarten an. So ist es unter anderem möglich, eigene Karten zu erstellen oder die Farben anzupassen.

jVectorMap – Weltkarte

IE cached AJAX-Requests

Beim Test eines AJAX-Requests ist mir aufgefallen, dass dieser im IE nicht immer funktionierte. Nach kurzer Fehlersuche habe ich herausgefunden, dass der Internet Explorer AJAX-Requests ziemlich aggressiv cached. Bei jQuery gibt es die Möglichkeit das Caching für den AJAX-Aufruf explizit zu deaktivieren:

$.ajax({
    url: "ajax.php",
    type: "GET",
    data: ({id : this.getAttribute('id')}),
    cache: false
}

Kategorien: Coding jQuery

Funken-Effekt mit jQuery und rf.Sparks

Matt Kirman hat ein jQuery-Plugin geschrieben, welches eine Art Funken-Effekt erzeugt. Das Plugin erstellt eine Reihe von DIVs mit Bildern darin, die anschließend animiert werden und sich dementsprechend bewegen.

Alles was man dazu benötigt ist jQuery und das rf.Sparks Plugin, welches man bei GitHub in der aktuellen Version vorfinden kann.

(mehr …)

Kategorien: Coding jQuery Tutorials

E-Mail-Adressen mit jQuery schützen

Immer mehr Bots durchsuchen das Internet nach E-Mail-Adressen. Möchte man beispielsweise im Impressum seine Adresse hinterlegen, sollte man sie schützen bzw. tarnen, sodass Bots nichts damit anfangen können.

Es existieren viele Möglichkeiten seine E-Mail-Adresse zu schützen, doch alle haben Nachteile:

  1. Methoden sind nicht effizient (Unicode, HEX)
  2. Benutzerfreundlichkeit bleibt auf der Strecke (Bild, Nutzung von Phrasen wie PUNKT)
  3. Nicht für alle Browser geeignet (CSS-Techniken)

Mittlerweile setzt fast jede Homepage Javascript voraus und es sollte nicht mehr viele Leute geben, die Javascript generell deaktiviert haben. Diese Eigenschaft kann man sich zunutze machen und seine E-Mail-Adressen per Javascript schützen. Für den minimalen Anteil mit deaktiviertem Javascript kann man noch eine Ausweichlösung einbauen.


Als erstes benötigen wir den HTML-Code:

<a class="email" rel="tobi/antary.de" href="#"></a>;
<noscript>tobi (AT) antary (PUNKT) de</noscript>

Falls Javascript deaktiviert ist, erscheint „tobi (AT) antary (PUNKT) de“.

Anschließend wird jQuery eingebunden und das erforderliche Javascript ausgeführt:

<script type="text/javascript" src="/PfadZu/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function() {

		// E-Mail Adresse anzeigen
		$('a.email').each(function() {
			e = this.rel.replace('/','@');
			this.href = 'mailto:' + e;
			$(this).text(e);
		});

	});
</script>

jQuery sucht nach allen Links mit der Klasse „email“. Nun wird bei jedem dieser Links das „rel-Attribut“ geparst und der „Slash“ durch ein „At-Zeichen“ ersetzt. Anschließend wird das „href-Attribut“ mit dem korrekten E-Mail-Link versehen und die Adresse als Linkname eingefügt.

Kategorien: Coding jQuery Tutorials