virtuelles jQuery Keypad Plugin

Soeben zwitschert mir eine Info über ein schönes neues jQuery Plugin ins Haus welches ich euch hier kurz vorstellen möchte.

Beim jQuery Keypad handelt es sich um ein Plugin mit welchem es möglich ist sicherere Eingaben mittels eines “keyboard ähnlichen Bedienfelds” zu machen. Das Plugin fügt einem Textfeld oder einem anderen Maus-gesteuerten Eintrag ein PopUp an.
Die Werte welche im Bedienfeld angezeigt werden sollen können einfach gesetzt werden, was es ermöglicht nur Nummern, ausländische Buschstaben usw. anzuzeigen.

Das Keypad kommt mit einer Vielzahl an Einstellmöglichkeiten. So ist z.B. das einblenden mittels “fade in” oder “slide down” möglich. Es gibt aber auch noch eine Menge andere Einstellungen wie z.B.:

• isRTL: Der Text wird vonrechts nach links dargestellt.
• clearText: entfernt alle Inhalte aus dem Textfeld.
• keypadClass:  Die CSS-Klasse mit welcher man einfach das aussehen des Keypads anpassen kann.
• uvm..

Ein einfaches Beispiel

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

$('#defaultKeypad').keypad();
 
$('#viewKeypad').click(function() {
    alert('The current value is: ' + $('#defaultKeypad').val());
});
 
$('#removeKeypad').toggle(function() {
        $(this).text('Re-attach');
        $('#defaultKeypad').keypad('destroy');
    },
    function() {
        $(this).text('Remove');
        $('#defaultKeypad').keypad();
    }
);

Alle weiteren Informationen, sowie Demos und die Dateien zum Download findet man auf der offiziellen Website, in der Dokumentation oder auf der Projekt-Seite bei jQuery direkt.

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.

jQuery Übersetzungs-Plugin SundayMorning

Gestern bin ich auf ein neues nettes Plugin für jQuery gestoßen.
SundayMorning, ein jQuery Plugin welches es den Besuchern einer Seite erlaubt ihre Inhalte (Strings oder DOM-Objekte) einfach, per Klick, in mehr als 30 Sprachen zu übersetzen.

SundayMorning nutzt dafür die Google translate API.
Die Übersetzung  lässt sich auf einzelne Worte, auf ganze Sätze per Menu für verschieden Sprachen oder per Event ausführen. Das Ganze ist auch als Bookmarklet verfügbar.

Ein einfaches Beispiel:

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

//Der Aufruf
´$.sundayMorning('bonjour', {
    source:'fr',
    destination:'en'
}, function(response) {
    alert(response.translation);
});
 
//Das Ergebniss als Objekt
response = {
    translation: 'hello',
    source: 'fr',
    destination: 'en'
}

Die Schwachstelle des ganzen wird wohl die Genauigkeit von Googles Übersetzung sein.
Eine Demo, sowie mehr Informationen und die Dateien zum Download findet man auf der offiziellen Website.

jQuery Debugger

Beim Entwickeln von Prgrammcode ist ein tieferer Blick in die Objektstruktur oft unabdingbar. Ein guter Debugger kann einem stundenlanges suchen nach Fehlern ersparen. Deshalb will ich kurz einen jQuery Debugger vorstellen. Downloaden könnt ihr ihn euch als jQuery Plugin auf: jQuery Debugger
Nachdem das Plugin eingebunden ist (ganz normal mit script-Tag und src-Attribut), könnt ihr es mit folgendem Code aufrufen:

1
2
3

var debuggen = new jQuery.debug();
// ...
debuggen.dump(Object);

Nun noch ein kleines Beispiel dazu:

1

<input name="LieferName"  value="" class="validate['required','length[6,-1]']" type="text" id="LieferName" />

Der Code um sich das Objekt näher anzuschauen kann wie folgt aussehen:

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

debug = new jQuery.debug({
	posTo : { x:'right', y:'bottom' },
	width: '480px',
	height: '50%',
	itemDivider : '<hr>',
	listDOM : [ 'tagName','id', 'innerText', 'href','value' ]
	});
 
function showMeDebug(){
  var input = $('LieferName');
  debug.dump(input);
}

Hier würde jetzt nach Aufruf der Funktion showMeDebug auf der unteren rechten Seite des Bildschirms eine Box, in der alle alle Attribute des “listDOM” für das Objekt “input” stehen, angezeigt.
Für ein Formularfeld ist diese Funktion nur teilweise interessant. Sinnvoller ist der Einsatz des Debuggers für komplexe Objekte vor allem natürlich Klasseninstanzen.

Zu beachten ist, dass vor “debug = new jQuery.debug” u. U. die “var” Deklaration von JavaScript stehen und “jQuery” durch $ ersetzt werden muss. Obiges Skript wurde im noConflict Mode von jQuery ausgeführt.

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.

MooTools removeClass Problem

Hi,

am Wochenende habe ich ein paar verzweifelte Versuche unternommen eine CSS Klasse eines Inputfeldes mit der Methode Objekt.removeClass(“CSSKLASSE”) zu entfernen.
Nach langem ergebnislosem Suchen im Netz und durchstöbern der Doku, ließ sich auch nicht herausfinden warum es nicht funktionierte, zumal die Funktion addClass keinerlei Probleme machte.

Am Ende habe ich einen ganzen einfachen Weg gefunden, das Ganze zum laufen zu bringen. Ich sag mal, fast schon zu einfach um sofort darauf zu kommen.
Hier mein Workaround:

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

//Mittels Selektor eigenes Skriptobjekt erzeugen	
var input = $('LieferName');
 
//Ausblenden eines DIVs, danach sollte das Validierungsskript durch entfernen des CSS deaktiviert werden. Reiner JavaScript Syntax, man hätte auch Mootools Code dafür verwenden können..
document.getElementById('liefer').style.display='none';
 
//Folgende Funktion blieb immer ergebnislos
//input.removeClass('validate[\'required\',\'length[6,-1]\']'); 
 
//Workaround, einfach direkt das Objektattribut als einen leeren String definieren
input.className = "";
 
//Änderungen dem Validierungsskript bekannt machen
myCheck.register(input);

Damit läßt sich nun auf den gängigen Browsern eine CSS Klasse einfach zur Laufzeit entfernen.

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.

Selektoren in jQuery

Ich möchte eine Serie starten in der Stück für Stück der Umgang mit jQuery seinen Elementen, Selektoren, Plugins, etc. beschrieben wird. Beginnen werde ich mit einer Beschreibung der verschiedenen Selektoren..

Grundlegende Selektoren

• $(‘code’)
• $(‘#someID’)
• $(‘.someClass’)
• $(‘*’)

1

XXX.css("border","3px solid red");

Für XXX wird einfach einer der obigen Selektoren eingesetzt. Besonders ist die Form mit *, die auf alle Elemente in dem Dokument angewendet wird.

Einfache Filter Funktionen

• $(‘li:first’)
• $(‘li:last’)
• $(‘li:not(li:first)’)
• $(‘li:even’)
• $(‘li:odd’)

Diese Selektoren wählen Elemente unter einer bestimmten Bedinung aus. “li-first” z.B. ist eine Referenz auf das erste Objekt einer ungeordneten Liste. “li:not(li:first)” gibt Referenzen auf alle Listenpunkte ausser dem ersten aus und erlaubt eine gewünschte Manipulation dieser Objekte.

1

$("tr:even").css("background-color", "#bbbbff");

Dieser Code würde in einer Tabelle für jeden geradzahligen Index die Hintergrundfarbe mittels der CSS Eigenschaft auf einen neuen Farbton ändern.

Content Filter

• $(‘li:contains(‘stringXXX’)')
• $(‘:empty’)
• $(‘li:has(a)’)
• $(‘p:parent’)

“contains” würde hier alle ListenElemente verändern in denen die Stringphrase “stringXXX” vorkommt.
“empty” prüft alle Elemente darauf ob ein Kindknoten im DOM-Baum vorhanden ist. Auch ein einfacher Text in ein p-Tag würde nicht zurückgegeben werden.

1

$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');

Visibility Filter

• $(‘:hidden’)
• $(‘:visible’)

Siehe dazu: 3-einfache-tips-fur-die-anpassung-auf-jquery-1.3

Attribut Filter

• $(‘li[class]‘)
• $(‘a[rel="self"]‘)
• $(‘[class^="my"]‘)
• $(‘a[title$="blog"]‘)

Eine interessante Möglichkeit ist das Filtern von Elementen anhand eines Attributes. “li[class]” spricht das oder die Element(e) an, die eine Attribut class besitzen.
“a[rel="self"]” zeigt auf Elemente von link Tags, welche im Attribut “rel” den Wert “self” besitzen.
Der dritte Listepunkt zeigt auf alle Knotenelemente die bei ihrem class Attribut mit “my” beginnen.
Der letzte Punkt stellt eine Möglichkeit dar, nach Elementen zu suchen, die am ende eines Attributes ein bestimmten String als Wert besitzen.

1

$("input[class^='my']").val("news here!");

Formulare

• $(‘:input’)
• $(‘:text’)
• $(‘:radio’)
• $(‘:checkbox’)
• $(‘:submit’)
• $(‘:image’)
• …

Hiermit lassen sich in HTML spezifizierten Formen von Formularfeldern ansprechen.

Formular Filter

• $(‘input:enabled’)
• $(‘:disabled’)
• $(‘:checked’)
• $(‘:selected’)

Mit diesen Filtern lassen sich abgeleitet von verschiedenen Eigenschaften der Formularfelder Elemente referenzieren. Also kann mit können mithilfe obiger Selektoren beispielsweise alle Felder die derzeit die Eigenschaft disabled besitzen ansprechen und manipulieren.

1

$("input:disabled").val("this is it");

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.

3 einfache Tips für die Anpassung auf jQuery 1.3

Vor ein paar Monaten erschien der jQuery Realease 1.3. Viele Skripts, die auf den vorherigen Versionen basierten laufen immernoch anständig. Aber hier und da treten doch Probleme beim Upgrade auf. Diese Probleme lassen sich nach Karl Swedberg in 3 Ebenen klassifizieren:

1. Update des “Selector” Attributes

Der wohl am häufigsten auftretende Fehler entsteht durch die redefinition des Selectors auf Attribute. In vorherigen Versionen wurden die Attribute eines Elements mit dem XPath Ausdruck “@Attribute” angesprochen und geändert. Ab 1.3 basiert das Ansprechen auf dem CSS Syntax. Hierzu ein kleines Beispiel:
Früherer Syntax:

1
2

   $('a[@href^=http]');
   $('[@title=foo]');

Aktuell in jQuery 1.3:

1
2

      $('a[href^=http]');
      $('[title=foo]');

2. Überprüfung eigener Selektoren

Werden eigene Selektoren benutzt, kommt es hin und wieder zu Fehlern wenn das zweite Argumente des neuen Objektes ein String ist.

1
2
3

      jQuery.extend(jQuery.expr[':'], {
        hasSiblings: "jQuery(a).siblings(m[3]).length>0"
      });

Das lässt sich einfach durch eine anonyme Javascript Funktion beheben die als return-Wert den String besitzt.

1
2
3

 jQuery.extend(jQuery.expr[':'], {
    hasSiblings: function(a,i,m) {return jQuery(a).siblings(m[3]).length>0;}
 });

3. Notation von auf “Hidden” oder “Visible” gesetzten Elementen

Wenn man vor der Version 1.3.2, ein Element mit der Eigenschaft “display:block” hatte, dass innerhalb eines anderen Elementes mit “display:none” lag, dann wurde das innere Elemente trotzdem bei Abfrage im Code als sichtbar ausgegeben.

1
2
3
4
5

<div id="outer1" style="display:none">
        <div id="inner1">
            Nicht sichtbares div
        </div>
      </div>

Vor der Version 1.3.2 hätte der Aufruf $(‘#inner’1).is(‘:visible’) zu return true geführt und $(‘#inner1:hidden’) hätte 0 Elemente zurückgegeben.

Ab 1.3.2 führt $(‘#inner’1).is(‘:visible’) zu dem Wert false und $(‘#inner:hidden’) findet 1 passendes Element.