✔ MooTools Fx.Slide

E

Eosexperience

Grünschnabel
Mootools Fx.Slide - Keine Reaktion

Hallo!

Ich versuche seit Stunden einen ganz einfachen Slide Effekt mit Mootools zu realisieren (Fx.Slide()) und egal was ich mache: Es tut sich einfach nichts.

Ich habe sowohl den Demo Code von http://mootools.net/demos/?demo=Fx.Slide 1:1 kopiert als auch mit der Dokumentation und über tausende Foren und Beiträge im WWW nach einer Lösung gesucht, leider ohne Erfolg.

Scheinbar funktioniert bei allen exakt dieser Code (siehe unten), aber bei mir aus welchen Gründen auch immer nicht:

index.html
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>MooTools</title>
        
        <script type="text/javascript" src="mootools-core-1.3.2-full-compat.js"></script>
        <script type="text/javascript" src="slide.js"></script>
    </head>
    <body>
        <h1>Slide (on/off)</h1>
        <a id="v_toggle" href="#">Hier klicken</a>
        <div id="v_slide">
            Hier steht der ein-/auszublendende Text.<br />
            Nur es funktioniert leider nicht!
        </div>
    </body>
</html>

slide.js
Code: 
window.addEvent("domready", function() {
	var mySlide = new Fx.Slide("v_slide");
	
	$("v_toggle").addEvent("click", function(e){
		e = new Event(e);
		e.stop();
		mySlide.toggle();
	});
});

Woran kann es liegen, dass einfach nichts passiert?
Btw. wenn ich mit alert(1); suche bis wo der Code ausgeführt wird, geht das genau bis oberhalb von

Ausschnitt aus slide.js
Code: 
alert(1); //Wird ausgegeben
var mySlide = new Fx.Slide("v_slide");
alert(2); //Wird nicht mehr ausgegeben

Danach tut sich nichts mehr.
Was mich verwundert ist, dass der Code 1:1 mit unzähligen Bsp. aus dem WWW übereinstimmt, dort jedoch keine Probleme auftreten.

Da Mootools als Dokumententyp Stict verlangt habe ich sowohl XHTML 1.0 Strict als auch HTML 4.01 Strict versucht.

Beide JavaScript Dateien (mootools-core-1.3.2-full-compat.js und slide.js) liegen im selben Verzeichnis wie index.html.

Dreamweaver zeigt keine Fehler in der Syntax und Firebug gibt auch keine Infos die mir helfen.

Ich weiß nicht mehr weiter!

Vielen Dank schon mal für die Hilfe und schönen Abend!
Liebe Grüße,
Eosexperience
 
Zuletzt bearbeitet:
Hey Blady!

Omg. DAS ist es? So funktioniert es!
Ich glaub ich liebe dich! :D

Dass ich davon nirgendwo gelesen habe ...

Für alle, die genauso hilflos sind wie ich:
Für Fx.Slide unter http://mootools.net/more/ More und Fx.Slide anwählen und die generierte Datei zusätzlich einbinden.

index.html
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>MooTools</title>
        
        <script type="text/javascript" src="mootools-core-1.3.2-full-compat.js"></script>
        <script type="text/javascript" src="mootools-more-1.3.2.1.js"></script>
        <script type="text/javascript" src="slide.js"></script>
    </head>
    <body>
        <div>
            <h1>Slide (on/off)</h1>
            <a id="v_toggle" href="#">Hier klicken</a>
            <div id="v_slide">
                Hier steht der ein-/auszublendende Text.<br />
                Und dank Blady funktioniert es jetzt! Danke noch mal!
            </div>
    	</div>
    </body>
</html>

slide.js
Code: 
window.addEvent("domready", function() {
	var mySlide = new Fx.Slide("v_slide");
	
	$("v_toggle").addEvent("click", function(e){
		e = new Event(e);
		e.stop();
		mySlide.toggle();
	});
});

Vielen vielen Dank!
Liebe Grüße und schönes Wochenende!
 
Zuletzt bearbeitet:
Etwas ist mir noch eingefallen, weil es viel Leute im WWW suchen:

Soll der Teil (<div id="v_slide"></div> aus index.html im obenstehenden Bsp.), der mittels Fx.Slide ein-/ausgeblendet wird, beim laden der Seite automatisch ausgeblendet sein:

Einfach hide(); verwenden.

slide.js
Code: 
window.addEvent("domready", function() {
	var mySlide = new Fx.Slide("v_slide");
	
	mySlide.hide();
	
	$("v_toggle").addEvent("click", function(e){
		e = new Event(e);
		e.stop();
		mySlide.toggle();
	});
});

Dadurch wird dieser Bereich erst durch auslösen des "Triggers" (in meinem Fall ein Link <a id="v_toggle" href="#">Hier klicken</a>) mittels Fx.Slide eingeblendet.

Ich hoffe ich konnte damit auch dem einen oder anderen Helfen! :D
 
Nichts zu danken nur mootools weiter benutzen und weiter empfehlen. Wir mootools liebenden Leute müssen die community grösser machen :) Gruss und bis bald
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück