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.

jYouTube – jQuery YouTube thumbnail plugin

Videos in Webseiten werden immer beliebter. Und gerade das einbetten von YouTube-Videos nimmt stetig zu.

Wer jedoch nicht direkt ein Video einbinden will, sondern z.B. nur ein YouTube-Video über ein Bild verlinken will, oder z.B. bei klick auf ein Thumbnail ein Video in einer Lightbox öffnen will, der musste bisher das Video aufrufen, einen Screenshot machen, diesen anpassen und einbinden.
Ziemlich aufwendig. Nicht wahr?

Genau hier setzt das jQuery-Plugin jYouTube an. Mit diesem Plugin habt ihr die Möglichkeit mit nur einem Aufruf autoamtisch einen Screenshot/Thumbnail des Videos zu erstellen.
Das ganze geht in verschiedenen Größen und über die ID oder die URL des Videos.

1
2
3
4
5

// Returns big screenshot by video id
$.jYoutube('rSUfWXcNAOw');
 
// Returns small thumbnail by YouTube video URL
$.jYoutube('http://www.youtube.com/watch?v=rSUfWXcNAOw', 'small');

Alle Infos rund um das Plugin findet Ihr auf der offiziellen jQuery-Seite dazu.

epiclock – jQuery Plugin zum erstellen und verwalten einer Uhr

Gerade wenn man eine größere Applikation schreibt hat man doch öfter einmal Bedarf an einer Uhr. Bisher ging das ganze über reines Javascript, aber war auch mit der ein oder anderen Minute Aufwand verbunden.
Die kann man sich in Zukunft sparen. Mit epiclock, einem jQuery Plugin mit welchem sich ohne Probleme eine Uhr erstellen und einbetten lässt.

Mit epiclock hat man eine Vielzahl von Möglichkeiten. Von einer einfachen Uhr, über eine Klappuhr im Retrostyle, Timer bis hin zum Countdown.

Ein einfaches Beispiel:

1
2
3
4
5

//einfache Uhr
jQuery('#text').epiclock();
 
//Uhr im Retro-Style
 jQuery('#text').epiclock({gmt: true, offset: {hours: -8}}, 'retro');

Eine Demo, die Dokumentation sowie alle Dateien zum Download findet ihr auf der offiziellen Website.

ScrollSpy – ein MooTools Plugin

Auf der Seite von der David Walsh findet ihr ein nettes MooTools Plugin um den Benutzer während längerer Scrollvorgänge ein kleines Erlebnis zu bieten.

Es gibt verschiedene Demos auf der Seite, vom einfachen einblenden eines “Top-Page” Ankers, über Farbenwechsel der Hintergrunds bis zum ein- und ausblenden von Bildern während des scrollens.
Ein echt netter Eye-Catcher..

Ein kleines Beispiel:

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

window.addEvent('domready',function() {
	/* smooth */
	new SmoothScroll({duration:500});
 
	/* link management */
	$('gototop').set('opacity','0').setStyle('display','block');
 
	/* scrollspy instance */
	var ss = new ScrollSpy({
		min: 200,
		onEnter: function(position,state,enters) {
			$('gototop').fade('in');
		},
		onLeave: function(position,state,leaves) {
			$('gototop').fade('out');
		},
		container: window
	});
});

Der Code ist nicht ganz intuitiv und etwas CSS wird auch noch benötigt, aber nach dem Anschauen der Beispiele wird schnell alles klar.