• Keine optimale Suchmaschinerkennung
• Hoher Änderungs- und Verwaltungsaufwand
• Text nicht kopierbar
• Problem der Barrierefreiheit

Neben der Bilderlösung dürfte sIFR eine bekannte Methode sein. Hier wird der Text aus einem bestimmten HTML-Tag gelesen und durch einen Flashfilm mit eingebettem Font ersetzt. In der Theorie gut, in der Praxis schwierig wegen eines enorm hohen Konfigurationsaufwands.

Nach dem gleichen Prinzip funktioniert das js-Plugin Typeface. Nur ist es etwas praktischer in der Handhabung.
Der folgende Code bindet einen normalen Font und einen später beschriebenen Bold-Font ein:

1
2
3

<script src="typeface-0.14.js"><!--mce:0--></script>
<script src="mysrcFont.typeface.js"><!--mce:1--></script>
<script src="mysrcFontBold.typeface.js"><!--mce:2--></script>

Um dem Text die entsprechende Schriftart zuzuweißen, benutzt man einfach die CSS Anweisung font-family.

1
2

<div id="text" style="font-family: mySrc Font;">
Lorum ipsolum...</div>

Den Namen des im syle-Attribut verwendeten Fonts kann man in den jeweiligen js-Dateien nachlesen.
Das Ganze hat zwei Nachteile, wie sie auch schon auf der Website beschrieben werden. Performanceprobleme bei größeren Textmengen und Standard-CSS Hovereffekte funktionieren nicht mehr.
Damit der Font in eine Javascript Datei umgewandelt werden muss er in einem Truetype oder Opentype Format vorliegen. Nicht immer ist bei diesen Schriften auch die fette Variante integriert. Um das in den Griff zu bekommen, kann man mit einem Font Bearbeitungstool nur die Bold-Variante exportieren und diese ebenfalls umwandeln. Bindet man nun diese beide JS-Dateien ein und weist die Bold-Schrift einem einem HTML-Element zu, passiert abgesehen von einer Fehlerausgabe in der Firebug Konsole nichts.
Die Lösung dafür ist ganz einfach. Der Font-Converter auf der Typeface Website integriert auch Informationen über Schriftschnitte weshalb der CSS-Selektor diese Info auch benötigt:

1
2
3
4
5
6
7
8

#text{
  font-family: mySrc Font, Verdana, Arial;
}
 
#boldFont{
  font-family: mySrc Boldfont, Verdana, Arial;
  font-weight: bold;
}

Damit ist der Workaround für die Einbettung von normalen und bold Schriften perfekt.

Cufón – Eine Javascript alternative zu sIFR
sIFR 3 r436 – scroll-Problem im Firefox 3, ie6/7

Ähnliche Artikel

• 15. April 2009 -- jQuery versus CSS
• 12. April 2009 -- jQuery UI CSS Framework
• 8. April 2009 -- jQuery Media Plugin zum Einbinden verschiedener Mime-Types

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…

Ähnliche Artikel

• 12. November 2009 -- jQuery Präsentationen für ein besseres Verständnis
• 16. Oktober 2009 -- jQuery – Accessible-RIA – Widgets für jedermann
• 30. Juni 2009 -- jQuery myPass – password hiding iPhone-Style

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

Ähnliche Artikel

• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2
• 20. Oktober 2009 -- Praxistipp: jqTransform Button width einstellen
• 16. Oktober 2009 -- Praxistipp – jqTransform width bug

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.

Ähnliche Artikel

• 1. Dezember 2010 -- jQuery Mobile – Der Seitenaufbau
• 25. November 2010 -- jQuery Mobile – Web-Apps mit jQuery
• 19. November 2010 -- Praxistipp: Suchfeld leeren on focus (jQuery)

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.

Ähnliche Artikel

• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2
• 20. Oktober 2009 -- Praxistipp: jqTransform Button width einstellen
• 16. Oktober 2009 -- Praxistipp – jqTransform width bug

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

Ähnliche Artikel

• 14. April 2009 -- Notimoo – Mac Growl für MooTools
• 24. März 2011 -- MooTools MenuMatic – Firefox 4 zweizeilig Problem
• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2

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.

Ähnliche Artikel

• 6. Mai 2009 -- Filemanager basierend auf MooTools
• 17. März 2009 -- Schönes Multi-Level Context Menu auf MooTools (Rechtsklick-Menu)
• 24. März 2011 -- MooTools MenuMatic – Firefox 4 zweizeilig Problem

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.

Ähnliche Artikel

• 14. April 2009 -- Notimoo – Mac Growl für MooTools
• 24. März 2011 -- MooTools MenuMatic – Firefox 4 zweizeilig Problem
• 17. September 2009 -- Praxistipp – position absolute – parent height anpassen mit MooTools

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.

Ähnliche Artikel

• 2. Juni 2009 -- Droplist Filter Plugin – Dropdown´s durchsuchen
• 28. Mai 2009 -- Flip! – jQuery Plugin
• 14. April 2009 -- Notimoo – Mac Growl für MooTools

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.

Ähnliche Artikel

• 24. März 2011 -- MooTools MenuMatic – Firefox 4 zweizeilig Problem
• 19. November 2010 -- Praxistipp: Suchfeld leeren on focus (jQuery)
• 30. Juli 2010 -- Typeface mit font-weight:bold