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

A new version of this script is available here. This new version works with jQuery.

If you use the code given on this page and have jQuery or another AJAX framework already installed on your site, keep in mind Mootools generally conflicts with other AJAX frameworks and the sliding panel will not work!

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, 22,268 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:

?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 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):

?Download download.txt
/* Login Panel */
#top {
 background: url(images/login_top.jpg) repeat-x 0 0;
 height: 38px;
 position: relative;
}
 
#top ul.login {
 display: block;
 position: relative;
 float: right;
 clear: right;
 height: 38px;
 width: auto;
 font-weight: bold;
 line-height: 38px;
 margin: 0;
 right: 150px;
 color: white;
 font-size: 80%;
 text-align: center;
 background: url(images/login_r.jpg) no-repeat right 0;
 padding-right: 45px;
}
 
#top ul.login li.left {
 background: url(images/login_l.jpg) no-repeat left 0;
 height: 38px;
 width: 45px;
 padding: 0;
 margin: 0;
 display: block;
 float: left;
}
 
#top ul.login li {
  text-align: left;
 padding: 0 6px;
 display: block;
 float: left;
 height: 38px;
 background: url(images/login_m.jpg) repeat-x 0 0;
}
 
#top ul.login li a {
 color: #33CCCC;
}
 
#top ul.login li a:hover {
 color: white;
}
 
/*Login*/
/* toggle effect - show/hide login*/
#login {
 width: 100%;
 color: white;
 background: #1E1E1E;
 overflow: hidden;
 position: relative;
 z-index: 3;
 height: 0;
}
 
#login a {
 text-decoration: none;
 color: #33CCCC;
}
 
#login a:hover {
 color: white;
}
 
#login .loginContent {
 width: 550px;
 height: 80px;
 margin: 0 auto;
 padding-top: 25px;
 text-align: left;
 font-size: 0.85em;
}
 
#login .loginContent .left {
 width: 120px;
 float: left;
 padding-left: 65px;
 font-size: 0.95em;
}
 
#login .loginContent .right {
 width: 290px;
 float: right;
 text-align: right;
 padding-right: 65px;
 font-size: 0.95em;
}
 
#login .loginContent form {
 margin: 0 0 10px 0;
 height: 26px;
}
 
#login .loginContent input.field {
 border: 1px #1A1A1A solid;
 background: #464646;
 margin-right: 5px;
 margin-top: 4px;
 color: white;
 height: 16px;
}
 
#login .loginContent input:focus.field {
 background: #545454;
}
 
#login .loginContent input.rememberme {
 border: none;
 background: transparent;
 margin: 0;
 padding: 0;
}
 
#login .loginContent input.button_login {
 width: 47px;
 height: 20px;
 cursor: pointer;
 border: none;
 background: transparent url(images/button_login.jpg) no-repeat 0 0;
}
 
#login .loginClose {
 display: block;
 position: absolute;
 right: 15px;
 top: 10px;
 width: 70px;
 font-size: 0.8em;
 text-align: left;
}
 
#login .loginClose a {
 display: block;
 width: 100%;
 height: 20px;
 background: url(images/button_close.jpg) no-repeat right 0;
 padding-right: 10px;
 border: none;
 font-size: 0.9em;
 color: white;
}
 
#login .loginClose a:hover {
 background: url(images/button_close.jpg) no-repeat right -20px;
}
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:

?Download download.txt
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% [?]

 
« Previous Post
Next Post »

Related posts

| Subscribe to Feed | Email the author

145 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="submit" value="" class="button_login" />
 <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
</form><!-- END form -->
</div><!-- END MooSlide Container-->

    And last, create the link that will open MooSlide:

    ?View Code HTML4STRICT
    <a href="#" id="toggle" rel="nofollow">Login</a>
  15. 15
    Frank Says:
    August 8th, 2008 at 9:04 am

    Pretty well explained @Jeremie :) Couldn’t do better

  16. 16
    Jeeremie Says:
    August 8th, 2008 at 9:05 am

    Oops! Thanks Frank. We were writing comments at the same time.

  17. 17
    Colin Says:
    August 8th, 2008 at 12:02 pm

    Cheers guys thats just what I needed. great work !

  18. 18
    Ekrem Büyükkaya Says:
    August 9th, 2008 at 12:08 am

    wonderful

  19. 19
    Web-kreation - Add a show/hide login panel to your Wordpress theme using Mootools Says:
    August 12th, 2008 at 12:15 pm

    [...] is the second part of my tutorial “Show/hide a nice Login Panel using Mootools 1.2″. In this tutorial, we will now see how to add the show/hide login panel into your Wordpress theme, [...]

  20. 20
    Rey Bango Says:
    August 19th, 2008 at 5:08 pm

    Great job with the tutorial. I posted about it on Ajaxian http://ajaxian.com/archives/ajaxian-featured-tutorial-showhide-login-panel-built-with-mootools

    Rey…

  21. 21
    Jeeremie Says:
    August 19th, 2008 at 5:20 pm

    Thanks Rey! :)

  22. 22
    yannick Says:
    August 20th, 2008 at 1:58 pm

    Sous firefox 3 (linux Ubuntu), j’ai un decalage des deux boites de saisie.. dommage

  23. 23
    Ryan Says:
    August 20th, 2008 at 2:34 pm

    One suggestion I have would be to have the ‘Log In’ link have an href which points to a stand-alone login page so it works with or without Javascript enabled. Who knows who the heck these people are who don’t have Javascript enabled, but perhaps they’re on a non-iPhone mobile device which does not support Mootools, or any Javascript for that matter. Overall, nice tutorial, I just wanted to throw that out there though.

    Cheers!

  24. 24
    Yereth Says:
    August 21st, 2008 at 11:44 pm

    To second Ryan and add an extra remark: if you’re going to use an <a> tag, please do also use a fall-back link on it for disabled javascript. Not to expect a lot of people have javascript disabled, but it’s simply wrong to use an <a> tag when it’s not actually a link. Markup is meaningful and misusing it breaks the web. (how often have you middle clicked on a ‘link’ and ended up with a piece of javascript or just a ‘#’ symbol in the newly opened tab?)

    Otherwise, nice work. I guess a lot of people are wondering how to implement a similar styled login panel.

  25. 25
    Jeeremie Says:
    August 22nd, 2008 at 8:00 am

    Otherwise, nice work. I guess a lot of people are wondering how to implement a similar styled login panel.

    Yes, that’s why I wrote a second tutorial explaining how to implement this sliding login panel into Wordpress so people can see a real life application.

  26. 26
    Eroan Boyer Says:
    August 29th, 2008 at 3:49 pm

    Superbe !

    Ce sera très bientôt intégré sur mon site Moto Forums, je me le mets de côté ;)
    Ca s’adapte bien sur un forum je pense !

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

    Oui, ce panneau login peut s’adapter à n’importe quel type de site. Cependant, il faut penser à prévoir une solution de secours pour ceux qui ne veulent pas ou ne pensent pas à activer leur Javascript!!

  28. 28
    ctran Says:
    September 3rd, 2008 at 7:46 pm

    # Same effect with jQuery

    jQuery(document).ready(function(){
    $(‘#login’).height(‘auto’).hide();

    $(‘#toggleLogin’).click(function(e) {
    $(‘#login’).slideToggle(’slow’);
    });

    $(‘#closeLogin’).click(function(e) {
    $(‘#login’).slideToggle(’slow’);
    });
    });

  29. 29
    Jeeremie Says:
    September 4th, 2008 at 5:28 pm

    Yes, CSSrain converted this login form to Jquery: http://www.cssrain.cn/demo/jQueryLoginForm/test.html

    Their code is slightly different:

    ?View Code JAVASCRIPT
    <script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script language="javascript" >
$(function(){
 $("#toggleLogin").toggle(function(){
  $("#login").parent("div").animate({ height : 105 } , 520 );
  $("#login").animate({marginTop : 0 } , 500 );
  $(this).blur();
 },function(){
  $("#login").parent("div").animate({ height : 0 } , 500 );
  $("#login").animate({marginTop : -105 } , 520 ); 
  $(this).blur();
 });
 $("#closeLogin").click(function(){
  $("#login").parent("div").animate({ height : 0 } , 500 );
  $("#login").animate({marginTop : -105 } , 520 ); 
 });
});
</script>
  30. 30
    diego Says:
    September 5th, 2008 at 1:49 pm

    Great job! looks great! I tried plugin it into an existing page and in both IE and firefox it doesn’t “push” down the page which is not a big problem, but on IE the login containter pops up beneath the page… what css attribute/collision could cause that?
    Thanks!

  31. 31
    diego Says:
    September 5th, 2008 at 9:52 pm

    fixed. I had a position: absolute; in the other style and I changed it to relative.

  32. 32
    Jeeremie Says:
    September 8th, 2008 at 9:39 pm

    @3lr0n: Here’s how you can do it:

    fx.slide.js:

    ?View Code JAVASCRIPT
    window.addEvent('domready', function(){
 $('panel1').setStyle('height','auto');
 var myPanel1 = new Fx.Slide('panel1',{duration: '1000'}).hide();  //starts the panel in closed state
 $('panel2').setStyle('height','auto');
 var myPanel2 = new Fx.Slide('panel2',{duration: '1000'}).hide();  //starts the panel in closed state
 
  $('showPanel1').addEvent('click', function(e1){
    e1 = new Event(e1);
    myPanel2.hide().slideOut();
    myPanel1.slideIn();
    e.stop();
  });
 
  $('showPanel2').addEvent('click', function(e2){
    e2 = new Event(e2);
    myPanel1.hide().slideOut();
    myPanel2.slideIn();
    e.stop();
  });
 
  $('close').addEvent('click', function(e){
    e = new Event(e);
    myPanel2.slideOut();
    myPanel1.slideOut();
    e.stop();
  });
 
});

    The HTML:

    ?View Code HTML4STRICT
    <!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" />
 
	<!-- The main style sheet -->
  	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
 
	<!-- START Fx.Slide -->
	<!-- The CSS -->
  	<link rel="stylesheet" href="fx.slide.css" type="text/css" media="screen" />
    <!-- Mootools - the core -->
	<script type="text/javascript" src="js/mootools-1.2-core-yc.js"></script>
    <!--Toggle effect (show/hide login form) -->
	<script type="text/javascript" src="js/mootools-1.2-more.js"></script>
	<script type="text/javascript" src="js/fx.slide.js"></script>
	<!-- END Fx.Slide -->
 
</head>
 
<body>
	<!-- Login -->
	<div id="panel1">
		<div class="loginContent">
			<p>panel 1</p>
		</div>
	</div>
 
 
	<!-- test text -->
	<div id="panel2">
		<div class="loginContent">
			<p>panel 2</p>
		</div>
	</div>
 
 
    <div id="container">
		<div id="top">
		<!-- login -->
			<ul class="login">
		    	<li class="left">&nbsp;</li>
				<li><a id="showPanel1" href="#" rel="nofollow">Show Panel 1</a></li>
				<li>|</li>
				<li><a id="showPanel2" href="#" rel="nofollow">Show Panel 2</a></li>
				<li>|</li>
				<li><a id="close" href="#" rel="nofollow">Close Panel [X]</a></li>
			</ul> <!-- / login -->
		</div> <!-- / top -->
 
        <div class="clearfix"></div>
 
 
		<div id="content">
 
		</div><!-- / content -->
        <div class="clearfix"></div>
	</div><!-- / container -->
 
</body>
 
</html>

    … and the css:

    ?View Code CSS
    /* Login Panel */
#top {
  	background: url(images/login_top.jpg) repeat-x 0 0;
	height: 38px;
	position: relative;
}
 
#top ul.login {
	display: block;
	position: relative;
  	float: right;
  	clear: right;
  	height: 38px;
	width: auto;
  	font-weight: bold;
	line-height: 38px;
	margin: 0;
	right: 150px;
  	color: white;
  	font-size: 80%;
	text-align: center;
  	background: url(images/login_r.jpg) no-repeat right 0;
	padding-right: 45px;
}
 
#top ul.login li.left {
  	background: url(images/login_l.jpg) no-repeat left 0;
  	height: 38px;
	width: 45px;
	padding: 0;
	margin: 0;
  	display: block;
	float: left;
}
 
#top ul.login li {
 	text-align: left;
  	padding: 0 6px;
	display: block;
	float: left;
	height: 38px;
  	background: url(images/login_m.jpg) repeat-x 0 0;
}
 
#top ul.login li a {
	color: #33CCCC;
}
 
#top ul.login li a:hover {
	color: white;
}
 
/*Login*/
/* toggle effect - show/hide login*/
#panel1, #panel2 {
	width: 100%;
	color: white;
	background: #1E1E1E;
	overflow: hidden;
	position: relative;
	z-index: 3;
	height: 0;
}
 
#panel1 a,
#panel2 a {
	text-decoration: none;
	color: #33CCCC;
}
 
#panel1 a:hover,
#panel2 a:hover {
	color: white;
}
 
.loginContent {
	width: 550px;
	height: 80px;
	margin: 0 auto;
	padding-top: 25px;
	text-align: left;
	font-size: 0.85em;
}

    This code will close the first panel before opening the second panel and viceversa. You can see a demo here »

  33. 33
    3lr0n Says:
    September 8th, 2008 at 6:02 pm

    Hello Jeeremie,

    well done :D

    One question, could you use this cool code to have 2 panels? I mean, for example one for login and one for search box. I tried it and works changing the variables on the fx.slide.js but you can open 2 panels at same time. I was wondering if you can add some code to close the open panel when you try to open the second one and viceversa.

    Thks in advance :D
    3lr0n

  34. 34
    Jeeremie Says:
    September 8th, 2008 at 7:26 pm

    Yes, you can use this code many times on the same page. My freebies page use this script for the “show/hide details”. For this page, I created dynamically (with PHP) different IDs, but you can do it manually. Create your IDs for the panels you want to create and change your HTML, CSS and fx.slide.js files consequently.

    I was wondering if you can add some code to close the open panel when you try to open the second one and viceversa.

    Yes, I am sure you can but I have never tried it before. I will have a look and will let you know if I get something (or time to do it!!!) :)

  35. 35
    3lr0n Says:
    September 8th, 2008 at 10:24 pm

    Hello Jeeremie,

    the code works :D

    I made 2 modifications and the final result i think is great (if you think there any code problem please tell me).

    First, as your reply was so quick you forget to add a e1.stop and e2.stop (the numbers i mean) of the show panel 1 and two.

    Second, i use myPanel2.slideOut(); instead of myPanel2.hide().slideOut(); because the transition effect is better for me.

    And finally, I have to define 2 closing functions because i dont know why the panel2 closing link didnt work.

    $(‘close1′).addEvent(‘click’, function(e3){
    e3 = new Event(e3);
    myPanel1.slideOut();
    e3.stop();
    });

    $(‘close2′).addEvent(‘click’, function(e4){
    e4 = new Event(e4);
    myPanel2.slideOut();
    e4.stop();
    });

    I hope you can see the results on my website soon :D

    Many many thks ;)

  36. 36
    diego Says:
    September 9th, 2008 at 5:14 pm

    Strange IE behaviour. I made it to work on a site, and in firefox works perfect but in IE, you can see de login div while the page is loading and when it finishes it hides. Works ok, but is there a way to hide it on load on IE?

  37. 37
    Jeeremie Says:
    September 9th, 2008 at 10:30 pm

    @3lr0n: I had time today to work on the code a bit longer and came up with something better (if someone knows a better way, please, let me know!). You can see a demo here »

    I have slightly changed fx.slide.js:

    ?View Code JAVASCRIPT
    window.addEvent('domready', function(){
  var myPanel1 = new Fx.Slide('panel1',{duration: '1000'}).hide();
  var myPanel2 = new Fx.Slide('panel2',{duration: '1000'}).hide();
 
    $('showPanel1').addEvent('click', function(e1){
      e1 = new Event(e1);
      myPanel2.slideOut();
      (function(){
        myPanel1.toggle();
      }).delay(1000, this);
		e1.stop();
    });
 
    $('showPanel2').addEvent('click', function(e2){
      e2 = new Event(e2);
      myPanel1.slideOut();
      (function(){
        myPanel2.toggle();
      }).delay(1000, this);
      e2.stop();
    });
 
    $('close1').addEvent('click', function(e3){
      e3 = new Event(e3);
      myPanel1.slideOut();
      e3.stop();
    });
 
    $('close2').addEvent('click', function(e4){
      e4 = new Event(e4);
      myPanel2.slideOut();
      e4.stop();
    });
});

    Global Voices has similar sliding panels on their site (“Explore”). They use the Prototype framework.

    @Diego: Weird! I had this problem at the beginning and fixed it to make sure it will always hide on load. I don’t see it either in IE6 or IE7 (WIN). Do you use a MAC?

  38. 38
    Diego Says:
    September 9th, 2008 at 11:38 pm

    @Jeeremie thanks for the reply!
    No, I’m on XP with IE7.
    If I find what it is i’ll let you know.
    How did you fix it last time?
    thanks!

  39. 39
    Adrien Says:
    September 10th, 2008 at 8:59 am

    Magnifique!

  40. 40
    Jeeremie Says:
    September 10th, 2008 at 9:12 am

    @Diego: I use $('login').setStyle('height','auto'); and set the height to “0″ in fx.slide.css to hide the sliding panel on load.

    Instead, you could write $('login').setStyle('display','block'); and set display to none in your css, like this:

    ?View Code CSS
    #login {
 width: 100%;
 color: white;
 background: #1E1E1E;
 overflow: hidden;
 position: relative;
 z-index: 3;
 display: none;
}
  41. 41
    diego Says:
    September 10th, 2008 at 6:32 pm

    Thanks! 2nd option worked great!!! (the first option was already on my code but did’t work on IE)

  42. 42
    75 (Really) Useful JavaScript Techniques | Developer's Toolbox | Smashing Magazine Says:
    September 11th, 2008 at 7:55 pm

    [...] Show/hide a Login Panel using Mootools 1.2“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.” [...]

  43. 43
    Jaswinder Virdee Says:
    September 12th, 2008 at 9:08 pm

    I see a little woork inspiration in this post… good work nonetheless

  44. 44
    DarkWolf Says:
    September 18th, 2008 at 4:20 am

    Hey! thanks!
    Very awesome results.

    I’ll use it for my band’s website =)

  45. 45
    Mr. Yank Says:
    September 18th, 2008 at 8:41 am

    Great script.
    But doesn’t work if you are using the prototype.js framework in the same page.

  46. 46
    Fermin Says:
    September 22nd, 2008 at 5:39 am

    So I wanted to set a cookie so when I clicked on “Log In” it stays open even when you refresh your browser.

    ?View Code JAVASCRIPT
    window.addEvent('domready', function(){
	$('login').setStyle('height','auto');
	var biscuit = parseInt(Cookie.read('toggleState'));
	var mySlide = new Fx.Slide('login');
    if(biscuit) mySlide.slideIn(); // If you want to panel in closed state
    else mySlide.slideOut(); // If you have it in the closed state on the line above you need to set this to Open State
    $('toggleLogin').addEvent('click', function(e){
		if(biscuit) {
			e = new Event(e);
			mySlide.toggle(); //show-hide login panel
			e.stop();
			biscuit = 0;
			Cookie.write('toggleState', '0', 7);
		} else {
			e = new Event(e);
			mySlide.toggle(); //show-hide login panel
			e.stop();
			biscuit = 1;
			Cookie.write('toggleState', '1', 7);
		}
 
	});
 
    //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();
		Cookie.write('toggleState', '0', 7); // Change the 0 to 1 if you change the open and close state
	});
});
  47. 47
    manik Says:
    September 25th, 2008 at 10:21 am

    In the 2-panel-variation is it possible not to hide the panel area while switching the panels? I if you click either on the 1st od 2nd panel it opens the panel. When you click close or the same panel again, it hides the panel. That is the same as before. But if you click on the 1st panel and then on the 2nd one, I want it just to change the content of the panel. It is much more faster and comfortable…

  48. 48
    Tommix Says:
    October 25th, 2008 at 2:37 pm

    Fermin – nice done, but buffy, when you left it shown – it is good, but when you’re left it hiden – everytime you refresh page – it toggles – and that’s not good.. need to do some default value to be hiden.

  49. 49
    Jason Says:
    November 15th, 2008 at 9:22 am

    I’m not sure what I’m doing wrong. This is the 3rd drop down login tutorial I’ve tried. Any idea why I can’t get it to ‘drop down’?

    my blog: http://organicjar.com/contact/test-2/

    Please Help. THANKS

  50. 50
    Jeeremie Says:
    November 15th, 2008 at 11:41 am

    Yes, that is normal. This is commonly caused by a conflict between two or more AJAX frameworks. In your case, you use Lightbox which works with Prototype & Scriptaculous and it is well known that Mootools and Prototype don’t work together. You must either get rid of my drop down login panel or Lightbox.

  51. 51
    tester Says:
    November 29th, 2008 at 6:02 am

    hi @ all,

    very very n1 utorial,
    but can you help me, to display the shown toppanel over the content.
    at the moment it slide down the whole site.

    would be very n1, thx

  52. 52
    Jeeremie Says:
    November 29th, 2008 at 12:08 pm

    Check this post: Sliding login/Signup panel using MooSlide (Mootools 1.2)

  53. 53
    Ian Says:
    December 11th, 2008 at 3:59 pm

    Hi,

    Very nice script indeed, that was working OK on WP 2.6.5 !…Btw, I did the WP 2.7 upgrade and my “logout” tab in show/hide panel :
    <a href="/wp-login.php?action=logout&redirect_to=">LOGOUT
    is no longer working properly..?..
    Any idea ?…..Thanks !

  54. 54
    Jeeremie Says:
    December 11th, 2008 at 4:29 pm

    Maybe the code changed in 2.7. Try to remove ‘&redirect_to=’ and tell me if it makes any difference.

    I tried to register to your site but I didn’t receive the verification link.

    Au fait, sympas ton site.

  55. 55
    Jeeremie Says:
    December 11th, 2008 at 8:19 pm

    I just received the verification link and tried to logout on your site.

    I did recheck the code and it should be:
    <a href="<?php bloginfo('url') ?>/wp-login.php?action=logout&amp;redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Log Out</a>

    Have you tried with that code?

  56. 56
    Ian Says:
    December 11th, 2008 at 9:01 pm

    Yes…I did !….actually I tried without the “redirect” and also with the code you mentioned…an WP is returning something like :
    "You are trying to log out...please try again".....

    …but nothing more happens…??!….;-((

    I am a bit perplex…at the very least……

  57. 57
    Ian Says:
    December 11th, 2008 at 9:51 pm

    GOT IT !…..WP 2.7 code has changed

    We now need to change the URL to log out from

    <?php echo get_option('siteurl'); ?>/wp-login.php?action=logout

    to

    <?php echo wp_logout_url(get_permalink()); ?>

    and it is working again with show/hide moo panel script….

  58. 58
    Jeeremie Says:
    December 11th, 2008 at 10:40 pm

    Thanks for posting the solution here. That’s good to know it.

  59. 59
    Larry Bradshaw Says:
    December 16th, 2008 at 12:14 am

    Could anyone make a WordPress 2.7 plug in for this?

    I get a little lost trying to follow how to make this work in WordPress. Not sure what goes in header.php, etc. My current log in is in my sidebar widget and I would love to have the tab for sign in at the top of my page above my header image.

  60. 60
    Ozan Kilic Says:
    January 8th, 2009 at 7:51 am

    hello there
    thank you for the awesome script! but i’ve got some problem, i would be glad if you like to help me…

    i’m using this slide content area with mootools.js file but it’s stucked when i use it.. it works without mootools.js (content area sliding but mooslide.js not working) and not work within it..

    erm… complicated, huh? i think you’ll get with picture for what i mean..

    http://img380.imageshack.us/img380/1650/scrollmv2.jpg

    ps: sorry for my english ;)

  61. 61
    Himel Khan Says:
    January 17th, 2009 at 9:18 pm

    Great Tutorial.
    i will apply it on my project.

  62. 62
    Will Says:
    January 26th, 2009 at 5:51 pm

    Very nice, I will have to start using mootools!

  63. 63
    ClubUgly Says:
    February 4th, 2009 at 12:41 pm

    Hi, I like the version theme this site is using for the slide. Can you share how to make a bar straight across like you have?

    Thanks

  64. 64
    Jeeremie Says:
    February 4th, 2009 at 1:01 pm

    Basically, it is just a matter of editing the CSS. View source code of this site and check the stylesheet to see how I did. What you are looking for is called #topNav in style.css. Hope it helps.

  65. 65
    ClubUgly Says:
    February 4th, 2009 at 3:11 pm

    I was thinking a little more details as yours reveals links for logged in users correct? Maybe a tutorial to do this style would be cool as I see a few extra things like the left logo on one side and mouseover on the toggle and etc. Sorry I’m a noob at this but can pick it up quick if shown how to do it start to finish.

    Thanks.

  66. 66
    Jeeremie Says:
    February 4th, 2009 at 3:33 pm

    Did you read the tutorial: Add a show/hide login panel to your Wordpress theme using Mootools ». I explained a couple of useful things in that tutorial such as how to reveal admin links for logged in users. For the mouseover effect, you can see it in my stylesheet:

    ?View Code CSS
    #topNav .login li a:hover {
 color: #AA9777;
 background: url(images/topNav_bg_hover.jpg) repeat-x 0 0;
}

    As you can see, the code is really simple. If you want to learn more about this effect, check my horizontal CSS menu.

    For the logo on the left side, you should definitely have a look at the source code and locate “#topNav”.

  67. 67
    ClubUgly Says:
    February 5th, 2009 at 12:25 am

    Yeah I read that. However, I’m using this for a different application other than wordpress. It’s easier for me to look at a base that’s neutral than one designed specifically for a certain product ie like the demo was neutral. Added I’m a single full time dad to a 2 year daughter I was kinda looking for the quick and dirty method as she gives me not too much time to play on my own :)

    I read the other items – I guess i’ll just keep reading until I can put together a full solution. Thanks for your help and all the great tutorials/freebies. :P

  68. 68
    Thunder Says:
    February 21st, 2009 at 6:02 pm

    Hi,

    great job!!!! It is possible, that I use your Login in a commercial project?????

    Best regards

  69. 69
    Jeeremie Says:
    February 21st, 2009 at 6:58 pm

    Yes, np.

  70. 70
    Thunder Says:
    February 21st, 2009 at 9:13 pm

    Thx!!!!!!
    Have a great time!!!

    Thunder

  71. 71
    sokai Says:
    March 3rd, 2009 at 12:50 am

    Thanks a lot Jeeremie for that great tutorial!

    At the last weekend I tried to adapt the menu for a custom site and changed the click-event (to the login-link) to a mouseenter-event (to the top-div). Everything went fine.
    Today I checked my site out with Opera (9.27 with Linux) and noticed that the mouse-event is not working. :( (With FF3 it’s working…)
    I set up this two test-sites for checking out my changes:

    http://sokai.name/web-kreation/mouse-event/test.htm
    http://sokai.name/web-kreation/top-div/test.htm

    Can you give me/us maybe a hint?

    Thanks again and go on with your good work! :)

    sofar|sokai

  72. 72
    Jeeremie Says:
    March 3rd, 2009 at 10:12 am

    Hmm. It works fine in Opera 9.63, the latest version on Windows. I don’t have Linux installed on this computer anymore (I hate Linux!) so I can’t test it.

    Nice menu bar by the way. I wanted to do something similar in a next tutorial. However, I think your “mouse-event” example will be disturbing and intrusive for your visitors. Codeigniter has a very nice example: http://codeigniter.com/user_guide/

  73. 73
    alex Says:
    March 20th, 2009 at 12:16 am

    hi i’m alex and i got a question i have done a template and i would like to add this on  my own without remaking another one.
    how?
    please
    i’m using Adobe DW CS 4
    and my template screenshot is here  LINK!

  74. 74
    Jeeremie Says:
    March 20th, 2009 at 10:33 am

    @Alex: First, are you familiar with login forms and how to add one to your site? If not, search on Google or hotscripts.com a login form script and install it on your page. Login forms usually requires PHP and MySQL to work.

    However, I would recommend you to use a CMS such as Wordpress, Drupal, Joomla… All of them already have a PHP/MySQL login form integrated in their system. This sliding login panel is quite easy to implement with any CMS if you read their documentation or look into their code. And I explain in another post how to implement it in Wordpress.

    (P.S. I have deleted your other comments and I would appreciate you don’t ask ten times the same question on different posts. Thank you!)

  75. 75
    alex Says:
    March 20th, 2009 at 6:34 pm

    Hi! Jeeremie …..actually I would like to ask y something ………First Let me tell you about this Show/Hide ….nice login panel.
    –
    I did it and it’s working. all i did was I opended my index with dreamwaver and go do source and i have then I open Show Hide Panel’s Index ‘Copy Code’ Aded to my index .And copyed all the files from This Panel into my root
    And it’s Working great with Opera ,Firefox,But with IE it’s not showing hide panel and it’s kind of stiky…..on all the page.
    –
    finaly
    i would like to ask .
    How to make another one. but Dawn in the template.? gist asame .
    but one that shows you dashboard ….Welcome …. User ..’Nick’…etc?
    –
    And how to make it work? … I mean When someone Wrhite’s his pass and nick name and click Login.
    to work?
    Do i have to make another php or page?
    –
    I’m using Dreamwaver not World Preess,or joomla ….Heres the Screen Shot NEW ONE with What i DONE.
    Tnx Jeeremie.
    Screen 1 Panel Dawn
    –
    Screen 2 Paden Normal
    –
    I finalydid it. but now comes …the hard part how to make it work…..I mean So peaple can realy Login into my site? please if y can help…me cuz i’m a beginer….and CODES And CSS and other is Damn HARD.
    Beginner:)) i did this by non sleaping all night. *_*……..TNX Web-kreation.com is my FAV !!!!!

  76. 76
    alex Says:
    March 20th, 2009 at 6:57 pm

    now i :) ) finaly got it …damn i sould read all your comm :) ) LOL .
    Ok………….’CMS’ is it posible to do it without ………braking or editiing all the template? …….i mean what i did till now….i dont what do disapear:))….

    –
    I was asking…if i upload the template if you could please….do it for me…the Login and th Register Please.
    I ‘m not sleaping for days ..:))
    I was asking if y can do it for me cuz i’m not lazy but i don’t get it,it’s damn hard.
    I no that is not right to ask y this kind of think ..But Please! Jeeremie.
    If you can Help…Please Comment Back.
    and i will upload the template into a filehosting. Tnx again.

  77. 77
    alex Says:
    March 21st, 2009 at 3:49 am

    How to fix this?
    Found 2 errors in style.css

    Affects: Internet Explorer 6.0, 7.0; Internet Explorer for Macintosh 5.2
    –  
    Line 296 <!– The main style sheet –>
    Line 297  <link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen” />
    ____________
    cuz is working with OPERA ,Firefox 3.7,Maxthon, But with IE isnt working.

  78. 78
    Slide Login Panel mit Mootools | Design, Wordpress | Tutorial, Slide-Login-Funktion, Wordpress, Slide, Panel, Login, Verstecken, Anzeigen, Web-Kreation, Anwendungsbeispiel Says:
    March 23rd, 2009 at 10:13 pm

    [...] neue Tutorial von Web-Kreation zeigt ein Anwendungsbeispiel, wie sich mit Mootools ein Login-Formular mit Slide-Funktion (Anzeigen [...]

  79. 79
    Yourbudweiser Says:
    March 25th, 2009 at 1:29 am

    any chance you could post the PSD files so we can edit the colors, borders, etc?

  80. 80
    Jeeremie Says:
    March 25th, 2009 at 10:19 am

    I don’t use Photoshop but Fireworks. If you know to edit PNG files in Fireworks, I can send you the file.

  81. 81
    Broe Says:
    March 26th, 2009 at 8:29 am

    Hey Jeeremie!

    Fantastisc tutorial…. How do you integrate a php login script and where?

    I’ve got the script ready, and tried everything to the the login to work.

    Thought it would work if you put it in after

    example:

    “form script”

    etc.

  82. 82
    Broe Says:
    March 26th, 2009 at 8:32 am

    It dosn’t show symbols…. Thats why the example isn’t longer. Hope you can figure it out?

  83. 83
    Steven Says:
    March 31st, 2009 at 12:27 am

    First of all great work Jeeremie I’m a big fan since today, you clearly have a lot of talent, I was browsing your site for to long today at work :P

    Now the question, everything works alright, although I used Fermin’s script so that the window stays open at refresh. The one problem I have is that every refresh the panel will start at an open state and will close as the website is loaded, very annoying. Could you, Jeeremie or Fermin point me to what to add to the script so this doesn’t happen anymore?

    Please help me!

  84. 84
    Jeeremie Says:
    March 31st, 2009 at 9:48 am

    The panel is not supposed to stay open at refresh or on page load. The javascript and CSS code tell your browser to start the panel in a closed state. I made sure to fix that before releasing this code.

    I have noticed the download file was missing style.css. Maybe another file had been corrupted. I have fixed it so download the file again and install it on your site. Normally it should not start in an opened state.

  85. 85
    Pre Says:
    April 1st, 2009 at 2:40 am

    Dude, I need help, I got some stuff on my page that uses mootools. Then I added your sliding log in that uses jquery, but it’s conflicting with mootools. I searched on the web and you can add a (
    var $j = jQuery.noConflict();

    )
    to your script, but that is not working. how can I get this to work?

  86. 86
    Jeeremie Says:
    April 1st, 2009 at 7:56 am

    Take a look at this page.

  87. 87
    Mike Says:
    April 2nd, 2009 at 10:26 pm

    Great script.

    Is there a way to logout once you’ve logged in? I know it’s probably pretty simple, but I don’t see a way to do it with the given code in the tutorial.

  88. 88
    Sliding Login Panel with jQuery « Graphic Design Blog Says:
    April 3rd, 2009 at 9:13 pm

    [...] Login Panel with jQuery Remember my Sliding Login Panel with Mootools 1.2? Well, I thought it could have been improved both for design and functionnalities and so I did! but [...]

  89. 89
    Create a Nice & Clean Sliding Login Panel in jQuery | Business Marketing Experts Says:
    April 4th, 2009 at 9:20 am

    [...] has showed us how to create a Sliding Login Panel using Mootools. Recently, he has improved both the design and functionalities of the script and released a Nice [...]

  90. 90
    Jeeremie Says:
    April 6th, 2009 at 2:55 pm

    Logout is not working in Wordpress 2.7+.

    Logout link in the jQuery version (see link on top of this page) will work in WP 2.7+. I am going to write the article this week so come back to visit this blog soon or just subscribe to RSS feed.

  91. 91
    Roy Says:
    April 8th, 2009 at 1:39 am

    I’m wondering how this affects SEO… is the hidden content still search-able by bots?

  92. 92
    Jeeremie Says:
    April 8th, 2009 at 9:08 am

    Hi Roy. Yes, it is. Bots scan the whole page, even hidden content.

  93. 93
    Roy Says:
    April 8th, 2009 at 9:15 am

    Excellent… thank you!

  94. 94
    Javid Says:
    April 14th, 2009 at 2:39 am

    This question will seem funny but I would like to make the default view for the login screen to be unhidden. Is there a simple way to do that in the js?

    BTW, very cool!!!

  95. 95
    Jeeremie Says:
    April 14th, 2009 at 10:02 am

    Yes, there’s an easy way to do it. Open fx.slide.js in a text editor (E.g. Notepad) and delete the ‘.hide()‘ function in the code below and the panel will be visible on page load:

    ?View Code JAVASCRIPT
    var mySlide = new Fx.Slide('login').hide();  //starts the panel in closed state
  96. 96
    Eric Says:
    April 17th, 2009 at 6:12 am

    Jeremie,

    Thanks for the tutorial, it was exactly what I needed. I have implemented it to display 4 separate “panels” and it is working fine inf FF, IE, etc with the following exceptions:

    1. The close event only works for the first panel and not the others.

    2. IE6 toggles the content, but the content for the toggled panel remains visible above other page content when I toggle it closed.

    Any thoughts?

  97. 97
    Eric Says:
    April 17th, 2009 at 12:40 pm

    Please disregard item 1 of previous message. I decided to punt on making it work in IE 6.

  98. 98
    younas Says:
    April 19th, 2009 at 3:35 pm

    hi dear thanx

  99. 99
    Useful JavaScript Techniques « the gypsy Says:
    April 19th, 2009 at 4:25 pm

    [...] Show/hide a Login Panel using Mootools 1.2 “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.” [...]

  100. 100
    lahana kapsülü Says:
    April 24th, 2009 at 2:37 am

    thanx

  101. 101
    Stefano Says:
    April 27th, 2009 at 10:27 pm

    Hi!!

    How can I use this with a PHP login script?

  102. 102
    Vivi Says:
    April 28th, 2009 at 2:19 pm

    Hi, there..
    thx very much for this.
    I am just wondering, can it form only be used for login panel?
    not anything else needed to used this kinda of show/hide panel to hind them when they are not used for that moment?

  103. 103
    Iris Says:
    May 2nd, 2009 at 10:03 pm

    Hello everyone,

    First of all I would like to thank Jeeremie for creating this lovely script! So.. thanks!

    Second..I was wondering if it’s possible to create a drop down menu in the optionbox when ur logged in. Meaning..under the option to lets say for example “write article” to have a drop-down menu which is build by javascript.

    I’ve tried several of scripts found on the internet, but it seems to conflict with the script of the login panel..

    I hope everyone understands what I’m asking (english is not my first language) and I hope someone can help me out…

  104. 104
    JSquared, jQuery e MooTools Javascript library | Beat Fly Blog Says:
    May 15th, 2009 at 3:06 pm

    [...] Show/hide a nice Login Panel using Mootools 1.2 [...]

  105. 105
    you0.net Says:
    May 17th, 2009 at 12:44 am

    Thanks

  106. 106
    Nice Javascript Sliding Panel « Samoiloff Blog Says:
    May 19th, 2009 at 10:31 pm

    [...] Web trackback Recently I’ve found very useful for me as develope a site and a component javascript sliding panel. This  panel demonstrates that animations and motion effects can be done not just by flash [...]

  107. 107
    Tom Says:
    May 26th, 2009 at 12:19 am

    Hi Jeeremie, thanks a lot for this great mootools add on.
    I’m using it on my site but I have a little problem, every time I click on the forgot password link the panel closes instead of staying open and loading my password reset form ?

    can you take a quick look see if you know what can it be?
    the site is here:
    http://smartsecuritycamera.com/ and you can see the login panel on the pages. a ‘regular’ login page with correct loading of password reset is here:
    http://smartsecuritycamera.com/login.html

    I think it’s the js the login script has collide with your script and maybe you know of a quick fix?

  108. 108
    Tom Says:
    May 26th, 2009 at 2:39 am

    sorry I got it working. My page failed validation for couple reasons, once fixed the panel works as expected. thank you.

  109. 109
    amy Says:
    June 6th, 2009 at 4:15 am

    I was wondering, when you click on Log In, the panel will show letting you log in, what happens after you are logged in?

    Say the word changes to Log Out. If they click on log out, will the panel show blank since I wont have anything or will it just log out, resetting the page so that when you hit log in, the panel displays the fields?

  110. 110
    amy Says:
    June 6th, 2009 at 5:11 am

    also does it not work when i use tables where the login tab is?

  111. 111
    Jeeremie Says:
    June 7th, 2009 at 12:58 pm

    @Amy, When they log out, panel reset to its initial state with all the fields.

  112. 112
    10 Tips for Incredible Web Forms! | Design Reviver Says:
    June 10th, 2009 at 11:52 pm

    [...] Show/hide a nice Login Panel using Mootools 1.2 [...]

  113. 113
    senthil Says:
    June 20th, 2009 at 3:32 pm

    supper good

  114. 114
    Gustavo Says:
    June 21st, 2009 at 6:14 am

    I need it for mootools v 1.11 any idea?

  115. 115
    Ressources développement Web | C@m Blog Says:
    July 1st, 2009 at 3:41 am

    [...] Web-kreation – Show/hide a nice Login Panel using Mootools 1.2 [...]

  116. 116
    memo - 平々凡々 Says:
    July 6th, 2009 at 4:40 pm

    [...] datepicker http://dev.base86.com/scripts/vista-like_ajax_calendar_version_2.html login http://web-kreation.com/index.php/tutorials/nice-login-and-signup-panel-using-mootools-12/ [...]

  117. 117
    75 (Really) Useful JavaScript Techniques « Ramesh Says:
    July 9th, 2009 at 6:39 pm

    [...] Show/hide a Login Panel using Mootools 1.2 “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.” [...]

  118. 118
    Netfloat Says:
    July 11th, 2009 at 10:56 am

    Nice idea !!

  119. 119
    sd Says:
    July 20th, 2009 at 10:13 pm

    that is good idea..

  120. 120
    Patrick Says:
    July 30th, 2009 at 2:07 am

    Hey i love the slide quick question is there a way to call the slide from another link in the page? I’ve tried else where even within the container and i cant seem to create a second link to call it.

    I ask because i have a link on the page that used to goto a login page, instead i’d like it to pull the slide down now

  121. 121
    Useful Plugins and Resources For MooTools | mavrick Says:
    July 30th, 2009 at 6:36 am

    [...] Show/Hide Login Panel – (MooTools 1.2) Allows you to show/hide login panel on top of your webpage. [...]

  122. 122
    Patrick Says:
    August 1st, 2009 at 8:55 am

    Any suggestions to my above question? I’d like to activate the slide from a link elsewhere in the container. I’ve tried few things that just dont work.

  123. 123
    Diseño web Says:
    August 8th, 2009 at 8:45 am

    Hola, el tutorial esta muy bien explicado y todo funciona perfecto, lo voy a implementar en mi proximo proyecto.

    Saludos

  124. 124
    ChanHan HY Says:
    October 1st, 2009 at 10:10 am

    Excellent!! It’s nice :)

  125. 125
    Sliding Login Panel With MooTools/jQuery | oOrch Blog Says:
    October 2nd, 2009 at 8:21 pm

    [...] using jQuery(improved version in means of design & functionality) [...]

  126. 126
    75 (Really) Useful JavaScript Techniques | 9Tricks.Com - Tips - Tricks - Tutorials Says:
    October 3rd, 2009 at 10:59 am

    [...] Show/hide a Login Panel using Mootools 1.2 “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.” [...]

  127. 127
    Fernando Says:
    October 9th, 2009 at 10:28 pm

    Hey there.

    Really nice. Saved me a bunch of time :)
    BTW, what software/font do you use to to make your notes on your illustrations? They look awesome!

    Tks,
    Fernando

  128. 128
    jeeremie Says:
    October 13th, 2009 at 10:43 am

    @Fernando, I always use Fireworks to design and the font is Bradley Hand ITC.

  129. 129
    10 Tips for Web Forms | Themeflash : One Stop For All Your Web Resources Says:
    October 17th, 2009 at 6:29 am

    [...] Show/hide a nice Login Panel using Mootools 1.2 [...]

  130. 130
    25+ Awesome Slider Techniques NEED TO HAVE for any Web Developer | tripwire magazine Says:
    October 17th, 2009 at 3:35 pm

    [...] a show/hide login/signup panel for your website using jQuery. A mootools version van be found here. Panel overlaps content instead of “pushing” it in a slicker [...]

  131. 131
    The best tutorials combining HTML,CSS,PHP and JQuery | blogfreakz.com Says:
    November 5th, 2009 at 6:49 pm

    [...] my Sliding Login Panel with Mootools 1.2? Well, I thought it could have been improved both for design and functionnalities and so I did! but [...]

  132. 132
    95+ Exceptionally Useful jQuery Plugins, Tutorials and Cheat Sheets | tripwire magazine Says:
    November 15th, 2009 at 2:19 pm

    [...] a show/hide login/signup panel for your website using jQuery. A mootools version van be found here. Panel overlaps content instead of “pushing” it in a slicker [...]

  133. 133
    Best Ever 65 mooTools Plugins « VECTOR Tutorial Says:
    November 17th, 2009 at 8:15 am

    [...] Show/hide a nice Login Pane [...]

  134. 134
    links for 2010-01-04 | claudio schwarz - c.schwarz - claudioschwarz.com Says:
    January 4th, 2010 at 5:03 pm

    [...] Web-kreation – Show/hide a nice Login Panel using Mootools 1.2 (tags: webdesign) [...]

  135. 135
    Meine Link-Tipps für die Woche 01/2010 Says:
    January 6th, 2010 at 12:52 am

    [...] Web-kreation – Show/hide a nice Login Panel using Mootools 1.2 – VN:F [1.8.0_1031]Rating: 0 (from 0 votes) [...]

  136. 136
    dhamasito Says:
    January 8th, 2010 at 12:23 pm

    Muchas gracias por tu aporte, lo voy a utilizar en mi proximo proyecto y creo que va a quedar super , yesss
    hasta luego y un saludo desde méxico.

    You don´t speak spanish???
    Don´t worry, now in english:
    thank you, thank you very much for your contribution.
    see you later, greetings from méxico.

  137. 137
    eagrapho » 20 Excellent Mootools Techniques for Rich User Interface Says:
    January 20th, 2010 at 10:01 pm

    [...] 1. Show/hide a nice Login Panel using Mootools 1.2 [...]

  138. 138
    GH Web Design Says:
    February 4th, 2010 at 8:17 am

    This is a great amount of information on how to show/hide your login. I appreciate the step by step instructions.

  139. 139
    gokhan Says:
    February 6th, 2010 at 3:47 pm

    thank you good information oyunteksas

  140. 140
    hanatwity Says:
    February 23rd, 2010 at 8:47 pm

    nice work,,thnx a lot
    but i cant use any sliding panels with this sliding login panel…
    plz,, i need some help here…..

  141. 141
    Showing and Hiding Content: 10 tips | MikeCapson.com | A Saint John Web Designer Says:
    March 2nd, 2010 at 7:03 am

    [...] 4. Show/hide a nice Login Panel using Mootools 1.2 [...]

  142. 142
    Rahul Says:
    March 6th, 2010 at 12:39 am

    i want the direct link to download this plugin as i dont know javascript,css at all :) please :)

  143. 143
    Web-kreation - Nice & Clean Sliding Login Panel built with jQuery Says:
    March 6th, 2010 at 10:23 am

    [...] Show/hide a nice Login Panel using Mootools 1.2Nice & Clean Sliding Login Panel built with jQuery48 incredible Mootools Sripts100 + 1 FREE photo/image galleries (AJAX, Flash, PHP)Simplicity, Elegance, ProfessionalismLightForm ::: Free Ajax/PHP Contact FormSliding login/Signup panel using MooSlide (Mootools 1.2)OneRoom – Another free Wordpress Theme by Web-KreationMorph Effect on mouseenter/mouseleave with Mootools 1.2Add a show/hide login panel to your Wordpress theme using Mootools [...]

  144. 144
    clicknepal Says:
    March 7th, 2010 at 11:14 am

    Really nice. Saved me a bunch of time :)
    BTW, what software/font do you use to to make your notes on your illustrations? They look awesome!

  145. 145
    jeeremie Says:
    March 7th, 2010 at 1:08 pm

    I used Fireworks CS4 but you could do the same in Photoshop or Illustrator.

 

Leave a Reply

Wrap all code in <pre lang="LANGUAGE" colla="-">...</pre> and replace 'LANGUAGE' by 'html4strict' for HTML, 'php', 'javascript', 'css'...