Sliding login/Signup panel using MooSlide (Mootools 1.2)
In my latest articles Show/hide a nice Login Panel using Mootools 1.2 and Add a show/hide login panel to your WordPress theme using Mootools, I explained how to add a nice sliding login form to your site (using Mootools 1.2).
Colin complained that the login panel was pushing the content down and asked if it would be possible to display it above all page elements. I replied that it would be possible to do so with MooSlide which uses Mootools 1.2. (Thanks to Frank from ArtViper for this excellent script).
This will be the topic of our tutorial today.
The end result:
Clicking a link will slide-in a login/register form in the middle of the page with a nice bouncing effect. Clicking the “close” button will make the panel disappear with a fade-out effect. I kept the code and styling simple for the sake of this tutorial. You can see a more fancy login form at the bottom.
Preview / Download
Grab a copy of this tutorial. It includes Mootools framework, MooSlideBox and all the images needed for this tutorial:
Note: For this tutorial, I have slightly modified the original javascript file (mooSlide2-moo12.js) so the login and signup panel can slide in the middle of the page. I have also removed some code to make it lighter. If you want to download the original version of MooSlide with all the functionalities, go here.
Step 1: Creating the HTML structure
Create a new HTML document and add the following code into it: (Click [+] to expand the code)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Show/hide Login and Signup Panel using MooSlide (Mootools 1.2)</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <!-- The main style sheet --> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <!-- Login Panel using MooSlide --> <div id="loginPanel" class="mooSlide"> <form class="left" action="#" method="post"> <h1 class="padlock">Member Login</h1> <label for="log"><b>Username: </b></label> <input type="text" name="log" id="log" value="" size="23" /> <label for="pwd"><b>Password:</b></label> <input type="password" name="pwd" id="pwd" size="23" /> <label><input class="rememberme" name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label> <input type="submit" name="submit" value="" class="button_login" /> <label><a href="#">Lost your password?</a></label> </form> <div class="sep"></div> <form class="right" action="#" method="post"> <h1>Not a Member? Sign Up!</h1> <label for="signup"><b>Username: </b></label> <input type="text" name="signup" id="signup" value="" size="23" /> <label for="email"><b>Email:</b></label> <input type="text" name="email" id="email" size="23" /> <input type="submit" name="submit" value="" class="button_register" /> </form> <div class="clearfix"></div> <!-- The close button --> <div class="loginClose"><a href="#" id="close"> </a></div> </div> <!-- / Login panel --> <div id="container"> <div id="content"> <a href="http://web-kreation.com" title="Web-Kreation"><img src="http://web-kreation.com/wp-content/themes/web-kreation_v2/images/logo.jpg" alt="Web-Kreation - Home" /></a> <!-- If javascript is disabled, display message below: --> <noscript><p style="color: red;">You must enable Javascript in you browser in order to try this demo.</p></noscript> <h1>Try the demo - Click "login" below:</h1> <!-- Below the link that will open the login/register form --> <p><a href="#" id="login"><b>Login</b></a></p> </div><!-- / content --> <div class="clearfix"></div> </div><!-- / container --> </body> </html> |
<div id="loginPanel" class="mooSlide">...</div> is our login panel. You can place it anywhere on the page, preferably after the <body> tag.
Step2: Styling our login form
Create a new CSS document and save it as mooslide.css. Add the following code into it to style our login panel: (Click [+] to expand the code):
/*MooSlide stylesheet*/ .mooSlide { background-color: #000000; padding: 25px 10px 10px; font-family: Arial, Helvetica, sans-serif; line-height: 1.2em; color: #FFFFFF; border: 1px solid #33CCCC; margin: 0 auto; text-align: left; font-size: 0.85em; width: 525px; /* width of our login panel */ } .mooSlide h1 { font-size: 1.6em; height: 20px; padding-top: 22px; color: white; } /* padlock icon from IconsPedia */ /* http://www.iconspedia.com/icon/padlocks-1464.html */ .mooSlide h1.padlock { background: url(images/padlock.jpg) no-repeat 0 0; padding-left: 35px; } a { text-decoration: none; color: #33CCCC; } a:hover { color: white; } .mooSlide form { margin: 0 0 10px 0; height: 26px; } .mooSlide label { float: left; padding-top: 8px; clear: both; width: 180px; display: block; } .mooSlide .left { width: 200px; float: left; padding-left: 25px; } .mooSlide .right { width: 270px; float: left; padding-left: 25px; } .mooSlide .sep { width: 1px; height: 180px; margin-top: 25px; float: left; border-right: 1px solid #333; } .mooSlide input { border: 1px #1A1A1A solid; background: #464646; margin-right: 5px; margin-top: 4px; color: white; height: 16px; float: left; clear: both; display: block; } .mooSlide input:focus { background: #545454; } .mooSlide input.rememberme { border: none; background: transparent; margin: 0; padding: 0; } .mooSlide input.button_login { width: 82px; height: 20px; cursor: pointer; border: none; margin-top: 10px; background: transparent url(images/button_login.jpg) no-repeat 0 0; } .mooSlide input.button_register { width: 82px; height: 20px; cursor: pointer; border: none; margin-top: 10px; background: transparent url(images/button_register.jpg) no-repeat 0 0; } .mooSlide .loginClose { display: block; position: absolute; right: 20px; top: 10px; width: 26px; } .mooSlide .loginClose a { display: block; width: 100%; height: 26px; background: url(images/button_close.jpg) no-repeat right 0; padding-right: 10px; border: none; font-size: 0.9em; color: white; } .mooSlide .loginClose a:hover { background: url(images/button_close.jpg) no-repeat right -26px; } |
Step 3: Linking the files together
Link to the stylesheet and to the Javascript files into the <head> section of your HTML document:
<head> ... <link rel="stylesheet" href="mooslide.css" type="text/css" media="screen" /> <!-- Mootools - the core --> <script type="text/javascript" src="js/mootools12.js"></script> <!-- MooSlide --> <script type="text/javascript" src="js/mooSlide2-moo12.js"></script> </head> |
Step 4: Adding the Javascript effects
Now that we created our HTML and CSS, we will add into the <head> section of our HTML document the Javascript wich will toggle the login panel with some fancy effects (slide-in, fade-in and Bouncing effect):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <head> ... <script language="javascript" type="text/ecmascript"> window.addEvent('domready',function(){ var myLogin = new mooSlide2({ slideSpeed: 1500, fadeSpeed: 500, toggler:'login', content: 'loginPanel', height:250, close: false, effects:Fx.Transitions.Bounce.easeOut , from:'top'}); //optional: AutoStart the slider on page load: //MyLogin.run(); $('close').addEvent('click', function(e){ e = new Event(e); myLogin.clearit(); e.stop(); }); }); </script> </head> |
The first part (line 5 to 5) will create our panel. If you change “close:false” to “close:true”, the login panel will close every time you click on it. We don’t want that! Otherwise you would not be able to fill the form!
The options:
- The slider DIV (content: ‘loginPanel’ –
<div id="loginPanel" class="mooSlide">...</div>). - The slide in speed (slideSpeed)
- The fade out speed (fadeSpeed)
- Close on click true / False (close: false)
- The height of the slider container (height:250)
- The width of the slider container (width:550)
- The type of effect used (see the mootools transitions effects here »)
- The toggler element (toggler:’login’ –
<a href="#" id="login">Login</a>) - Slide from (from:’top’ – I have removed the option from:’bottom’ in the MooSlide script to keep the code simple)
MyLogin.run();will autostart the slider on page load. I have disabled this option as we don’t want it to slide in on page load.
The second part of the code ($('close').addEvent('click', function(e){ ... }); – line 8 to 12) close the login panel when someone click the “close” button. The HTML code is <a href="#" id="close"></a>.
Final Note
That’s all. Upload the files to your server and try it!
If you want, you can style MooSlide to get a more fancy login form like in the example shown below.
This nice slide-in login form will work on any kind of site where you have a login/register form (blogs, forums, CMS…). If you would like to use this script with your WordPress theme, read this article to get started. The code is different but you will get the idea.
Links of Interest
MooSlideBox – The script used in this tutorial.
Build An Incredible Login Form With jQuery – from Nettuts.com.
Build a Toggling Announcement Slider Using MooTools 1.2 – David Walsh blog
Sexy Alert Box – Coders.me
The Author
Want to become a guest author on this blog?
Paco says:
18 Sep, 2008
J’aime ce genre de choses
!!!
Dommage que j’utilise pas Mootools :s
A+
ziczac says:
19 Sep, 2008
Thanks for that tut.
But I appreciate an inlay panel that moves the content (for that reason not bouncing). I’ll have a closer look on that.
wifsimster says:
20 Sep, 2008
Toujours aussi jolie, très belle adaptation de Mootools une fois de plus
Tadd says:
6 Nov, 2008
Implementing this in a WordPress site – going very well. Thanks for this code. Very well done.
andres says:
13 Dec, 2008
how to make work in social engine ?
Andrea says:
4 Jan, 2009
Any chance you could clarify implementation on a WordPress blog a little bit? I’m afraid my PHP coding skills are still rather light, so I’d like to make sure I’m making the correct changes to the code shown in the other tutorial before I try putting this into play.
Thanks for the great tutorials.
Tyrone Avnit says:
13 Jan, 2009
Love the stuff you are doing here. Very helpful!
Jubair Saidi says:
16 Jan, 2009
Great script!! been looking for this for a while!! but I do have a question..
How do I make it so when the close button is clicked, the login box slides back up. also I am assuming it’s possible with not much additional work to make multiple slide boxes say in the example that I would want 5 links at the top all of which when clicked, show this effect but if there is already a panel open, it would close it (slide up) and open the panel that that link is attached to..
any of that make sense?
Jeremie Tisseau says:
21 Jan, 2009
This slider was not designed to slide back up. In order to do so, you will have to write a few lines of code.
You can add as many sliders as you wish on your site. Check the official site for more info »
Jubair Saidi says:
26 Jan, 2009
I ended up going with JQuery because it seems a lot more UI customizable (or at least easier to work with). thanks though
Baur says:
1 Feb, 2009
How can I change toggler to make a variable?
toggler:”<?=’.$username.’?>”
<a href=”#” id=”‘.$username.’” >
it does not work
MissANN says:
3 Feb, 2009
Thank you so much for this one!! I really need this.. thank you so much! ^__^
prawin says:
20 Feb, 2009
How can we add a validation part to the above sliding login panel. so that how the alert box displays . can u explain it
Jeremie Tisseau says:
20 Feb, 2009
What do you mean?
Martha says:
12 Mar, 2009
It works beautifully on my site… that is, only after I removed my other MooTools 1.2 scripts.
I had ImageMenu and Remooz working fine, together on the same page.
Then, when I add the MooSlide code, it doesn’t work, but all my other MooTools DO.
Your MooSlide code suddenly began to work beautifully when I removed ImageMenu and Remoz. Actually, perfectly!
They’re conflicting and I’m hoping you’re familiar with this issue, and have an idea how to make the code on this post compatible with other Mootools 1.2 scripts.
FYI… here is a copy of the header file, in text format, for you to view, if you wish. http://tinyurl.com/b9yce3
Thanks!
Jeremie Tisseau says:
12 Mar, 2009
All your scripts run with Mootools 1.2? Normally they should not conflict unless Mooslide and one of your script use the same variable. in that case there would be conflict. You can try to rename them in mooSlide2-moo12.js.
Also, it could be because you link to Mootools 1.2 core a few times: /mooslide/js/mootools12.js, /imagemenu/mootools-1.2-core.js, /remooz/mootools12.js… This is just one and same file so it is better if you link to it only once (besides your page will load faster because your browser won’t have to load it 3 or 4 times!).
Try that and let us know.
Martha says:
12 Mar, 2009
Ahm… guess what?
Knowing full well I should try the simplest explanation first, I had tried everything else.
Then, as soon as I deleted the extra links for MooTools 1.2, they all worked perfectly together! I’m so happy
So the answer was to place your code, but delete the link for MooTools 1.2, *IF* it’s already been done by another MooTool 1.2 based JavaScript. Very simple.
That’s all I did, and that’s all it took
Yes, they’re all 1.2 based. So I’m surprised at the mess it created just by linking to it again.
Now they look so pretty and work so smoothly! Thanks!!!
Jeremie Tisseau says:
12 Mar, 2009
Gald to know it. When I saw you duplicated Mootools Core, I knew that would be your problem but we can never be sure before we test it.
ngmt says:
7 Apr, 2009
Hi, this is very nice, thanks for sharing!
Could you please tell me the source of the button you use in the example? Can I have a PSD of that?
Thank you!
santhosh says:
17 Apr, 2009
Hi, this is very nice, thanks for sharing!
i have only fading and fade out the div not moving the div top to bottom pls help me
Silver Firefly says:
18 Apr, 2009
Thanks for this tutorial. As usual I won’t use it unless there’s a way for non-Javascript users to be able to use the link. Fortunately I’ve thought of a way a non-Javascript user could still access the login form, and that is when they click on the login link, they can be taken to the login page instead of having the panel drop down on the page. Can I assume that you’ve already incorporated that?
ash says:
9 May, 2009
hi this is def the best tutorial, I love this effect. I was hoping you could help me. I would really like help with doing the same effect for the bottom, i just can t get it to work. we are starting a non-profit health awareness website for our online and local communities and we are trying to make it more user friendly and i was wondering if there is a tutorial to show the content slide in from bottom. I would really appreciate your help…you can email please @ nathfla@yahoo.com
Thank you so much
Jeremie Tisseau says:
12 May, 2009
Ash, please visit Artvipers site.
biboy says:
12 May, 2009
Hi, this is very nice, thanks for sharing!
i have a problem with ur appllication.
i want to define new location “login form” (default is Slide from (from:’top’ – I have removed the option from:’bottom’ in the MooSlide script to keep the code simple) )
i want to make new location of it about file CSS (margin; padding) or another, other example of u.
u can send my mail : ooo_biboy_ooo@yahoo.com
thanx u so much.
abe says:
29 May, 2009
what if i want it to come down on pageload? i removed the comment tags and it wont work. Was it removed from the mootools script? If anyone can help, i would greatly appreciate it.
thanks
francis says:
3 Aug, 2009
Just fantastic.
francis says:
3 Aug, 2009
how can i make loadExternal: work?
francis says:
8 Aug, 2009
can you please help?
nitin says:
13 Aug, 2009
behaves strangely when we put the userid and password — doesnt give any sign of — weather i am logged in or not…
Also.. if the same “login” link appears on the page.. even after the user has logged in.. i dont agree this as a good option….
Help me know if you have the complete login/logout code..
fbli says:
20 Aug, 2009
Thats Good Thanks Very Much..
Ian says:
29 Oct, 2009
Im trying to use three separate panels on the same page.
But the panel listed first drops down behind the later two.
So panel #1 drops down behind #2 and #3. Panel #2 drops down in front of #1 and behind #3, and so on.
Any ideas?
Also is it possible to have the panels slide in from the right side?
Jeremie Tisseau says:
29 Oct, 2009
Read this comment. Maybe it will help you find out a solution to your problem. You can see a demo here.
To slide panel from right or left, check this demo from Mootools and the documentation about horizontal slide can be found here.
Mandar H says:
12 Nov, 2009
Hey,
thanx for this nice tutorial.
atually i want it onload…. can u help me…. i’ve tried MyLogin.run() mentioned here but im not that gud i guess…. so can u giv me whole javascript code rather than giving just that hint?
Thank u
Holger. H says:
16 Feb, 2010
Thanks…. very nice styled
I was wondering is it possible to make the slider stay open (on submitting/validation) while som server-side-script is working, sending ok back and the close the panel
Julie says:
17 Feb, 2010
I love this tutorial thanks.
However, like others that have posted comments, I too am having issues getting it to open onload including changing it from “MyLogin.run();” to “myLogin.run();” – lowercase m
But nothing seems to work
Any advice?
munir says:
1 Apr, 2010
nice thing
Jean says:
23 Apr, 2010
Well thnks a lot! but well i’m having problems T.T, i wanna get 2 panel, first is login panel & the second is a form panel to get register users, but on second panel event close is not working, & i wanna validate fields on my second panel, i wish get a little help plz
grace says:
21 May, 2010
Has anyone figured out how to make this work on page load? Removing the // in front of “MyLogin.run();” in not working.