Da für die Seite MooTools im Einsatz ist hab ich das ganze mit folgenden 2 Zeilen code gelöst:

1
2

var height = new Number($$('#content').getStyle('height').map(function(it){ return it.toInt();}));
$$('#container').setStyle('height', height + 420);

wobei +420 die Höhe des oberen Bereichs (Header, Navi, Newsblock) darstellt.
Liest man mit MooTools getStyle(‘height’) die Höhe des Containers aus so bekommt man z.b. 800px raus, daher wird die Funktion toInt() benötigt welche aus diesem String die Number 800 macht.

Ähnliche Artikel

• 16. Oktober 2009 -- Praxistipp – jqTransform width bug
• 5. August 2009 -- Tipp! Den gleichen Selektor nicht mehrmals aufrufen
• 5. August 2009 -- Tipp! – Highlighten eins li´s innerhalb einer Liste mit jQuery

Es gibt verschiedene Demos auf der Seite, vom einfachen einblenden eines “Top-Page” Ankers, über Farbenwechsel der Hintergrunds bis zum ein- und ausblenden von Bildern während des scrollens.
Ein echt netter Eye-Catcher..

Ein kleines Beispiel:

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

window.addEvent('domready',function() {
	/* smooth */
	new SmoothScroll({duration:500});
 
	/* link management */
	$('gototop').set('opacity','0').setStyle('display','block');
 
	/* scrollspy instance */
	var ss = new ScrollSpy({
		min: 200,
		onEnter: function(position,state,enters) {
			$('gototop').fade('in');
		},
		onLeave: function(position,state,leaves) {
			$('gototop').fade('out');
		},
		container: window
	});
});

Der Code ist nicht ganz intuitiv und etwas CSS wird auch noch benötigt, aber nach dem Anschauen der Beispiele wird schnell alles klar.

Ähnliche Artikel

• 17. September 2009 -- Praxistipp – position absolute – parent height anpassen mit MooTools
• 18. Mai 2009 -- jQuery noConflict Mode
• 16. Mai 2009 -- jQuery Formulare validieren – Ein Überblick

Die beiden Kerne einbinden bringt uns aber noch nicht ganz zum Ziel. jQuery bietet hierfür den noConflict-Mode an. Diese wird nach einbinden der Bibliothek aufgerufen und sorgt dafür, das jQuery unter einem anderen Namespace ansprechbar ist.

Ein Beispiel:

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

<script type="text/javascript" src="_js/mootools-release-1.1.2.js"></script>
<script type="text/javascript" src="_js/jquery.js"></script>
 
//domready-event von mootools 
window.addEvent('domready', function() {
    //jQuery Syntax zum Ansprechen eines Elementes
    var jq = $('#someid');
    alert(jq.attr('class')) ;
 
   //mootools
    var moot = $('moot');
    alert(moot.getProperty('class')) ;
 
});

Dieses Skript wirft bei installiertem Firebug nun ein Fehler. Javascript kann das $-Zeichen nicht referenzieren und findet in obigem Fall die Methode “attr” nicht. Nun kommt der noConflict-Mode ins Spiel.

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

<script type="text/javascript" src="_js/mootools-release-1.1.2.js"></script>
<script type="text/javascript" src="_js/jquery.js"></script> 
<script>
     jQuery.noConflict();
 
//domready-event von mootools 
window.addEvent('domready', function() {
    //jQuery Syntax zum Ansprechen eines Elementes
    var jq = jQuery('#someid');
    alert(jq.attr('class')) ;
 
   //mootools
    var moot = $('moot');
    alert(moot.getProperty('class')) ;
 
});
 </script>

Will man nun über jQuery ein Element ansprechen ersetzt man das “$” durch “jQuery” und behält für MooTools den $-Syntax bei. Ein friedliche Koexistenz.
Auf diese Weise lässt sich jQuery mit sogut wie jedem anderen Framework benutzen. Leider gehört jQuery zu den wenigen Frameworks die einen solchen Modus besitzen. Möchte man bspw. Prototype in Verbindung mit MooTools einsetzen gibt es keine Option dieser Art.

Ähnliche Artikel

• 12. November 2009 -- jQuery Präsentationen für ein besseres Verständnis
• 27. Juli 2009 -- jQuery Tutorial – Closing an Accordion automatically
• 30. Juni 2009 -- jQuery myPass – password hiding iPhone-Style

Heute wollen wir mit Teil 1 – “Übersicht über aktuelle Form-Validaton Scripts” beginnen.
Da es zahlreiche dieser Scripts gibt, und diese sich Teilweise nur minimal voneinander unterscheiden da sie meist auf dem bassistance-Plugin von Jörn Zaefferer basieren, werden wir versuchen euch hier nur die vorzustellen welche besonders im Bezug auf Funktionalität, Größe oder Einfachheit der Implementierung sind.

Beim validation Plugin von bassistance kann man wohl vom offiziellen validation Plugin von jQuery sprechen. Dieses Plugin lässt nahezu keine Wünsche offen.
Das Plugin ist, für die vielzahl an Möglichkeiten die es bietet, mit nur 24KB in der minified-Version nicht sonderlich groß. Es ist ab jQuery 1.2.6+ verfügbar und kompatibel mit Version 1.3.2.

Es bietet alle nur erdenklichen Arten der Formular Überprüfung.

• Validierung on the fly (beim Wechsel in das nächste Feld), validieren auf submit, validieren von Textfeldern, Textareas, radiobuttons und checkboxen.
• Es besteht z.B. auch die Möglichkeit diese in Abhängigkeit voneinander zu prüfen. Bei einer Gruppe von checkboxen kann z.b. geprüft werden wieviele ausgewählt sein müssen usw.
• Auch das prüfen von Selects und multiple-Selects ist ohne weiteres möglich.
• Eingaben können auf Länge, Typ (E-Mail, Number, String…), Anzahl der gewählten Elemente usw. validiert werden.
• Die Ausgabe der Error-Messages ist sehr flexibel gehalten. So können diese direkt am entsprechenden Formular-Element oder gesammelt, z.B. in einem div, ausgegeben werden. Ändert der User eine fehlerhafte Eingabe reagiert die Validierung und ändert die Error-Messages on the fly.
• Mit dem Plugin können richtig ausgefüllte Formulare, auf submit, auch direkt per AJAX verarbeitet werden.

Das einbinden des Scripts ist auch denkbar einfach.

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

$().ready(function() {
	$("#FormularID").validate({
		rules: {
			firstname: "required",
			lastname: "required",
			username: {
				required: true,
				minlength: 2
			},
			password: {
				required: true,
				minlength: 5
			},
			confirm_password: {
				required: true,
				minlength: 5,
				equalTo: "#password"
			}
	});
});

Nun müsst ihr nur noch euren Formular-Elementen die entsprechende ID geben.

Eine Vielzahl von Demos und die Dateien zum Download findet ihr auf der offiziellen Website.

Bei jVal handelt sich um eines der etwas schöneren Validation-Plugins.
Das Plugin funktioniert mit der aktuellen jQuery-Version 1.3.1 und hat nur 5.3KB.
Die Grundfunktionen des Plugins kurz im Überblick:

• Validieren von Inhalten innerhalb eines bestimmten Containers, basierend auf den Attributen des Input-Tags.
• Einfache Konfiguration der Validierungsmöglichkeiten.
• Validierung aller Formular-Felder innerhalb eines Containers mit einem einzigen Funktionsaufrufs.
• Validierung einzelner Formular-Felder wenn der User das Feld verlässt.
• Verhindern der Eingabe von speziellen Zeichen in ein Feld mit Meldung an den User das dies nicht erlaubt ist.

Das besondere an diesem Plugin ist wohl die animierte Ausgabe der Fehlermeldungen. Diese sliden mit einem Blur vom Feldende aus ein.

Für das Plugin werden neben der jVal.js und der jquery.js noch ein jVal.css sowie jquery.corner.js von Dave Methvin benötigt. Mittels des sehr übersichtlichen css-Files lässt sich das Aussehen der Error-Messages ohne Probleme anpassen.

Das implementieren des Plugins ist, wie ich finde, nicht ganz optimal gelöst. Hat man sich jedoch erst einmal damit vertraut gemacht geht es doch reicht einfach von der Hand.
Die übergabe der Parameter findet, im Gegensatz zu den meisten anderen Plugins, nicht zentral statt sondern muss jedem Formular-Element mitgegeben werden.

1

<input id="f1" size="20" type="text" />

AlphaNumeric von Paulo Marinas ist ein validation-Plugin welches sich speziell der Begrenzung der Eingabe widmet. AlphaNumeric baut auf dem Numeric Plugin von Sam Collet auf, welches nur die Eingabe von Zahlen und Punkten erlaubt.
Mit AlphaNumeric habt ihr die Möglichkeit die Eingaben in Formularfelder so zu Filtern das nur bestimmte Typen eingegeben werden können.
Die Grundfunktionen des Plugins kurz im Überblick:

• Begrenzung der Eingabe ausschließlich auf Buchstaben
• Begrenzung der Eingabe ausschließelich auf Zahlen
• Begrenzung der Eingabe auf Zahlen und Buchstaben (keine Satz oder Sonderzeichen)
• Erstellen eigener Regeln für die Eingabe

Ein sehr nützliches Plugin wenn man die volle Kontrolle über seine Felder haben will.
Ein einfaches Beispiel für die Implementierung:

1
2

$('.klasse1').alphanumeric();
$('.klasse2').alphanumeric({allow:"., "});

dann müsst Ihr nur noch euren Textfelder die entsprechende Klasse zuweisen und das war es schon.

1
2

<input class="klasse1 tb" size="10" type="text" />
<input class="klasse2 tb" size="10" type="text" />

Alle Dateien zum Download sowie Demos findet ihr auf der offiziellen Website.

Der Form Validator von Jeremy Fry überzeugt aufgrund seiner Schlicht- und Schönheit. Zudem ist er extrem einfach zu implementieren. Das Plugin hat nur 5KB und läuft mit jQuery 1.3.2

Formularfelder werden on the fly validiert und werden, je nach Eingabe, “grün” oder “rot” umrahmt.
Zusätzlich kann man direkt angeben welche php-Datei zur Verarbeitung aufgrufen werden soll.
Sind alle Eingaben valide und klickt man auf Submit, so fadet das Formular aus und verarbeitet die Eingaben via AJAX und gibt das Ergebniss zurück.
Speziell validiert werden können E-Mailadressen, Telefonnummern, Postleitzahlen, Namen und Datumseingaben.
Das zugehörige CSS ist sehr übersichtlich und kann problemlos angepasst werden.

Ein einfaches Beispiel für die Implementierung:

1
2
3
4
5
6
7
8

$(document).ready(function ()
{
	$('#myform').FormValidate({
		phpFile:"send.php",
		ajax:true,
		validCheck: false
	});
});

Anschließend nur noch euren Textfeldern die entsprechnden Klassen zuweisen.

1
2

<input id="form_name" class="is_required" name="Name" type="text" />
<input id="form_email" class="vemail" name="Email" type="text" />

Eine Demo sowie alle Dateien zum Download findet Ihr auf der offiziellen Website.

• Einfache jQuery form validaton mit JSON return
• jQuery Formular zum Filtern versch. Eingaben
• Formular-Validierung mit jQuery und AJAX
• Einfaches jQuery (AJAX) Formular mit PHP-Validierung
• Formular Eingaben mit jQuery maskieren
• jQuery Validierung customizen

Der Vollständigkeit wegen sollt hier auch noch das Form Plugin von Malsup erwähnt werden, welches sicher eines der, wenn nicht dass, umfangreichsten Formular Plugins für jQuery ist. Welches unteranderem auch validierungs Möglichkeiten bietet. Dieses Plugin werden wir euch in Teil 4 “Übersicht über aktuelle jQuery-Plugins zum verarbeiten von Formulardaten per AJAX” näher vorstellen werden.

Sollte der ein oder andere von euch der Meinung sein wir hätten ein wirklich relevantes Plugin vergessen freuen wir uns immer über Kommentare oder eine E-Mail.

Auch wenn es in diesem Post eigentlich um Formulare mit jQuery geht möchte ich euch noch kurz ein validation-Script für MooTools vorstellen.
MooTools.Floor FormCheck. Dieses Plugin ist meiner Meinung nach eines der schönsten validierungs-Plugins die es moment gibt und ist unsere erste Wahl bei Projekten in denen wir MooTools nutzen.

Das Plugin beherrscht alle gänigen validierungs-Formen hat aber ein paar schöne Besonderheiten.
So erscheinen die Fehlermeldungen schön in Form von Tooltips am Formularelement.
Ausserdem slided das Plugin, auf Submit, die Seite an die Stelle an welcher der Fehler angezeigt wird.
Das ganze könnt ihr euch in dieser Demo anschauen.

Verpasst nicht die Folgeteile dieser Serie und aboniert unser RSS-Feed.

• Teil 1: Übersicht über aktuelle Form-Validaton Scripts.

Ähnliche Artikel

• 12. August 2009 -- jQuery Form Plugin – Do some AJAX magic easily
• 16. Mai 2009 -- Formulare mit jQuery – die umfassende Serie
• 17. September 2009 -- jCryption – HTML-Form Encryption Plugin

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
• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2
• 20. Oktober 2009 -- Praxistipp: jqTransform Button width einstellen

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)
• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2

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

Ähnliche Artikel

• 17. September 2009 -- Praxistipp – position absolute – parent height anpassen mit MooTools
• 25. Juni 2009 -- jQueryList – Plugin und Beispielsammlung
• 18. Mai 2009 -- jQuery noConflict Mode

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
• 17. September 2009 -- Praxistipp – position absolute – parent height anpassen mit MooTools
• 2. Juni 2009 -- Droplist Filter Plugin – Dropdown´s durchsuchen

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.

Ähnliche Artikel

• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2
• 17. September 2009 -- Praxistipp – position absolute – parent height anpassen mit MooTools
• 24. Juni 2009 -- ifixpng2 & pngFix – Transparenz für den IE6

MooTools – Ein Überblick mit Aaron Newton

jQuery – Ein Überblick mit John Resig

Ähnliche Artikel

• 20. Juli 2010 -- jMediaelement – jQuery HTML5 Audio-Video Kit
• 30. Mai 2009 -- jYouTube – jQuery YouTube thumbnail plugin
• 18. Mai 2009 -- jQuery noConflict Mode