Not a member? Register | Lost your password?
Close Panel
 
 

3

Aug

2008

Show/hide a nice Login Panel using Mootools 1.2

By Jeeremie. Posted in AJAX / Javascript, Tutorials

Some of you were wondering what script I used to show/hide the login panel on top of this page (or in my latest Wordpress theme: “Night Transition”). In this tutorial, we will see how to create a similar login/signup panel for your website using Mootools 1.2. And next week, we will see how to use this script in Wordpress 2.5+ to display the login form on the front page.

Demo

First, check out the demo »
Show/hide login panel using Mootools 1.2

Download source code

Download source code below before we start this tutorial:
Download (38.1 KiB, 3,847 hits)

Step 1: The structure

Before we get to the code, I would like to illustrate the HTML structure used in this script:

HTML structure of the login panel

The panel (<div id=”login”>) is hidden by default. When someone click “Login”, the login panel slide into view. If you click once more on “login” or on the button “Close Panel”, the panel will “toggle” or slide out.

Step 3: HTML Code

Create a new HTML page and save it as index.html in your root folder. Copy the code below and paste it into this page:

<!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 Mootools 1.2</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
 <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="fx.slide.css" type="text/css" media="screen" />
</head>
<body>
 <div id="login">
  <div class="loginContent">
   <form action="#" method="post">
    <label for="log"><b>Username: </b></label>
    <input class="field" type="text" name="log" id="log" value="" size="23" />
    <label for="pwd"><b>Password:</b></label>
    <input class="field" type="password" name="pwd" id="pwd" size="23" />
    <input type="submit" name="submit" value="" class="button_login" />
    <input type="hidden" name="redirect_to" value=""/>
   </form>
   <div class="left">
     <label for="rememberme"><input name="rememberme" id="rememberme" class="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label></div>
   <div class="right">Not a member? <a href="#">Register</a> | <a href="#">Lost your password?</a></div>
  </div>
  <div class="loginClose"><a href="#" id="closeLogin">Close Panel</a></div>
 </div>
 
 <div id="container">
  <div id="top">
   <ul class="login">
     <li class="left">&nbsp;</li>
    <li>Hello Guest!</li>
    <li>|</li>
    <li><a id="toggleLogin" href="#">Log In</a></li>
   </ul>
  </div>
 
  <div class="clearfix"></div>
 
  <div id="content">
   <p>The content of your page!</p>
  </div>
  <div class="clearfix"></div>
 </div>
</body>
</html>
Step3: The CSS

Create a new cascading style sheet in your web editor. Save it as fx.slide.css in your root folder. Copy the code below and paste it into your css page (Click on [+] to expand the code):

Step 4: The Javascript

First, you will need to download Mootools core. So go visit this page and download Mootools 1.2 with YUI Compression. Create a new folder in your root directory and name it “js“. Save “mootools-1.2-core-yc.js” into it.

Now go to the “More Builder” page and select Fx.Slide. Scroll down to the bottom of the page and select “YUI Compressor” which is the default compression. Click “Download” and save the file (which name should be “mootools-1.2-more.js”) into your js/ folder.

Now, create a new Javascript document. Save it as fx.slide.js (should I tell you to save it into your js/ folder?). Here’s the code:

window.addEvent('domready', function(){
	$('login').setStyle('height','auto');
	var mySlide = new Fx.Slide('login').hide();  //starts the panel in closed state
 
    //Show-Hide login panel when you click the link "Login" on top of the page
    $('toggleLogin').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle(); //show-hide login panel
		e.stop();
	});
 
    //Hide login panel when you click the button close on the upper-right corner of the login panel
    $('closeLogin').addEvent('click', function(e){
		e = new Event(e);
		mySlide.slideOut(); //Hide login panel
		e.stop();
	});
});

Did you notice “toggleLogin” and “closeLogin”? They define the IDs used in our HTML code (<a id="toggleLogin" href="#">Log In</a> and <a href="#" id="closeLogin">Close Panel</a>). The first one add a “toggle” effect to our “login” link in the top tab. The second one add a “slide out” effect to our button “Close Panel”.

The line var mySlide = new Fx.Slide('login').hide(); will start the panel in a closed sate (.hide();).

You can read the Mootools documentation to get the most out of the Class:Fx.Slide.

You can also use the Class:Fx.Transition to add some nice transitions to your login panel such as a bouncing effect (Bounce.easeInOut) when the panel slide in and out:

[-]?View Code JAVASCRIPT
var mySlide = new Fx.Slide('login', { duration:800, transition: Fx.Transitions.Bounce.easeInOut}).hide();

Check the documentation here.

Step 5: Insert Scripts into the <head> section

Add the following lines in the <head> section of your page and you should be done:

[-]?View Code HTML4STRICT
<head>
[...]
 <!-- Mootools - the core -->
 <script src="js/mootools-1.2-core-yc.js" type="text/javascript"><!--mce:0--></script>
 <!--Toggle effect (show/hide login form) -->
 <script src="js/mootools-1.2-more.js" type="text/javascript"><!--mce:1--></script>
 <script src="js/fx.slide.js" type="text/javascript"><!--mce:2--></script>
 <!-- END Fx.Slide -->
</head>

Upload all your files and folder to your web server and open index.html in your browser. Everything should work fine. Don’t forget to enable Javascript in your browser.

Conclusion

This tutorial explained you how to add some Mootools effects to your web pages to show/hide a login panel. Next week, we will see a real world application as I will explain you how to use this script to show/hide your Wordpress login form on your front page (click “login” on the upper-right corner of this page to see an example).

So come back soon or subscribe to RSS to get notified when I publish the next post.

Update: read Add a show/hide login panel to your Wordpress theme using Mootools »

Technorati Tags: , , , , , , , ,

Popularity: 100% [?]

 

Related posts

| Subscribe to Feed | Email the author

52 Responses to “Show/hide a nice Login Panel using Mootools 1.2”

  1. 1
    Wifsimster Says:
    August 3rd, 2008 at 9:12 pm

    Toujours aussi bien ;)
    et vive Mootools !

  2. 2
    Paco Says:
    August 4th, 2008 at 3:23 pm

    Super truc!!Merci!

    Par contre est-ce que l’attribut “for” de la balise “label” est indispensable, sachant que que la balise “Label” contient l’ “input”??

    Merci encore pour tes codes qui sont toujours très cool :)

  3. 3
    Jeeremie Says:
    August 4th, 2008 at 3:29 pm

    Effectivement, c’était peut-être pas nécessaire. Merci pour le commentaire.

  4. 4
    Denis Sudilkovskyy Says:
    August 6th, 2008 at 6:16 pm

    Thx for this wonderfull JS-framework! :–)
    And WP theme - is a grate and vary nice too.

    p.s. U have a little broke in this page (I look in it at FireFox3).
    The elements “[-] ?” in code_block haven’t pretty position.
    (sorry for my pure english)

  5. 5
    Sylvain Says:
    August 7th, 2008 at 3:42 pm

    C’est moi ou sans JS le formulaire n’est pas accessible ?
    Je pense que tu devrais le rendre visible par défaut et le cacher en dès que le DOM prêt…

  6. 6
    Sylvain Says:
    August 7th, 2008 at 3:55 pm

    Sinon l’effet rendu est vraiment tip-top !

  7. 7
    Jeeremie Says:
    August 7th, 2008 at 4:02 pm

    Oui, si l’utilisateur a désactivé Javascript, le formulaire est caché par défault. J’ai été obligé de faire ça car, quand tu charges la page, le formulaire était visible le temps que le DOM soit prêts avant de finalement se fermer. C’était assez désagréable.

    Sur mon site, un message apparait grâce à la balise <noscript> demandant à l’utilisateur de réactiver Javascript dans son navigateur.

  8. 8
    acms Says:
    August 7th, 2008 at 6:21 pm

    Bien joué, merci Jeeremie d’avoir partagé.

  9. 9
    colin Says:
    August 7th, 2008 at 8:03 pm

    is it possable to have the login page to slide over the page and not push the content down.

  10. 10
    Jeeremie Says:
    August 7th, 2008 at 8:26 pm

    I guess so but I didn’t try it. I will add your suggestion to my ToDo list. Thanks.

  11. 11
    Jeeremie Says:
    August 7th, 2008 at 9:08 pm

    Colin, you could actually do it with MooSlide. I will try to show/hide the login panel with this script later on.

  12. 12
    Colin Says:
    August 7th, 2008 at 9:34 pm

    Can you give some brief direction how this would be achieved so that I can have a pok around myself. Frantically searching the web for answers but with no avail.

  13. 13
    Frank Says:
    August 8th, 2008 at 8:54 am

    You can use MooSlide2 easily to create such a login system. The framework for the drop down div is already implemented, so you only need to put your content in ( Login box etc ).

    If you have questions on how to deal with that, just drop me a line at admin[at]artviper.net.

  14. 14
    Jeeremie Says:
    August 8th, 2008 at 9:03 am

    MooSlide is a container. You can add any kind of content into it. Download the script and check how to install it here » (or view their page source).

    Now, let’s say, you use Wordpress and you want to add a login form to the front page. Copy and paste the code below into the container:

    [-]?View Code HTML4STRICT
    <!-- MooSlide Container -->
<div id="test" class="mooSlide">
<!-- The wordpress Form -->
<form action="<?php bloginfo('url') ?>/wp-login.php" method="post">
 <label for="log"><b>Username: </b></label>
 <input class="field" type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="23" />
 <label for="pwd"><b>Password:</b></label>
 <input class="field" type="password" name="pwd" id="pwd" size="23" />
 <input type="submit" name=