Sponsors
About the Author

Hi, my name is Jeremie Tisseau. I am a Web/UI/Print Design Consultant at Calleo, specializing in User Interface Design and Development. I build clean, appealing, and functional interfaces which comply with the latest web standards. More »

I am currently available for Web projects »
- AJAX / Javascript (12)
- Articles (38)
- HTML / CSS (8)
- Photoshop / Fireworks (8)
- PHP (7)
- Tutorials (13)
- Wordpress (20)
- Design, Development
- A List Apart
- Nettuts
- PSDtuts
- Web Designer Wall
- Woork
- Designers I like
- 31three
- Drew Wilson
- Fullahead
- Melissa Hie
- Tanya Merone
- Veerle
- CMS' I like
- Drupal
- Magento Ecommerce
- Pragmatized
- Radiant CMS
- Wordpress
- Great Frameworks
- Code Igniter (PHP)
- Jquery (AJAX)
- Mootools (AJAX)
Subscribe via Email

Enter your email address:
Donate!

If you think you have benefited in some way, by using any of my themes, templates or forms on this site, you can show your appreciation by donating some money, even if only $1. Any contribution you make will help me maintain and create new themes and other great scripts to use on your site.

Sep

2008

Sliding login/Signup panel using MooSlide (Mootools 1.2)

By jeeremie. Posted in AJAX / Javascript, Tutorials

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.

View the Demo » (You must turn on your Javascript to preview this demo!)

Download Source Code

Grab a copy of this tutorial. It includes Mootools framework, MooSlideBox and all the images needed for this tutorial:

Download (42.2 KiB, 5,483 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

<!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" /> &nbsp;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">&nbsp;</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

/*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

<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

<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. See the demo »

Download the source code for this second example:

Download (44.8 KiB, 1,636 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

Popularity: 26% [?]

36 Responses to “Sliding login/Signup panel using MooSlide (Mootools 1.2)”

1
Paco Says:
September 18th, 2008 at 7:13 pm
J’aime ce genre de choses !!!
Dommage que j’utilise pas Mootools :s

A+
2
ziczac Says:
September 19th, 2008 at 3:58 pm
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:
September 20th, 2008 at 9:13 am
Toujours aussi jolie, très belle adaptation de Mootools une fois de plus
4
Tadd Says:
November 6th, 2008 at 8:43 pm
Implementing this in a WordPress site – going very well. Thanks for this code. Very well done.
5
andres Says:
December 13th, 2008 at 9:09 pm
how to make work in social engine ?
6
Andrea Says:
January 4th, 2009 at 6:09 pm
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:
January 13th, 2009 at 12:24 am
Love the stuff you are doing here. Very helpful!
8
Jubair Saidi Says:
January 16th, 2009 at 3:07 pm
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
Jeeremie Says:
January 21st, 2009 at 4:29 pm
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:
January 26th, 2009 at 4:26 am
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:
February 1st, 2009 at 9:32 pm
How can I change toggler to make a variable?
toggler:”<?=’.$username.’?>”
<a href=”#” id=”‘.$username.’” >
it does not work
12
MissANN Says:
February 3rd, 2009 at 1:42 pm
Thank you so much for this one!! I really need this.. thank you so much! ^__^
13
prawin Says:
February 20th, 2009 at 5:13 pm
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
Jeeremie Says:
February 20th, 2009 at 5:27 pm
What do you mean?
15
Martha Says:
March 12th, 2009 at 5:31 pm
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!
16
Jeeremie Says:
March 12th, 2009 at 6:17 pm
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.
17
Martha Says:
March 12th, 2009 at 7:19 pm
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!!!
18
Jeeremie Says:
March 12th, 2009 at 7:43 pm
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.
19
ngmt Says:
April 7th, 2009 at 3:01 pm
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!
20
santhosh Says:
April 17th, 2009 at 7:58 pm
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
21
Silver Firefly Says:
April 18th, 2009 at 2:33 am
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?
22
ash Says:
May 9th, 2009 at 8:10 am
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
23
Jeeremie Says:
May 12th, 2009 at 10:15 am
Ash, please visit Artvipers site.
24
biboy Says:
May 12th, 2009 at 7:56 pm
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.
25
7 Incredibly Beautiful Sliding Panel with jQuery Says:
May 26th, 2009 at 1:21 pm
[...] 3. Sliding Login/Signup Panel using Moo Slide from MooTools 1.2 [...]
26
abe Says:
May 29th, 2009 at 5:52 am
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
27
francis Says:
August 3rd, 2009 at 2:06 am
Just fantastic.
28
francis Says:
August 3rd, 2009 at 2:09 am
how can i make loadExternal: work?
29
francis Says:
August 8th, 2009 at 11:12 am
can you please help?
30
nitin Says:
August 13th, 2009 at 1:55 pm
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..
31
fbli Says:
August 20th, 2009 at 11:21 pm
Thats Good Thanks Very Much..
32
Ian Says:
October 29th, 2009 at 12:37 am
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?
33
Jeeremie Says:
October 29th, 2009 at 9:33 am
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.
34
Mandar H Says:
November 12th, 2009 at 11:47 am
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
35
Holger. H Says:
February 16th, 2010 at 1:55 am
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
36
Julie Says:
February 17th, 2010 at 4:50 am
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?

Sponsors

About the Author

Subscribe via Email

Donate!