jQuery HowTo: Traversing

Travesieren gehört zum grundlegenden Handwerkszeug, wenn man fortgeschrittene Animationen mittels jQuery durchführen möchte. Hier ein kleine Anleitung zum Auffinden bestimmter Elemente.

Was passiert hier? Basis ist diese HTML Struktur:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div id="someParent" style="border: 1px dotted #ccc">Parent
<div>
 Child1
</div>
<div class="move">
 Child2
</div>
<div>
 Child3
</div>
<div class="move not">
 Child4
</div>
</div>
 
<div id="someWrapper">
<a  id="testone" href="#">Move all</a>
<a id="testtwo" href="#">Move filtered</a>
</div>

Folgender Javascript-Code führt die Animation aus. Ausgehend von dem Link wird mit den Methoden parent das div “someWrapper” selektiert, prev wählt das vorige Element mit der id “someParent” und schlussendlich werden mit children alle Elemente innerhalb von “someParent” selektiert.
Die id’s im Beispiel dienen nur der Veranschaulichung. Die zu animierenden Elemente werden ausschließlich über die Struktur des DOM gefunden.

jQuery Code für “Move all”:

1
2
3
4

jQuery("#testone").click(function () {
    jQuery(this).parent().prev().children().animate({'paddingLeft':'20px'},200);
     return false;
});

Nun zur fortgeschrittenen Variante. Basis dafür sind die jQuery Funktion, filter und not.
jQuery Code für “Move filtered”:

1
2
3
4

jQuery("#testtwo").click(function () {
   jQuery(this).parent().prev().children().filter(".move").not(".not").animate({'paddingLeft':'20px'},200);
    return false;
});

jQuery myPass – password hiding iPhone-Style

About

Neulich abend saß ich auf dem Sofa und wollte mich über mein iPhone bei Facebook anmelden, bei der Eingabe meines Passwortes fiel mir wieder dieses kleine Detail auf, welches die Eingabe des Passwortes doch etwas angenehmer macht.

Der ein oder andere iPhone-Besitzer weiß wovon ich rede. Davon das im Eingabefeld immer für kurze Zeit der zuletzt eingegeben Buchstabe des Passworts zu sehen ist, was dem User doch mehr Sicherheit gibt das seine Eingabe korrekt war.

Ich dachte mir sowas könnte auch für normale Formulare ganz schön sein und deshalb haben wir ein kleines jQuery-Plugin geschrieben welches dieses Verhalten imitiert.

How to use

jQuery myPass nutzt die jQuery Javascript library.

Ihr müsst nur die beiden Dateien in eueren Header einbinden.

1
2

<script src="_js/jquery.js" type="text/javascript"></script>
<script src="_js/jquery.myPass-1.0.js" type="text/javascript"></script>

Options

Um das Plugin zu aktivieren und einzustellen müsst Ihr nun nur noch folgendes in euren Header schreiben

1
2
3
4
5

	$('.myTextField').myPass({
			charReplace : '%u2665',
			charDuration : 1000
 
	});

• charReplace: Hiermit könnt Ihr einstellen durch welches Zeichen die Buchstaben ersetzt werden sollen.Als default ist der Standard-Punkt eingestellt. Weitere Zeichen findet Ihr hier.Nehmt einfach die letzten 4 Zahlen des Unicode und setzt %u davor. z.B. charReplace : ‘%u2665′ um statt dem • ein ♥ zu verwenden.
• charDuration: Hiermit könnt Ihr einstellen wie lange das letzte Zeichen angezeigt werden soll.

HTML

Im HTML-Teil eurer Seite legt Ihr nun einfach ein ganz normales Textfeld an, gebt diesem einen Namen und die Klasse welche Ihr oben eingetragen habt.

In diesem fall .myTextField.

1
2
3
4

<form action="test.php" method="post">
<input class="myTextField" name="password" type="text" />
<input name="Send" type="submit" value="submit" />
</form>

Nach dem senden des Formulars könnt Ihr eure Daten ganz einfach z.B. über PHP verarbeiten.

1

echo $_POST['password'];

Download & Demo

Demonstration – Plugin in Action

Download – Alle Dateien zum Download

Spielwiese ohne Rasen mähen – Google Code Playground

Immer wieder kommt es bei der Entwicklung von Webapps dazu, dass man ein Stück Code gerne einmal unabhängig vom Projekt entwickelt um es erst danach einzubauen. Anstatt sich eine kleine Testumgebung lokal einrichten zu müssen, kann man sich auf dem Google Code Playground austoben.

Die gängigsten JS Frameworks (jQuery, jQuery UI, MooTools, Prototype, Dojo) sind dort vertreten, genauso wie annähernd alle APIs von Google. Beispiele dazu sind:

• Language API
• Earth API
• Maps API
• Calender API
• Youtube API

Zu allen APIs gibt es kleine Beispiele die sofort ausgeführt werden können. Ein paar nette Goodies dazu sind, der Direktlink auf die Dokumentation des API genauso wie der intergrierte Firebug Lite zum debuggen. Der erstellte Code kann dann als HTML editiert oder kopiert werden.

Online Thumbnail Generator für Webseiten

Unabhängig von alles JS-Frameworks will ich mal einen kleinen Service vorstellen, mit dem man sehr einfach Thumbails von Websites darstellen kann.
Alles was man dafür benötigt ist ein Account auf Pageglimpse. Nach erfolgreicher Registrierung gibt man auf seiner Seite dem img-Tag als src Attribut einfach einen absoluten Link. Dieser kann dann wie folgt aussehen:

http://images.pageglimpse.com/v1/thumbnails?url=http://www.mysrc.de/&size=large&devkey=1234567890

Pageglimpse verfügt auch über eine kleine API. Was indem Fall nur bedeutet, dass dem GET-String einfach weitere Attribute hinzugefügt werden können.
Dazu gehören:

• devkey -> obligatorisch und auch üblich um einen Service im Web zu nutzen
• url -> WWW-Adresse die der Website die als Thumbnail angezeigt werden soll
• size -> Größe des Thumbails

Da die Thumbnails nicht sofort generiert werden, kann man einen Request senden um den Status zu prüfen. Ein Request sähe dann so aus:

http://images.pageglimpse.com/v1/thumbnails/request?

Hinter “request?” kann man dann noch die GET-Parameter anhängen. Beispiele dazu findet ihr auf Pageglimpse API.