Schöne Schriften – FontEffect Plugin für jQuery

Wer kennt das nicht, bettet man eine Schrift nicht als Bild ein hat man mit CSS allein so gut wie keine Möglichkeiten grafische Effekte auf die Schrift anzuwenden.
Gerade bei Headlines kann dies aber doch ab und an ganz schön sein.
Dem ganzen kann jetzt Abhilfe geschaffen werden mit diesem schönen jQuery Plugin habt ihr nun die Möglichkeit Outlines, Schatten, Verläufe und Spiegelungen an eurem Text zu verankern.
Das Plugin ist nur 7kb groß und kommt gänzlich ohne Bilder aus, so wie es z.B. manche PHP-Funktionen tun wenn sie mit Text arbeiten.

Das Plugin ist denkbar einfach zu nutzen. Einfach die Files downloaden und einbinden.

1
2

<script src="jquery-1.3.2.js" type="text/javascript"><!--mce:0--></script>
<script src="jquery-FontEffect-1.0.0.min.js" type="text/javascript"><!--mce:1--></script>

und anschließend aufrufen

1
2

$('#id1').FontEffect({ outline:true, shadow:true })
$('#id2').FontEffect({ gradient:true, mirror:true, mirrorColor:"#298d79" })

Das Plugin kommt mit über 20 versch. Einstellmöglichkeiten für Farbe, Position, Transparenz usw… daher.
Eine vollständige Liste der Optionen, jede Menge Demos, einen Konfigurator sowie alle Dateien zum Download findet Ihr auf der Plugin Homepage.
Auf der Seite werden auch Mögliche Fragen bzgl. User resizing, Fonts, Box model, Divs usw angesprochen.

Inhalte Zoomen mit jQuery Plugin – AnythingZoomer

Ich bin schon vor ein Paar Tagen auf dieses Plugin gestoßen und wollte es euch heute noch kurz vorstellen.
Mit AnythingZoomer für jQuery habt Ihr die Möglichkeit einzelne Elemente eurer Seite vergrößert darzustellen.
Dazu müsst Ihr einfach nur mit der Maus über die entsprechenden Stellen fahren und der Rest wird über CSS geregelt.

Hier gibts verschieden Demos und das Plugin zum Download.

MouseEvents mit jQuery auf beliebigem Element erfassen

Vor ein paar Tagen musste ich im Zuge eines Projektes MouseEvents auf beliebigen DOM-Elementen abfangen und auswerten können. Mit jQuery und event.type kein Problem.

1
2
3
4
5
6
7
8

 $(document).ready(function() {
       $('#id').bind('mousedown mouseenter mouseleave click dblclick ',
                    functionForMore);
 
        function functionForMore(e) {
            $('p').text('Mausaktion: ' + e.type);
        }
    });

Einfach die gewünschten Events mittels bind dem oder den Elementen (ID oder Klasse), oder man baut das ganze aus und automatisiert für alle Elemente auf der Seite, andocken und im anschluss die weiterführende Funktion auslösen.

jQuery Tutorial – Closing an Accordion automatically

Entscheidender Punkt für die Umsetzung dabei sind Events. Die jQuery API bietet eine Menge verschiedener Events für die Registierung von Mousebewegungen.
In unserem Beispiel sorgen wir nun dafür, dass sich nach dem Verlassen des Accordions mit dem Cursor das letzte geöffnete Accordion Div wieder schließt.

Also, erstmal zum HTML-Aufbau

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

 
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
	<div>
	<h3><a href="#">First</a></h3>
		<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
	           </div>
	<div>
		<h3><a href="#">Second</a></h3>
		<div>Phasellus mattis tincidunt nibh.</div>
	</div>
	<div>
		<h3><a href="#">Third</a></h3>
		<div>Nam dui erat, auctor a, dignissim quis.</div>
	</div>
</div>

Das ist der Standardaufbau des Accoridons aus jQuery UI. Das CSS entstammt dem jQuery UI CSS Framework.
Damit können Themes einfach, im Prinzip durch eine standardisierte Benamung von Elementen, ausgetauscht werden.

Nun zum Javascript Code. Er beinhaltet den Aufruf des Accordions und die Registrierung der Mouseevents.
Wir wollen das Accordion erst nach einer kleinen Verzögerung schließen, deshalb benutzen wie die Funktion setTimout. Falls der Benutzer innhalb dieser Zeit wieder mit dem Cursor über das Accordion fährt, muss dieser Timeout abgebrochen werden. Deshalb speichern wir
das Timeout-Objekt in einer globalen javascript Variabeln (tObj). Mittels der Funktion clearTimeout wird dieser Timout nun vorzeitig ohne Aufruf der Callback-Funktion beendet.

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

<script type="text/javascript">
	var tObj;
 
	$(function(){
	           // simple accordion with special markup
		$('#accordion').accordion({
			header: 'h3',
			active: '.selected',
			collapsible: true,
			autoHeight: false
		});
 
		$("#accordion").mouseleave(function(){
		   	tObj=setTimeout("menu.accordion('activate', active);",3000);
 	           });
 
		$("#accordion").mouseenter(function(){
	     		clearTimeout(tObj);
   		});
 
	});
</script>

Da das Accordion in das Div mit der id “accordion” gehüllt ist, genügt es uns vollkommen die Events ebenfalls auf dieses Div zu legen.
Es bietet sich an die zwei Mousevents mittels Punktoperator zu verknüpfen. Die Funktionalität bleibt die gleiche, allerdings wird eine DOM Operation weniger ausgeführt. Was sich vor allem in Schleifen deutlich bemerkbar macht.
Verkettet sähe die Anweisung so aus:

1
2
3
4
5

	$("#accordion").mouseleave(function(){
		tObj=setTimeout("menu.accordion('activate', 'active');",3000);
               }).mouseenter(function(){
	    	clearTimeout(tObj);
	 });

Ein Beispiel dazu findet unter in unserem Demobereich.

And kind regards to Fabian Hallstein for his idea…

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();

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