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.

Notimoo – Mac Growl für MooTools

Mit Notimoo kommt die vom Mac bekannte Anwendung “Growl” für MooTools.
Mit Growl benachrichtigen Programme auf dem Mac den User darüber wenn etwas passiert.

Notimoo selbst zeigt dem User Notzien im “Growl-Style” am Rand der Seite an.

Einfaches Beispiel für die Implementierung:

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

// Now I create the manager so it will display notifications from the left bottom corner
var notimooManager = new Notimoo({
   locationVType: 'bottom',
   locationHType: 'left'
});
 
// Showing a notification that does not disappear.
notimooManager.show({
    title: 'Testing notification',
    message: 'This notification will not disapper on its own. You must click on it to close.',
    sticky: true
});

Das ganze Notimoo Projekt wird unter der MIT license bei Google Code gehostet.
Eine Demo des ganzen findet Ihr hier.

Schönes Multi-Level Context Menu auf MooTools (Rechtsklick-Menu)

Beim allmorgentlichen absurfen meiner Blogroll bin ich heute auf ein nettes Multi-Level Context Menu gestoßen das ich euch hier kurz vorstellen will.

Das MooTools ContextMenu Plugin, wie es im Original heißt, wurde von David Walsh in CSS, XHTML und mittels MooTools geschrieben.
Das Plugin ermöglicht das erstellen von schönen und funktionalen ContextMenus.
Das Plugin kommt mit einer Vielzahl von Einstellmöglichkeiten daher:

• actions: (wohl die Interessanteste) Hiermit lassen sich versch. Funktionen mit dem klick auf ein Item des Menus verknüpfen.
• menu: Die ID des elements that represents the menu XHTML
• stopEvent: Stopt die standard-Action des Elements wenn das Menu angewählt wird.
• onShow: Ruft eine Funktion auf wenn das menu eingeblendet wird.
• onHide: Ruft eine Funktion auf wenn das menu ausgeblendet wird.
• onClick: Ruft eine Funktion auf wenn das menu geklickt wird.

Einen vollständigen Überblick über die Möglichkeiten findet Ihr im Blog-Post von David.
Eine DEMO des ganzen gibt es natürlich auch.

Und wen das Menu von David noch nicht so ganz überzeugt, der kann auch gerne mal einen Blick auf das Mif.Menu werfen.
Das Mif.Menu kommt mit abgerundeten Ecken, Schlagschatten und mehr daher.
Beipspiele und Doku findet man hier.

Wer also auf der Suche nach einem Rechtsklick- bzw. Context-Menu ist und für den MooTools die erste Wahl ist solle sich diese beiden Menus mal genauer anschauen.

GX – Javascript animations Framework auf jQuery

Riccardo Degni, dem ein oder anderen evtl. von moo.rd bekannt, hat ein neues, super schlankes (10kb), cross-browser fähiges animations-framework auf jQuery veröffentlicht.
Mit GX  lassen sich komplexe Animationen, mit allen W3C-konfromen CSS-Elementen erstellen.

GX soll nicht nur eine einfache Bibliothek zum erstellen von Animationen sein. Riccardo will mit GX weitergehn und es zu einem FULL-FEATURED-FRAMEWORK werden lassen mit welchem sich weiche-, benutzerdefinierte- und komplexe-Animationen mit easing erstellen lassen.

Wichtig waren Riccorado bei der Entwicklung zwei wesentliche Ziele:

• “Write Less, Do More” von jQuery. Mit GX soll man immer so wenige Code wie nur irgend möglich schreiben müssen um die besten Ergebnissen zu erzielen.
• “Don´t Repeat Yourself”. Sollte eine funktionalität von GX mehr als einmal gebraucht werden, wird diese intern wiederverwendet ohne diese zu duplizieren.

Das schöne an der ganzen Geschichte ist die Einfachkeit der Implementierung. Wo frühre versch. scriptfetzen nötig waren reichen jetzt ein paar einfache Zeilen aus um komplexe Animationen zu realisieren.

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

// simple animation
$('element').gx({'width':'+=200px', 'height':'4em', 'opacity':0.4, 'color':'#ff0'},
4000);
 
// queue animations
$('element').gx({width: 0}, 200)
            .gx({width: 200}, 4000)
            .gx({width: 0}, 'verySlow')
            .gx({width: 100}, 'slow');
 
// 'Complete' callback
$('element').gx({width: 200, height: 200}, 2000, 'Bounce', function(el) {
  el.html('The animation is completed!');
});
 
// 'Start' and 'Complete' callbacks
$('element').gx({width: 200, height: 200}, 2000, 'Bounce',
  {'start': function(el) { el.html('The animation is started!'); },
   'complete': function(el) { el.html('The animation is completed!'); } }
);

Weitere Informationen, Beispiele sowie die Doku finden sich auf der offiziellen Website.

sIFR 3 r436 – scroll-Problem im Firefox 3, ie6/7

Gestern habe ich in eines meiner Projekte sIFR 3 revision 436 eingebaut und bin dabei auf ein Problem mit dem scroll-Verhalten gestoßen.
Das Problem ist, kommt man beim scrollen mit der Maus über ein mittels sIFR erzeugtes Textelement verliert die Seite den scroll-Fokus und stoppt.
Was zu einer für den User nicht hinnehmbaren Bedienung der Seite führt. Das Problem ist wohl bekannt, allerdings findet man im Netz nicht wirklich eine Lösung.
Daher will ich euch diesen kurzen Workaround nicht vorenthalten.

Man bekommt es zwar hin das dass ganze in Firefox 3 problemlos läuft, geht es allerdings dort macht der Internet-Explorer probleme.
Und fixed man das ganze so das es im IE läuft, wer hätte es gedacht, macht das ganze im Firefox nicht mehr mit.
Firefox benötigt zum reibungslosen Ablauf ein “wmode: ‘transparent’”, welches jedoch der IE garnicht mag.
Für den IE muss auch die background-color gesetzt sein.

Die Lösung:
sIFR kommt von Haus aus mit einer Funktion zum erkennen des User-Agents daher, welche sich zum hier zum lösen des Problems perfekt nutzen lässt.

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

sIFR.activate(futura);
 
var futura = { src: 'futura.swf' };
 
if(sIFR.ua.gecko){
	sIFR.replace(futura, {
		selector: 'h1',
		wmode: 'transparent',
		fixFocus: 'true',
		css: [
			'.sIFR-root { background-color: #FFFFFF;color: #000000; text-transform: uppercase; margin: 0;}'
			,'a {color: #000000; text-decoration: none; }'
			,'a:hover {color: #000000; text-decoration: underline;}'
		]
	});
}else{
		sIFR.replace(futura, {
		selector: 'h1',
		fixFocus: 'true',
		css: [
			'.sIFR-root { background-color: #FFFFFF;color: #000000; text-transform: uppercase; margin: 0;}'
			,'a {color: #000000; text-decoration: none; }'
			,'a:hover {color: #000000; text-decoration: underline;}'
		]
	});
}

Dies ist ein Simples Beispiel wie man z.B. Firefox von anderen Browser unterscheiden kann.

Unterscheiden lassen sich folgende Browser:
opera, konqueror, ie, ieSupported (für Smartphones), ieWin, windows, ieMac, macintosh, safari, webkit, khtml, gecko.
Des weiteren lassen sich auch Betriebssystem, Versionen usw abfragen. Wer´s genau wissen will einfach mal in der sifr.js ab Zeile 354 schauen.

Noch ein kleiner Tipp bzgl. sIFR und Umlauten. Bevor Ihr eure swf in Flash veröffentlicht geht auf die Schrift-Palette, Zeicheneinbettung und gebt zusätzlich zu “”‘’…_ & noch äöüÄÜÖß mit an um auch diese Zeichen integriert zu haben.

Lightboxen im Überblick – oder Popup´s im Web 2.0

Anfangs noch Trend und neu, heute weitverbreitet und fast jeder User hat sie schon mal gesehen, Lightboxen. Die netten kleinen Javascript gesteuerten Widgets zum betrachten von Bildern, Filmen, Flash-Dateien oder ganzen Seiten.

In diesem Post will ich versuchen euch einen möglichst großen Überblick über die Lightbox, welche auf den gängigen Javascript-Frameworks aufbauen, und ihrer Ableger zu verschaffen.
Momentan sind mal die ersten 15 Lightboxen eingetragen. Der Post wird jedoch in den nächsten Tagen und Wochen ständig wachsen. so, keep watching.

QFocuser – AJAX widgets mit der Tastatur ansteuern

Das Navigieren durch Applikationen mittles der Tastatur ist ein wichtiger Bestandteil in allen Bereichen der useability und accessibility.
Daniel Steigerwald hat sich der Problematik angenommen, welche entsteht sobald mehr als ein AJAX widget auf einer Seite vorhanden sind und eine kleine eigenständige Bibliothek namens QFocuser geschrieben.

Momentan liegt QFocuser in der Version 0.95 vor und läuft auf IE6/7, FF2/3, Safari, Webkit, Opera und Chorme.

Die wichtigsten Features von QFocuser im Überlick:

• erlaubt es dem Widget key events abzufangen wenn es den focus bekommt
• Der Fokus kann für jedes Element aktiviert werden
• löst focus und blur events aus (so das z.b. eine Tabellenzeile nicht länger gehighlighted bleibt wenn man ausserhalb der Tabelle klickt)
• Ermöglicht es das Widget über Tab anzusteuern

Eine Demo des ganzen findet man hier.

Beispielcode:

1
2
3
4
5
6
7
8

  var focuser = new QFocuser(widgetContainer, {
                onFocus: function(focusedEl) { .. add highlighted class or whatever }
                onBlur: function(focusedEl) { .. remove highlighted class or whatever }
        });
        // attach your own keys listeners
        $(focuser.getKeyListener()).addEvent('keydown', e.g. handleArrows);
        // when your widget decided to set the focus (and then receive key events)
        focuser.focus(tableRowForExample);

zu finden ist das gesamte Projekt bei Google Code.

Cufón – Eine Javascript alternative zu sIFR

Wer sich mit Webdesign beschäftigt stößt zwangsläufig immer wieder auf das Problem der Standard Webfonts.
Gerne würde so mancher Kunde eine Schrift nutzen die im Web von Haus aus nicht zur Verfügung steht. Will man jedoch, den Suchmaschinen zu liebe, nicht Flash oder Bilder nutzen gibt es die Möglichkeit das mittlerweile recht bekannte und weitverbreitete sIFR zu nutzen. Der Nachteil an sIFR war bisher das es den FlashPlayer benötigt bzw. sonst den Font ohne Modifikation darstellt.

Mit cufón kommt jetzt eine rein auf Javascript basierende Lösung für die Entwicklergemeinde. Und diese unterscheidet sich zu den bisherigen.
Bei cufón muss zuerst ein Font auf einen web-basierten Generator geladen werden, dieser wandelt den Font schließlich in SVG um und erstellt automatisch das VML.

Ist dieser Schritt einmalig vollzogen, muss man nur noch das generierte .js-File in seine Seite einbinden.

Am Rande noch ein kleiner Überblick:

• sIFR lite
• FLIR
• typface.js
• cufón