September 18, 2008

AJAX / Javascript, All, Forms, Freebies, HTML / CSS, Mootools, Tutorials

Sliding login/Signup panel using MooSlide (Mootools 1.2)

Article written by Jeeremie

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:

PreviewDownload(41.5 KiB, 20,477 hits)

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)

?Download download.txt
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):

?Download download.txt
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:

?View Code HTML4STRICT
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):

?View Code HTML4STRICT
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.

PreviewDownload(44.8 KiB, 5,627 hits)

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

Article written by Jeeremie:

Hi, My Name is Jeremie Tisseau. I am a French UI/UX Designer, Event Organizer and Web Entrepreneur based in Bangkok, Thailand, since January 2009. I design beautiful and functional web and mobile apps for early stage startups.

Tweet

Want to become a guest author on this blog?

63 Comments

  1. Paco says:

    18 Sep, 2008

    J aime ce genre de choses :) !!!
    Dommage que j utilise pas Mootools :s

    A+

  2. 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.

  3. wifsimster says:

    20 Sep, 2008

    Toujours aussi jolie, tr s belle adaptation de Mootools une fois de plus ;)

  4. Tadd says:

    6 Nov, 2008

    Implementing this in a WordPress site - going very well. Thanks for this code. Very well done.

  5. andres says:

    13 Dec, 2008

    how to make work in social engine ?

  6. 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. :)

  7. Tyrone Avnit says:

    13 Jan, 2009

    Love the stuff you are doing here. Very helpful!

  8. 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?

  9. 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 »

  10. 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 :)

  11. Baur says:

    1 Feb, 2009

    How can I change toggler to make a variable?
    toggler:”<?= .$username. ?>”
    <a href=”#” id=”‘.$username.'” >
    it does not work

  12. MissANN says:

    3 Feb, 2009

    Thank you so much for this one!! I really need this.. thank you so much! ^__^

  13. 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

  14. Jeremie Tisseau says:

    20 Feb, 2009

    What do you mean?

  15. 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.

  16. 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!!!

  17. 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. :)

  18. 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!

  19. 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

  20. 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?

  21. 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

  22. Jeremie Tisseau says:

    12 May, 2009

    Ash, please visit Artvipers site.

  23. 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.

  24. 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

  25. francis says:

    3 Aug, 2009

    Just fantastic.

  26. francis says:

    3 Aug, 2009

    how can i make loadExternal: work?

  27. francis says:

    8 Aug, 2009

    can you please help?

  28. 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.. :)

  29. fbli says:

    20 Aug, 2009

    Thats Good Thanks Very Much..

  30. 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?

  31. 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.

  32. 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

  33. 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

  34. 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?

  35. munir says:

    1 Apr, 2010

    nice thing

  36. 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

  37. 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.

  38. 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!

  39. arif naifira says:

    3 Dec, 2010

    i like this ..

    thanks very much :D

  40. JEET says:

    2 Feb, 2011

    Thanks a lot Keeep it up!!!!!!!

  41. Santosh says:

    13 Feb, 2011

    Many Many Thanks for sharing this. I ve been searching for this for a week now :)

  42. 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

  43. 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 ^^

  44. arifian says:

    19 May, 2011

    wow!! perfect :D
    i like this :)

  45. MyBB says:

    20 Jul, 2011

    Thanks Very Much..

  46. Rajeesh Nair says:

    26 Aug, 2011

    Gr8 work..
    Thanks a lot
    Panel that i searching for long time
    Thanks

  47. 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.

  48. 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….

  49. arun says:

    2 Jan, 2012

    hi…
    can i fix this AMAZING login panel in asp.net

  50. Pterr says:

    16 Jan, 2012

    Thanks for the great manual, very clear!

  51. 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,

  52. 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?

  53. 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?

  54. 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

  55. 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 :)

  56. Vikash says:

    16 Aug, 2012

    Sir jeremie, I am a MCA student from CUSAT,kerela,india.Your design and panels are really very beautiful.

  57. Mikee says:

    21 Aug, 2012

    Would be nice to have this voor WordPress, any plans to release this as plugin?

  58. 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

  59. Siraj says:

    28 Aug, 2012

    i want to make the current page inactive when i open login mooslide pop up..how to achieve this?

  60. 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

Leave a Reply

Sorry, comments are closed