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)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <!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):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | /*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:
1 2 3 4 5 6 7 8 9 10 | <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.
vincent says:
9 Jun, 2011
Hey, Been trying to implement this into my wordpress theme but cant get it to work. any chance you could share how you implemented this into wp??
Jeeremie says:
13 Jun, 2011
Have you followed this tutorial: Add a show/hide login panel to your WordPress theme using Mootools
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.
Steven Mirabito says:
29 Aug, 2010
“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.”
Could you please re-enable it so that those who do want to use it can? For instance, I want the panel to drop down when I pass login=1 in the query string, but I can t do that without this function.
I have noticed that you have also removed the required code from the mooSlide2-moo12.js, which would answer the comments above.
Thanks!
arif naifira says:
3 Dec, 2010
i like this ..
thanks very much
JEET says:
2 Feb, 2011
Thanks a lot Keeep it up!!!!!!!
Santosh says:
13 Feb, 2011
Many Many Thanks for sharing this. I ve been searching for this for a week now
Thierry says:
14 May, 2011
Bonsoir,
J utilise le sliding login qui me plait bien ^^ cela fonctionne nickel sur firefox 4 (et inferieur) Opera et ie < 9 d'o ma question sur IE9 au clique il ne se passe rien.. D'habitude je cherche par moi-m me mais la je ne vois pas trop ce qui pourrait faire qu'au clique l v nement se d clenche, l'avez-vous essayer depuis sur ie9 ? Merci d'avance
Thierry says:
14 May, 2011
Finalement sa fonctionne maintenant j ai pas trop compris mais bon merci d effacer mon msg pr c dent et merci pour se superbe formulaire ^^
arifian says:
19 May, 2011
wow!! perfect
i like this
MyBB says:
20 Jul, 2011
Thanks Very Much..
Rajeesh Nair says:
26 Aug, 2011
Gr8 work..
Thanks a lot
Panel that i searching for long time
Thanks
jen says:
14 Nov, 2011
im trying to put it on my homepage. the homepage has scripts also. either mootools script or the script i ve use in the homepage is not working.
Abbas says:
22 Dec, 2011
Hi plzzz help me how to download this login pannel.I would like to download this plzzz any one can help me in this process of download….
arun says:
2 Jan, 2012
hi…
can i fix this AMAZING login panel in asp.net
Pterr says:
16 Jan, 2012
Thanks for the great manual, very clear!
Girish says:
19 Jan, 2012
Hi,
Please help. I have followed all the steps perfectly, but the slide is not working at all. What might be the problem?
I am working on asp.net.
Regards,
Dawid says:
27 Jan, 2012
Hi, good work friend !
I have a small question. On my website, I would have a few buttons that will be showing the login panel. But normally the toggler is just one called “id login”, how can I insert there few more togglers?
Flaviu says:
18 Feb, 2012
I used more jquery on my site, when i put this login panel the rest of jquery dont work , do you know what is the problem?
Thierry says:
27 Apr, 2012
@Falviu
You need to add this :
var J = jQuery.noConflict();
to replace “$” by “J”
And put the slideLogin before jquery
Mia says:
8 Jul, 2012
Thank You once again for a beautiful script Jeremie
I had installed your drop down login panel about 3 years ago on my site without a hitch ; now I am redesigning my site and I was thinking that ‘ I dont want to part with my Login Panel ‘
I was looking for a different style approach, since my nav-menu doesnt allow for a Drop Down, but instead : I wanted a link style type of method by which to Login and Users could register.
You have come to the rescue once AGAIN ! Jeremie ! Thank YOU for your efforts, they are very much appreciated
Vikash says:
16 Aug, 2012
Sir jeremie, I am a MCA student from CUSAT,kerela,india.Your design and panels are really very beautiful.
Mikee says:
21 Aug, 2012
Would be nice to have this voor WordPress, any plans to release this as plugin?
Siraj says:
28 Aug, 2012
Hi,i placed this login mootools jquery on my web application.It popup well and i want rest of the page to be prevent from use(inactive) while pop in enable ..thanks
Siraj says:
28 Aug, 2012
i want to make the current page inactive when i open login mooslide pop up..how to achieve this?
siraj says:
29 Aug, 2012
hello jeremie,
How to disable the background when mooslide login popup appears,because it allow users to type beneath the modal popup page,i hope u can understand waiting for ur valuable comments .Thanks