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…

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

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.

Flip! – jQuery Plugin

Ich möchte euch heute über den Tag verteilt kurz ein paar nette neue Plugins vorstellen.
Los geht´s mit Flip! einem jQuery Plugin welches euer Element in alle Richtungen drehen kann.

Das Plugin beitet verschiedene Optionen wie z.B. einstellen der Richtung, definieren der Start- und Endhintergrundfarbe bei der Animation, die Geschwindigkeit, aufruf von Funktionen am Start oder nach Abschluss der Animation usw.
Das Ganze läuft mit jQuery 1.3.1.

Eingebunden wird das ganze einfach so:

1

$("#flipBox").flip({ direction: 'tb', color: '#B34212', content:$("#myId") });

Eine Demo sowie alle Dateien zum Download findet ihr auf der offiziellen Website des Plugins.

Filemanager basierend auf MooTools

Unter der Website von Christoph Pojer findet ihr einen beeindruckenden Filemanager. Er ist noch in der Erprobungsphase, aber bietet schon eine angenehme Oberfläche und eine gute Usability und natürlich volle Funktionalität.

Der Filemanager zum Verwalten von Bildern bzw. Dateien auf einem PHP-Webserver basiert auf MooTools. Eine kleine Liste der Features:

• Betrachten der Ordner und Dateien auf einem Server
• Umbenennen, Löschen, Kopieren und Verschieben von Dateien
• Detailansicht von Bildern
• Fileupload mit dem bekannten Fancyupload in der neuen Version
• Automatisches verkleinern von großen Bildern
• …

Eine Demo findet ihr unter: Filemanager

Der Aufruf ist denkbar einfach:

1
2
3
4
5
6
7

 var manager = new FileManager({
    url: 'manager.php',
    assetBasePath: '../Assets',
    language: 'en',
    uploadAuthData: {session: 'MySessionId'}
  });
   $('beispiel').addEvent('click', manager.show.bind(manager));

Weiter gibt es auch die Möglichkeit den Filemanager in den WYSIWYG-Editor TinyMCE einzubauen. Dieser besitzt von Haus aus keine Möglichkeit eines gezielten Upload. Eine Demo dazu findet ihr ebenfalls auf Christopher’s Seite..

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.