Schöne Schriften – FontEffect Plugin für jQuery

Wer kennt das nicht, bettet man eine Schrift nicht als Bild ein hat man mit CSS allein so gut wie keine Möglichkeiten grafische Effekte auf die Schrift anzuwenden.
Gerade bei Headlines kann dies aber doch ab und an ganz schön sein.
Dem ganzen kann jetzt Abhilfe geschaffen werden mit diesem schönen jQuery Plugin habt ihr nun die Möglichkeit Outlines, Schatten, Verläufe und Spiegelungen an eurem Text zu verankern.
Das Plugin ist nur 7kb groß und kommt gänzlich ohne Bilder aus, so wie es z.B. manche PHP-Funktionen tun wenn sie mit Text arbeiten.

Das Plugin ist denkbar einfach zu nutzen. Einfach die Files downloaden und einbinden.

1
2

<script src="jquery-1.3.2.js" type="text/javascript"><!--mce:0--></script>
<script src="jquery-FontEffect-1.0.0.min.js" type="text/javascript"><!--mce:1--></script>

und anschließend aufrufen

1
2

$('#id1').FontEffect({ outline:true, shadow:true })
$('#id2').FontEffect({ gradient:true, mirror:true, mirrorColor:"#298d79" })

Das Plugin kommt mit über 20 versch. Einstellmöglichkeiten für Farbe, Position, Transparenz usw… daher.
Eine vollständige Liste der Optionen, jede Menge Demos, einen Konfigurator sowie alle Dateien zum Download findet Ihr auf der Plugin Homepage.
Auf der Seite werden auch Mögliche Fragen bzgl. User resizing, Fonts, Box model, Divs usw angesprochen.

MouseEvents mit jQuery auf beliebigem Element erfassen

Vor ein paar Tagen musste ich im Zuge eines Projektes MouseEvents auf beliebigen DOM-Elementen abfangen und auswerten können. Mit jQuery und event.type kein Problem.

1
2
3
4
5
6
7
8

 $(document).ready(function() {
       $('#id').bind('mousedown mouseenter mouseleave click dblclick ',
                    functionForMore);
 
        function functionForMore(e) {
            $('p').text('Mausaktion: ' + e.type);
        }
    });

Einfach die gewünschten Events mittels bind dem oder den Elementen (ID oder Klasse), oder man baut das ganze aus und automatisiert für alle Elemente auf der Seite, andocken und im anschluss die weiterführende Funktion auslösen.

jQueryList – Plugin und Beispielsammlung

Wer kennt das nicht. Im laufe der Zeit hat man sich eine Vielzahl an Bookmarks angelegt, wenn man Glück hat sogar in Ordner und nach Thema sortiert. Wenn man jetzt jedoch nach einem gewissen Plugin oder Beispiel sucht gehts los. Wo war das? Wie hieß das?

Das ganze kann man jetzt auch erstmal bequemer angehn.
Gestern bin ich dank einem Tweet auf jQuery List gestoßen.
Bei jQuery List handelt es sich um EINE Seite mit Beispielen und Plugins rund um jQuery.
Die einzelnen Einträge sind in 32 Kategorien aufgeteilt, wie z.B. Grids, Drag and Drop, Form Validation usw.

Alle Inhalte befinden sich zusammengefasst auf einer einzigen Seite. Zu jedem Eintrag gibt es einen kleinen aktuellen Screenshot der dazugehörigen Seite zu sehen.
Mit 255 Einträgen ist schon so einiges dabei. Für mich persönlich wird die Seite meine Bookmarks sicher nicht ersetzen, aber wenn man mal auf die schnelle etwas braucht oder in den Bookmarks nicht das richtige dabei ist, werde ich hier sicher vorbei schauen.

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();

umgedrehte floats mit jQuery Masonry

Ich möchte euch noch kurz ein schönes weiteres Plugin zum Layouten mit an die Hand geben. jQuery Masonry.
Während float´s Elemente horizontal und dann vertikal anordnen, habt ihr mit Masnory die Möglichkeit das genau andersrum zu machen. Erst vertikal, dann horizontal.

Das Plugin kommt ohne weiter Einstellmöglichkeiten oder Optionen daher. Alles was man noch benötigt ist etwas CSS.

Hier ein einfaches Beispiel in welchem alle Elemente im container “wrap” neu ausgerichtet werden.

1

$('.wrap').masonry();

Eine Demo sowie weiter Infos und die Dateien zum Download findet Ihr auf der offiziellen Website.

jQuery ifixpng – Plugin für Transparenz-Problem

Wer kennt das Problem nicht. Man will ein transparentes png einbinden und bekommt Probleme in den älteren Versionen des Internet Explorer.
Klar gibts dafür schon Lösungen wie den pngfix von TwinHelix etc.

Allerdings fand ich bisher keine so einfach und geschickt wie jQuery.ifixpng.
Das Plugin lässt sich allgemein auf alle Dateien eines Typs oder auch gezielt auf id´s angewendet werden.

Es gibt momenta noch zwei, drei Probleme die aber im Normalfall nicht ins Gewicht fallen.
Unter anderem müssen die Elemente auf die der Hack angewandt wird visible sein.
Background positionierung und repeating gehen leider auch nicht. Wird aber normal eh weniger ein Thema sein wenn man den Hack braucht.

Hier wie immer ein simples Beispiel:

1
2
3
4
5
6
7
8
9
10
11

// apply to all png images
$('img[@src$=.png]').ifixpng();
 
// apply to all png images and to div#logo
$('img[@src$=.png], div#logo').ifixpng();
 
// apply to div#logo, undo fix, then apply the fix again
$('img[@src$=.png], div#logo').ifixpng().iunfixpng().ifixpng();
 
// apply to div#logo2, modify css property and add click event
$('div#logo2').ifixpng().css({cursor:'pointer'}).click(function(){ alert('ifixpng is cool!'); });;

Alle weiteren Infos, sowie das Plugin zum Download findet Ihr auf der offiziellen Homepage.

Lazy – jQuery Plugins on-demand laden

Die Tage schon bin ich über ein schönes kleines jQuery-Plugin names Lazy gestolpert.
Bei lazy handelt es sich um ein nur 530Byte großes Plugin das gerade bei großen Projekten einen gehörigen Vorteil, was das Laden von anderen jQuery-Plugins angeht, bringen kann.

Lazy tut nämlich nichts anderes, als Plugins nur dann zu initialisieren wenn auch irgendwo wirklich ein Aufruf für die Funktion erfolgt.
Sprich ihr könnt über lazy einbinden was ihr wollt, geladen wird es nur wenn es auch wirklich gebraucht wird.

Hier noch ein kleines Code-Beispiel:

1
2
3
4
5
6

$.lazy('jquery.elastic.js','elastic');
$.lazy('jquery.validation.js','validate');
$.lazy('jquery.ajaxdotnet.js','ajaxDotNet');
 
// And then you use you plugins as you always do
$('textarea').elastic();

Weiter Infos sowie eine Demo und die Files zum Download findet Ihr auf der offiziellen Seite:
http://www.unwrongest.com/projects/lazy/

jQuery UI CSS Framework

Heute mal ein kleiner Exkurs auf die Oberflächengestaltung das vereinfachte Zusammenarbeiten zwischen Entwickler und Designer.
jQuery bietet ein eigenes CSS Framework. Im Gegensatz zu YAML, wohl eines der bekanntetesten Frameworks in diesem Bereich, ist das UI CSS Framework meiner Meinung nach weitaus einfacher zu handhaben, allerdings auch nicht ganz so mächtig. In erster Linie werden Bezeichnungen für Elemente durch Klassen vorgegeben. Nun hält man sich einfach an diese Standards und man kann das “Look a like” seiner Oberflächenkomponenten durch Austauschen der Themes schnell und einfach ändern.

Auch wird die Umsetzung von “Rounded corners” mit CSS3 unterstützt. Natürlich in den Browsern, die sich nach dieser W3C Empfehlung richten. Der IE6 gehört natürlich nicht dazu, hierfür muss auch mit dem jQuery CSS Framework individuell angepasst werden. Genauso werden bisher noch keine transparente png’s im IE6 unterstützt, was sich aber bald ändern soll. Aber hierfür ist bisher noch der alte CSS pngfix notwenig.
Allgemein mehr über das CSS Framework könnt ihr unter Theming API herausfinden.

Auch äußerst interessant ist der ThemeRoller. Hält man sich an die Standards der Theming API lassen sich damit einfach ansprechende Benutzeroberflächen gestalten, die auf die eigene Seite als CSS übernommen werden können.

Wie nutzt man MooTools?!

Inspiriert von einem Artikel von “chromasynthetic” möchte ich ein paar Best Practices für den Umgang mit MooTools vorstellen und diese kurz erläutern.

• Elemente ansprechen
^?View Code JAVASCRIPT

1 2 3 4

//javascript methode document.getElementById("someID"); //mit Mootools $('someID');

Mit Mootools weit kürzer und vor allem problemlos zwecks CamalCases.

• “Value” bearbeiten
^?View Code JAVASCRIPT

1 2 3 4

//javascript methode var val= document.getElementById('input').value; //mit Mootools var val = $('input').getValue();

Mootools bietet diverse Methoden um Objekteigenschaften zu verändern oder auszulesen.

• Verketten von Methoden
^?View Code JAVASCRIPT

1 2 3 4 5 6 7 8

//javascript methode $('div').style.height = '100px'; $('div').style.background = '#ffc'; //mit Mootools $('footer').setStyles({ height: '100px', background: '#ffc' });

Einfaches Beispiel für eine Verkettung von Funktionen.

• Absetzen eines AJAX-Requests
^?View Code JAVASCRIPT

1 2 3 4 5 6 7 8 9 10

//falsche Methode new Ajax('eine.php?var1=test&var2=request');   //besser mit new Ajax('eine.php', { data: { var1: 'test', var2: 'request' } });

Beide Möglichkeiten führen zum selben Ergebnis. Allerdings ist die Überschaubarkeit für letzteres deutlich größer. Für nicht statische Variabeln wie z.B. der ‘test’-String lassen sich an dieser Stelle natürlich auch Selektoren benutzen.

• Event-Handling
^?View Code JAVASCRIPT

1 2 3 4 5

//Falsche Methode $('Container').onclick = doSomething;   //besser mit $('Container').addEvent('click', doSomething);

Die zweite Variante ist weitaus sicherer, da sich damit der Mootools Core um die Umsetzung auf den jeweiligen Browser kümmert.

• Einfache Iteration über Elementgruppen
^?View Code JAVASCRIPT

1 2 3 4 5 6 7

//Falsche Methode $$('div.collapsed').each(function(el){ el.addEvent('click', expand); });   //besser mit $$('div.collapsed').addEvent('click', expand);

Beide Versionen selektieren in diesem Fall jedes div mit der Klasse “collapsed” und legen darauf ein Click-Event. Das “$$” gibt Elemente in Form eines Arrays zurück, so dass eine Iteration mit der each-Funktion nicht mehr nötig ist.
Gleiches gilt für:

^?View Code JAVASCRIPT

1 2 3 4 5 6 7

//Falsche Methode $$('div.hidden').each(function(el){ el.removeClass('hidden'); })   //besser mit $$('div.hidden').removeClass('hidden');

Ich hoffe dem ein oder anderen Einsteiger wird damit klar, inwiefern sich Standard Javascript von dem Einsatz von MooTools unterscheidet und wie man diese Zusatzfunkionalitäten nutzen kann.

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.