Phodana Media » JavaScript

3 coole jQuery Plugins

André Gärtner — Tue, 12 Jan 2010 15:57:58 +0000

Zunächst einmal wünsche ich noch ein frohes Neues Jahr. Es ist zwar schon etwas spät dafür, aber da ich momentan intensiv an meiner Diplomarbeit schreibe, bleiben leider gewisse Dinge auf der Strecke, da man dann doch irgendwann genug vom Schreiben hat. Nun ja, heute stelle ich drei coole jQuery Plugins vor, die mir die letzten Wochen über den Weg gelaufen sind.

Coda-Slider 2:

Der Coda-Silder ist Dir wahrscheinlich bekannt oder Du bist ihm zumindest schon einmal begegnet. HTML Inhalte können damit in verschiebbaren Tabs präsentiert werden. Der “alte” Coda-Slider wurde bekannt durch die Panic Coda Website.

Da der Coda-Slider bisher doch recht unflexibel war, wurde das Plugin nun endlich überarbeitet. Neue Features sind:

automatischer Tab-Wechsel solange bis auf ein Tab geklickt wird
Tab-Wechsel kann von anderen Links aus kontrolliert werden
ein Tab kann angegeben werden, der nach dem Laden der Seite angezeigt werden soll
Geschwindigkeit und Animationen können bestimmt werden
Für jeden Tab werden SEO freundliche URLs erzeugt

Grundlayout des neuen Coda-Slider 2

Den Download und eine Demonstration des neuen Coda-Slides findest Du hier.

Before/After:

Das Before/After Plugin für jQuery ist besonders für Webseiten zu empfehlen die einen Vergleich von Bildern präsentieren wollen. Das ursprüngliche Bild und die überarbeitete Version davon können über einen Schieberegler im Vorher- und Nachher-Vergleich betrachtet werden.

Vorher-/ Nachher-Vergleich eines Bildes

Den Download und wie das Ganze aussieht, findest du auf der Catch my Fame Seite.

TopUp:

TopUp ist ein Lightbox Klon, der stark anpassbar ist und erweiterte Funktionen mit sich bringt. Bilder, Videos, Webseiten und HTML Inhalte können dargestellt werden. Natürlich werden auch Gruppierungen unterstützt, so das über Vor- und Zurück-Knöpfe innerhalb der Lightbox die Inhalte gewechselt werden können. Desweiteren sind Ajax Requerst möglich und die Animationen können verändert werden.

TopUp Lightbox

Den Download und eine Demonstration gibt es hier.

Erstellen einer virtuellen jQuery Tastatur

André Gärtner — Mon, 27 Oct 2008 14:18:03 +0000

DesignShack präsentiert ein tolles Tutorial, wie man eine virtuelle Tastatur mit jQuery erstellen kann (das Skript kann heruntergeladen werden).

Solche virtuellen Tastaturen werden in der Regel bei Websites von Banken oder Forumularen eingesetzt, die extra Sicherheit benötigen. Keylogger werden so in gewisser Weise ausgetrickst.

Es ist sehr einfach neue Buchstaben bei der Tastatur hinzuzufügen. Die Umlaute der deutschen Sprache können so auch eingebaut werden. Die Tastatur kann ebenfalls an jede Stelle des Screens verschoben werden. Eine Domonstration findet Ihr hier…

Unit PNG Fix für den IE6

André Gärtner — Sat, 23 Aug 2008 15:19:43 +0000

Einige von Euch kennen bestimmt das Problem, dass der IE6 transparente PNG Bilder nicht richtig dastellen kann. Bisher könnte man das mit diversen PNG-Fix-Methoden (JavaScript-Lösungen) beheben. Diese PNG-Fix-Methoden sind aber nicht sehr zuverlässig. In der Performance sind sie langsam und die CSS-Attribute background-position und background-repeat funktionieren in Kombination nicht. Während also aktuellere Browser das Hintergrundbild gekachelt oder positioniert anzeigen, wird das Bild im IE6 mit den Fixes zwar transparent angezeigt, aber eben nicht so, wie man sich das gewünscht hat.

Jetzt gibt es eine neue Methode von Unit Interactive: Labs. Das Ganze ist deutlich performance-optimiert (nur 2kb groß), zuverlässiger und einfacher in der Handhabung. Wärend man bei den alten Lösungen noch CSS Anpassungen machen musste, müssen jetzt nur zwei Dateien auf dem Webserver hochgeladen werden und folgendes muss in den Head-Bereich der Website eingefügt werden:

Mit dieser Lösung funktionieren background-position und background-repeat wieder ohne Probleme. Demo, Download und weitere Infos gibts auf der Website von:

Jede Website editierbar machen

André Gärtner — Fri, 01 Aug 2008 18:47:18 +0000

Hattet Ihr schon mal den Wunsch eine fremde Website textuell Euren Wünschen anzupassen? Eine einfache Zeile Javascript Code macht dies möglich.

Man kann natürlich die Website nicht dauerhaft ändern, sondern nur lokal bei sich im Browser. Auf diesem Wege erstellen viele Betrüger gefälschte Screenshots auf die viele Menschen hereinfallen.

Alles was man dafür machen muss, ist die gewünschte Website zu besuchen, folgende Zeile in die Adressleiste des Browsers (getestet mit Firefox und IE7) einzugeben und auf Enter zu drücken. Danach könnt Ihr die Seite fröhlich bearbeiten.

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

9 Opensource Fisheye Menüs

André Gärtner — Fri, 20 Jun 2008 22:08:22 +0000

Auf der Website snap2objects gibt es ein schöne Sammlung von Fisheye Menüs. Mac Liebhaber werden sich darüber sicherlich sehr freuen. Die neun Fisheye Menüs sind Opensource, somit darf jeder die Menüs für seine Website benutzen und anpassen.

Kwicks for jQuery Slidemenu

André Gärtner — Fri, 09 May 2008 16:03:36 +0000

Wer schon mal die mootools Seite besucht hat, kennt sicherlich das schicke Menü mit dem Slide-Effekt. “Kwicks for jQuery” ist das Gleiche, nur das es mittels jQuery umgesetzt worden ist. Die Handhabung und Einbindung in den eigenen Quellcode ist kinderleicht.

markItUp! JavaScript Editor

André Gärtner — Fri, 02 May 2008 18:42:08 +0000

markItUp! ist ein JavaScript, dass auf jQuery basiert. Es erlaubt, jede textarea in einen Markup Editor zu verwandeln. HTML, Tixtile, Wiki Syntax, Markdown, BBcode oder ein eigenes Markup System kann sehr einfach implementiert werden.
Entwickler von Webanwendungen die keinen Wert auf WYSIWYG Editoren legen, sollten sich markItUp! aufjeden Fall mal anschauen.