Problem mit Mootools Fx.Morph

**cdash** · 17.12.2011 16:47

Hallo,

Da ich bis heute kein Mootools Forum gefunden habe probiere ich es hier einmal (es wird immerhing eine Joomla Seite).

Ich habe mehrer große Flächen bei denen auf Mouseover mehrere Styles verändert werden sollen. Hier versuche ich die Position einer H3 zu verändern. Mit set.Style funktioniert das problemlos. Mit Fx.Morph nicht. Wenn ich statt des getElements('h3') eine id nehme funktioniert es auch. Irgendwie funktioniert nur die Kombination nicht. Vielleicht findet sich ja hier ein Mootools Crack der mir da weiter helfen kann.

Code:

document.addEvent( 'domready', function(){
	//
	var btns = $$('.deeplink_akustik, .deeplink_optik, .deeplink_uhren_schmuck');
	// alert(btns.length);
	
	btns[0].addEvents({
	    'mouseenter': function(){
	  		var deeplinkText = this.getElements('h3');
	    	deeplinkText.setStyle('top', '50px');
			var myEffect = new Fx.Morph(deeplinkText, {
		    duration: 500,
		    transition: Fx.Transitions.Sine.easeOut
			});
			 
			myEffect.start({
		    'top': '50px',
			});
			alert(deeplinkText);
	    }
	   })

}
)

**bembelimen** · 17.12.2011 17:27

Prinzipiell kannst du mit windows.console.debug(...) alles Mögliche an den Firebug ausgeben (Objekte, Strings, Arrays...) und dort genauer betrachten (das mal am Rande).

Schau dir mal die Doku, insbesonders den Rückgabewert an...der ist nämlich ein Array. Du brauchst eher getElement um direkt damit arbeiten zu können.

Zusätzlich ist dein Code nicht wirklich robust. Da solltest du dir evtl. noch ein paar Gedanken über Fehlerabfangen etc. machen.

Code:

document.addEvent( 'domready', function(){

    var btns = $$('.deeplink_akustik, .deeplink_optik, .deeplink_uhren_schmuck');

    btns.each(function(elem) {

        elem.addEvent('mouseenter', function(e) {

            var h3s = elem.getElements('h3');

            h3s.each(function(h3) {
                h3.set('morph', {transition: 'ease:out'});
                h3.morph({'top': 50});
            });
        });
    });
};

Dein Problem dürfte evtl. auch gewesen sein, dass du per setStyle schon auf 50px alles gesetzt hast und dann nichts mehr zum morphen da war.

**cdash** · 17.12.2011 17:46

Vielen Dank,

dass ging ja super schnell. An dem setStyle hat es nicht gelegen - das habe ich dann schon auskommentiert. Aber am s hinter setElement. Danke.

Vielen Dank auch für das Feedback bezüglich Robustheit meines Codes. Ich habe relativ wenig Erfahrung mit Scriptsprachen - was ist z.B. nicht so robust. Nur mal so um mich weiter zu entwickeln.

Ach so - an welcher Stelle und wie müsste ich windows.console.debug(...) eingeben. Ich nutze Firebug super viel, aber nur für CSS.

Danke

Andreas

**bembelimen** · 17.12.2011 18:03

Zitat von cdash

Vielen Dank auch für das Feedback bezüglich Robustheit meines Codes. Ich habe relativ wenig Erfahrung mit Scriptsprachen - was ist z.B. nicht so robust. Nur mal so um mich weiter zu entwickeln.

Du greifst z.B. direkt auf btns[0] drauf zu ohne zu testen ob btns überhaupt ein Array mit Werten ist. Falls irgendwann mal es passieren kann, dass das kein Array ist, dann dürfte dein komplettes Javascript auf der Seite nicht mehr funktionieren. if(btns.length) { .... }. So Zeugs könnte man auch mit try/catch abfangen etc.

Zitat von cdash

Ach so - an welcher Stelle und wie müsste ich windows.console.debug(...) eingeben. Ich nutze Firebug super viel, aber nur für CSS.

Bei Firebug gibt es den Reiter "Konsole", da stehen erstmals alle Fehlermeldungen, wenn was im Code schief geht. Zusätzlich kannst du mit dem oben erwähnten Befehl auch direkt Javascriptobjekte etc. auf die Konsole ausgeben. Also im Prinzip das was du mit "alert" versucht...nur in besser

Einfach mal ausprobieren.

Thema: Problem mit Mootools Fx.Morph

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

Problem mit Mootools Fx.Morph

Erhielt Danksagungen von:

Stichworte

Lesezeichen

Lesezeichen

Berechtigungen