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

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

Allgemein lässt sich zum Framework sagen, dass es damit auf relativ einfache Weise möglich ist moderne, flashähnliche Animationen zu bauen, das CSS zu ändern oder auch Content dynamisch via AJAX nachzuladen. Basis hiervon ist die Manipulation von DOM-Elementen über Selektoren. Man spricht einzelne Elemente im MooTools-Syntax an (quasi äquivalent zu document.getElementById) und nutzt die im Framework gegeben Funktionen um die Eigenschaften zu ändern.

MooTools ist eines der neueren Javascript-Frameworks, besitzt aber schon eine große Entwicklergemeinde und eine Menge von fertigen Komponenten zum Download.

Interessante Links für Einsteiger:

• Die offizielle MooTools Website
• Ein inoffizielles aber gut besuchtes MooTools Forum

Ähnliche Artikel

• 17. September 2009 -- Praxistipp – position absolute – parent height anpassen mit MooTools
• 28. Mai 2009 -- ScrollSpy – ein MooTools Plugin
• 18. Mai 2009 -- jQuery noConflict Mode