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

jQueryList – Plugin und Beispielsammlung

Wer kennt das nicht. Im laufe der Zeit hat man sich eine Vielzahl an Bookmarks angelegt, wenn man Glück hat sogar in Ordner und nach Thema sortiert. Wenn man jetzt jedoch nach einem gewissen Plugin oder Beispiel sucht gehts los. Wo war das? Wie hieß das?

Das ganze kann man jetzt auch erstmal bequemer angehn.
Gestern bin ich dank einem Tweet auf jQuery List gestoßen.
Bei jQuery List handelt es sich um EINE Seite mit Beispielen und Plugins rund um jQuery.
Die einzelnen Einträge sind in 32 Kategorien aufgeteilt, wie z.B. Grids, Drag and Drop, Form Validation usw.

Alle Inhalte befinden sich zusammengefasst auf einer einzigen Seite. Zu jedem Eintrag gibt es einen kleinen aktuellen Screenshot der dazugehörigen Seite zu sehen.
Mit 255 Einträgen ist schon so einiges dabei. Für mich persönlich wird die Seite meine Bookmarks sicher nicht ersetzen, aber wenn man mal auf die schnelle etwas braucht oder in den Bookmarks nicht das richtige dabei ist, werde ich hier sicher vorbei schauen.

PeriodicalUpdater for jQuery

Ich bin heute auf dem Blog von 360innovative auf ein schönes kleines jQuery-Script gestoßen.
Die Jungs haben sich den PeriodicalUpdater() welcher bei Prototype von Haus aus dabei ist als Vorlage genommen und diese Funktion für jQuery verfügbar gemacht.
Die Funktion lädt Inhalt innerhalb eines spezifizierten Intervals.

Das Plugin ist, wie meist, einfach zu implementieren und hat versch. Einstellmöglichkeiten wie z.B. sendData, minTimeout, maxTimeout, multiplier, type usw.

Das Plugin zum Download sowie eine Demo findet Ihr auf der offiziellen Seite.

ifixpng2 & pngFix – Transparenz für den IE6

Immer wieder stößt man bei der Entwicklung von Webseiten auf das Problem transparenter Hintergründe von png’s im IE6. Es gibt diverse Hacks und Workarounds dafür. Ein paar besondere sollen hier nun kurz vorgestellt werden.

- ifixpng2
Das alte ifixpng plugin hat ein update verpasst bekommen. Einige Fehler oder Probleme wurden behoben, vor allem erwähnenswert dabei, das Elemente mit Background-Image nicht mehr visible bzw. sichtbar sein müssen um den gewünschen Effekt zu erhalten. Den Download zum ifixpng2 findet ihr hier.

1
2
3
4
5

//DOM-Ready Event
 $(document).ready(function(){
//Der Fix wird auf alle Class-Attribute mit "legende" angewendet
     $('.transparent').ifixpng();
  });

- pngfix
Ein anderes nettes Plugin um das Transparenzproblem zu lösen findet ihr auf der Seite von Andreas Eberhard. Das schöne bei diesem Plugin ist, dass nicht nur pngs gefixt werden, die im CSS als background angegeben sind, sondern auch direkt img-Tags angesprochen werden können.
Der Aufruf dazu ist derselbe wie beim ifixpng2:

1
2
3
4

//plugin wird auf alle Bilder angewendet
 $(document).ready(function(){
        $(document).pngFix();
    });

Dieser einfache Aufruf geht allerdings bei vielen Bildern auf der Seite zu Lasten der Performance. Ich empfehle eine präziseren Aufruf für genau diejenigen Bilder, die den
pngfix erhalten sollen.

1
2

//Fix bezieht sich auf jedes Div mit der Class "Legende"
jQuery('div.legende').pngFix();

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.

Bessere Textfelder – prettyComments jQuery Plugin

Ein nettes kleines Tool für eine bessere Usability bei Textfeldern bietet das prettyComments Plugin. Es lässt bei Eingabe über die Tastatur einfach des Textfeld mitwachsen und funktioniert in allen gängigen Browsern.

Das Einbinden ist denkbar einfach:

1
2
3
4
5
6
7
8
9
10

//einbinden der Bibliotheken
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/prettyComments.js" type="text/javascript"></script>
 
//Initialisiere Plugin nach dem der DOM-Baum vollständig geladen ist
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$('#textarea').prettyComments();
	});
</script>

Das Plugin hat folgende Attribute:

• animate: true/false
• animationSpeed: ‘slow’/'normal’/'fast’
• maxHeight: 500 (ab dieser Höhe erscheint Scrollbalken)

Ein Beispiel dazu:

1
2
3
4
5

<script type="text/javascript">
	$(document).ready(function(){
		$('#textarea1').prettyComments({animate: true, maxHeight:100});
	});
</script>

Tools für jQuery – Ein Plugin UI Elemente

Von jQuery gibt es eine eigene Bibliothek für UI- bzw. Oberflächenelemente. Diese bezieht sich allerdings eher auf Animationen und andere Effekte. Selbstverständlich stehen auch fertige Komponenten wie Kalender, Accordion und Drag ‘n Drop zu Verfügung.

jQuery Tools setzt dagegen direkt auf fertige Komponenten. Ähnlich wie auf der jQuery UI Seite lassen sich einzelne Teile direkt herunterladen oder alle Funktionen in einem Skript. Die Funktionspallette erstreckt sich über Tooltips, Tabs, Scrolling, Highlighting und Overlays.

jQuery Tools lassen sich einfach einbinden, hier ein Tab Beispiel:
Der HTML Code

1
2
3
4
5
6
7
8
9
10
11
12
13

<!-- the tabs -->
<ul class="tabs">
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
</ul>
 
<!-- tab "content" -->
<div class="content">
    <div>First tab content. Tab contents are called "content"</div>
    <div>Second tab content</div>
    <div>Third tab content</div>
</div>

Der Javascript Code

1
2
3
4
5

// Aufruf nach dem dom-Ready Event
$(function() {
    // Zuordnung von den ul-Tags zum Inhalt
    $("ul.tabs").tabs("div.content> div");
});

Dieses Plugin besticht durch seine saubere Trennung zwischen CSS und Javascript Code sowie durch seine kleine Größe und einfache Handhabung.

Einfach mal anschauen und testen..

jqPlot – jQuery Plotting Plugin

Wer sich schon mal mit damit beschäftigt hat Daten in Form von Charts zu visualisieren, wird festegestellt haben das es eine Menge Möglichkeiten gibt.
MooTools, jQuery, PHP usw. Jetzt kommt mit jqPlot ein weiteres jQuery-Plugin daher welches was die Einfachheit der Implementierung und die Vielzahl der Einstellmöglichkeiten angeht ganz vorn dabei sein dürfte.

Die Kernfeatures im Überblick:

• Zahlreiche Linienstile
• Horizonalte und Vertikale Balkendiagramme
• Schatten für Linien, Markierungspunkte, das Gitter usw.
• Drag & Drop von Punkten mit auto update der Werte
• Trend lines
• uvm

Das ganze läuft in allen gängigen Browsern und mit der aktuellen jQuery-Version.

Demo´s, die Dateien zum Download sowie eine sehr sehr ausführliche Doku findet Ihr auf den offiziellen Seiten.

Droplist Filter Plugin – Dropdown´s durchsuchen

Wer kennt das nicht. Man hat eine DropDown-Liste mit unglaublich vielen Einträgen und der User ist genötigt ewig lang zu scrollen um seine Auswahl zu treffen.
Im schlimmsten Fall ist die Liste dann noch nicht einmal alphabetisch vorsortiert.

Genau dieser Problematik nimmt sich das Droplist-Filter-Plugin an.
Es bietet dem User die Möglichkeit, beiKlick auf ein kleines Suche-Icon, die Inhalte der DropDown vor zu filtern.

Ursprünglich in reinem Javascript entwickelt, gibt es den Filter jetzt auch als Plugin für Drupal, jQuery, WordPress, Mantis oder eben Standalone.

Das einbinden des jQuery-Plugins ist denkbar einfach. Dateien herunterladen, einbinden und aktivieren mit:

1

$("select").droplistFilter();

Eine Demo sowie alle Dateien zum Download findet Ihr auf der offiziellen Website.