Slideeffekt für Loginformular
Auf Wunsch hier also eine Anleitung für einen Mootools-Slideeffekt für das Loginformular, bei dem das Formular beim Aufrufen der Site nicht sichtbar ist und erst auf Klick "reinslidet".
1. Module anlegen:
Im ersten Schritt muss man das Login-Formular anlegen. Am besten gebt ihr dem Modul eine eindeutige ID, um es gezielt via CSS anzusprechen. In diesem Beispiel hat es die ID "loginform".
Dann braucht ihr noch einen Link, der, wenn er geklickt wird, das Loginformular sliden lässt. Ich benutze dafür das "Eigener HTML Code" Modul und gebe dem Modul die ID "btlogin":
HTML-Code:
<a id="btlogin" href="#">Login</a>
2. Beide Module in das Seitenlayout einbinden oder via Artikel an der entsprechenden Stelle ausgeben lassen. Ich packe das immer ganz oben in den header.
3. Im Seitenlayout als Mootools Template "moo_default" wählen (bin aber nicht sicher, ob das unbedingt notwendig ist, glaub aber schon) und in den Headbereich folgenden code eingeben:
HTML-Code:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
var mySlide = new Fx.Slide('loginform').hide();
$('btlogin').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
//--><!]]>
</script>
Natürlich können die IDs "loginform" und "btlogin" ausgetauscht werden und somit kann jedes x-beliebige Objekt "geslidet" werden. Das ".hide()" verhindert, dass das Loginformular beim Aufruf der Site offen ist. Erst beim Klick auf den Link mit der ID "bt_login" öffnet es sich und bei erneutem Klick auf den gleichen Link schliesst es sich wieder.
Wenn ihr lieber zwei Buttons haben wollt bei der der eine das Formular öffnet und der andere das Formular schliesst, dann müsst ihr zum einen einen weiteren Button mit einer eigenen ID (im folgenden Bsp "btclose") erstellen und dann im Head-Bereich zweimal den oben aufgeführten Code einfügen mit jeweils einer kleinen Änderung in der Zeile "mySlide.toggle();" Das kann dann so aussehen:
HTML-Code:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
var mySlide = new Fx.Slide('loginform').hide();
$('btlogin').addEvent('click', function(e){
e = new Event(e);
mySlide.slideIn();
e.stop();
});
var mySlide = new Fx.Slide('loginform').hide();
$('btclose').addEvent('click', function(e){
e = new Event(e);
mySlide.slideOut();
e.stop();
});
});
//--><!]]>
</script>
Jetzt slidet das Loginformular bei Klick auf den Link "btlogin" ein und bei Klick auf den link "btclose" wieder raus.
3. CSS anpassen.
Ihr werdet merken, dass das Loginformular den weiter unten folgenden Content einfach nach unten weg schiebt. Um das zu verhindern einfach via CSS ein position:absolute; und einen entsprechenden z-index hinzufügen um sicher zu gehen dass es über allem anderen Inhalt steht. Aber Achtung: Am besten im Template des Loginformulars noch ein DIV um das Div mit der ID "loginform" legen, und dem diese CSS Attribute zuweisen. Ansonsten funzt der Slideeffekt nicht.
So ich hoffe ich hab nix vergessen. Und wünsche allen, besonders aber Snaky, viel Spass damit.
Liste der Anhänge anzeigen (Anzahl: 1)
Mhh, soweit ich das beurteilen kann ... eigentlich schon
Liste der Anhänge anzeigen (Anzahl: 1)
Gefunden hab ich folgendes:
<script type="text/javascript" src="plugins/mootools/mootools.js"></script>
<script type="text/javascript" src="plugins/slimbox/js/slimbox.js"></script>
Ganz ist es das nicht ;-) Da ich fe_page geändert und umbenannt hab, hab ich den Eindruck, dass die Einstellungen des Dropdownmenüs in den Einstellungen dann gar keinen Effekt haben.
Jedoch hab ich nun mal in den Zielordner gesehen und der enthält diese beiden Dateien gar nicht.
Wo bekomme ich die her? Ist das bei mir dann ne ältere Version oder muss man die mootools zusätzlich installieren?
Hab TL 2.7
Siehe Bild
Fehlende Klammern im Beispiel-Code
Bei mir funktionierte das Beispiel ganz oben nicht und so habe ich mithilfe von Firebug herausgefunden, dass bei dem obigen Beispiel am Ende die schließenden Klammern fehlen. Es wird also nur ein Block geschlossen. Richtigerweise müsste es wie folgt aussehen. Dann funktioniert es zumindest bei mir:
HTML-Code:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
var mySlide = new Fx.Slide('loginform').hide();
$('hl_login').addEvent('click', function(e)
{
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
//--><!]]>
Hoffe, das hilft jemanden...
LG, h3lium
