show/hide login form using Mootools 1.2

August 3, 2008

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

Sliding Login Panel with Mootools 1.2

Article written by Jeeremie
A new version of this script is available here. The 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.

Preview / Download

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

demoDownload(32.8 KiB, 68,016 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 2: 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
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
<!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
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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
/* 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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
1
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
1
2
3
4
5
6
7
8
9
<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.

demoDownload(32.8 KiB, 68,016 hits)

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 »

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.

Want to become a guest author on this blog?

180 Comments

  1. Wifsimster says:

    3 Aug, 2008

    Toujours aussi bien ;)
    et vive Mootools !

  2. Paco says:

    4 Aug, 2008

    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. Jeremie Tisseau says:

    4 Aug, 2008

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

  4. Denis Sudilkovskyy says:

    6 Aug, 2008

    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. Sylvain says:

    7 Aug, 2008

    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. Sylvain says:

    7 Aug, 2008

    Sinon l’effet rendu est vraiment tip-top !

  7. Jeremie Tisseau says:

    7 Aug, 2008

    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. acms says:

    7 Aug, 2008

    Bien joué, merci Jeremie Tisseau d’avoir partagé.

  9. colin says:

    7 Aug, 2008

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

  10. Jeremie Tisseau says:

    7 Aug, 2008

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

  11. Jeremie Tisseau says:

    7 Aug, 2008

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

  12. Colin says:

    7 Aug, 2008

    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. Frank says:

    8 Aug, 2008

    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. Jeremie Tisseau says:

    8 Aug, 2008

    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
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    
    <!-- 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
    1
    
    <a href="#" id="toggle" rel="nofollow">Login</a>
  15. Frank says:

    8 Aug, 2008

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

  16. Jeremie Tisseau says:

    8 Aug, 2008

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

  17. Colin says:

    8 Aug, 2008

    Cheers guys thats just what I needed. great work !

  18. Ekrem Büyükkaya says:

    9 Aug, 2008

    wonderful

  19. Rey Bango says:

    19 Aug, 2008

    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…

  20. Jeremie Tisseau says:

    19 Aug, 2008

    Thanks Rey! :)

  21. yannick says:

    20 Aug, 2008

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

  22. Ryan says:

    20 Aug, 2008

    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!

  23. Yereth says:

    21 Aug, 2008

    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.

  24. Jeremie Tisseau says:

    22 Aug, 2008

    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.

  25. Eroan Boyer says:

    29 Aug, 2008

    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 !

  26. Jeremie Tisseau says:

    29 Aug, 2008

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

  27. ctran says:

    3 Sep, 2008

    # 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’);
    });
    });

  28. Jeremie Tisseau says:

    4 Sep, 2008

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

    Their code is slightly different:

    ?View Code JAVASCRIPT
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    
    <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>
  29. diego says:

    5 Sep, 2008

    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!

  30. diego says:

    5 Sep, 2008

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

  31. Jeremie Tisseau says:

    8 Sep, 2008

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

    fx.slide.js:

    ?View Code JAVASCRIPT
    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
    
    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
    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
    
    <!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:

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

  32. 3lr0n says:

    8 Sep, 2008

    Hello Jeremie Tisseau,

    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

  33. Jeremie Tisseau says:

    8 Sep, 2008

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

  34. 3lr0n says:

    8 Sep, 2008

    Hello Jeremie Tisseau,

    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 ;)

  35. diego says:

    9 Sep, 2008

    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?

  36. Jeremie Tisseau says:

    9 Sep, 2008

    @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
    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
    
    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?

  37. Diego says:

    9 Sep, 2008

    @Jeremie Tisseau 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!

  38. Adrien says:

    10 Sep, 2008

    Magnifique!

  39. Jeremie Tisseau says:

    10 Sep, 2008

    @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:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    #login {
     width: 100%;
     color: white;
     background: #1E1E1E;
     overflow: hidden;
     position: relative;
     z-index: 3;
     display: none;
    }
  40. diego says:

    10 Sep, 2008

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

  41. Jaswinder Virdee says:

    12 Sep, 2008

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

  42. DarkWolf says:

    18 Sep, 2008

    Hey! thanks!
    Very awesome results.

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

  43. Mr. Yank says:

    18 Sep, 2008

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

  44. Fermin says:

    22 Sep, 2008

    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
    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
    
    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
    	});
    });
  45. manik says:

    25 Sep, 2008

    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…

  46. Tommix says:

    25 Oct, 2008

    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.

  47. Jason says:

    15 Nov, 2008

    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

  48. Jeremie Tisseau says:

    15 Nov, 2008

    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.

  49. tester says:

    29 Nov, 2008

    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

  50. Ian says:

    11 Dec, 2008

    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 !

  51. Jeremie Tisseau says:

    11 Dec, 2008

    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.

  52. Jeremie Tisseau says:

    11 Dec, 2008

    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?

  53. Ian says:

    11 Dec, 2008

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

  54. Ian says:

    11 Dec, 2008

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

  55. Jeremie Tisseau says:

    11 Dec, 2008

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

  56. Larry Bradshaw says:

    16 Dec, 2008

    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.

  57. Ozan Kilic says:

    8 Jan, 2009

    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 ;)

  58. Himel Khan says:

    17 Jan, 2009

    Great Tutorial.
    i will apply it on my project.

  59. Will says:

    26 Jan, 2009

    Very nice, I will have to start using mootools!

  60. ClubUgly says:

    4 Feb, 2009

    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

  61. Jeremie Tisseau says:

    4 Feb, 2009

    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.

  62. ClubUgly says:

    4 Feb, 2009

    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.

  63. Jeremie Tisseau says:

    4 Feb, 2009

    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:

    1
    2
    3
    4
    
    #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”.

  64. ClubUgly says:

    5 Feb, 2009

    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

  65. Thunder says:

    21 Feb, 2009

    Hi,

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

    Best regards

  66. Jeremie Tisseau says:

    21 Feb, 2009

    Yes, np.

  67. Thunder says:

    21 Feb, 2009

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

    Thunder

  68. sokai says:

    3 Mar, 2009

    Thanks a lot Jeremie Tisseau 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

    • Jeremie Tisseau says:

      3 Mar, 2009

      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/

  69. alex says:

    20 Mar, 2009

    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!

    • Jeremie Tisseau says:

      20 Mar, 2009

      @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!)

  70. alex says:

    20 Mar, 2009

    Hi! Jeremie Tisseau …..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 Jeremie Tisseau.
    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 !!!!!

  71. alex says:

    20 Mar, 2009

    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! Jeremie Tisseau.
    If you can Help…Please Comment Back.
    and i will upload the template into a filehosting. Tnx again.

  72. alex says:

    21 Mar, 2009

    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.

  73. Yourbudweiser says:

    25 Mar, 2009

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

    • Jeremie Tisseau says:

      25 Mar, 2009

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

  74. Broe says:

    26 Mar, 2009

    Hey Jeremie Tisseau!

    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.

  75. Broe says:

    26 Mar, 2009

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

  76. Steven says:

    31 Mar, 2009

    First of all great work Jeremie Tisseau 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, Jeremie Tisseau or Fermin point me to what to add to the script so this doesn’t happen anymore?

    Please help me!

  77. Jeremie Tisseau says:

    31 Mar, 2009

    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.

  78. Pre says:

    1 Apr, 2009

    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?

  79. Jeremie Tisseau says:

    1 Apr, 2009

    Take a look at this page.

  80. Mike says:

    2 Apr, 2009

    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.

  81. Jeremie Tisseau says:

    6 Apr, 2009

    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.

  82. Roy says:

    8 Apr, 2009

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

    • Jeremie Tisseau says:

      8 Apr, 2009

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

  83. Roy says:

    8 Apr, 2009

    Excellent… thank you!

  84. Javid says:

    14 Apr, 2009

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

  85. Jeremie Tisseau says:

    14 Apr, 2009

    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
    1
    
    var mySlide = new Fx.Slide('login').hide();  //starts the panel in closed state
  86. Eric says:

    17 Apr, 2009

    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?

  87. Eric says:

    17 Apr, 2009

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

  88. younas says:

    19 Apr, 2009

    hi dear thanx

  89. lahana kapsülü says:

    24 Apr, 2009

    thanx

  90. Stefano says:

    27 Apr, 2009

    Hi!!

    How can I use this with a PHP login script?

  91. Vivi says:

    28 Apr, 2009

    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?

  92. Iris says:

    2 May, 2009

    Hello everyone,

    First of all I would like to thank Jeremie Tisseau 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…

  93. you0.net says:

    17 May, 2009

    Thanks

  94. Tom says:

    26 May, 2009

    Hi Jeremie Tisseau, 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?

  95. Tom says:

    26 May, 2009

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

  96. amy says:

    6 Jun, 2009

    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?

    • Jeremie Tisseau says:

      7 Jun, 2009

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

  97. amy says:

    6 Jun, 2009

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

  98. senthil says:

    20 Jun, 2009

    supper good

  99. Gustavo says:

    21 Jun, 2009

    I need it for mootools v 1.11 any idea?

  100. Netfloat says:

    11 Jul, 2009

    Nice idea !!

  101. sd says:

    20 Jul, 2009

    that is good idea..

  102. Patrick says:

    30 Jul, 2009

  103. Patrick says:

    1 Aug, 2009

    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.

  104. Diseño web says:

    8 Aug, 2009

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

    Saludos

  105. ChanHan HY says:

    1 Oct, 2009

    Excellent!! It’s nice :)

  106. Fernando says:

    9 Oct, 2009

    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

  107. dhamasito says:

    8 Jan, 2010

    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.

  108. GH Web Design says:

    4 Feb, 2010

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

  109. gokhan says:

    6 Feb, 2010

    thank you good information oyunteksas

  110. hanatwity says:

    23 Feb, 2010

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

  111. Rahul says:

    6 Mar, 2010

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

  112. clicknepal says:

    7 Mar, 2010

    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!

  113. Jeremie Tisseau says:

    7 Mar, 2010

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

  114. Harj Panesar says:

    18 Mar, 2010

    Hi

    I am trying the sliding login system. Everything works fine the only issue I have is that I want each user in my database to only have access to files within their allocated directory and not be able to access other users directory.

    Can someone help me in coding this into the PHP.

    Thanks

  115. kaan says:

    22 Mar, 2010

    good very good

  116. frmars says:

    23 Mar, 2010

    Hello
    I’ve tried your mootools sliding panel and adapted it to my needs. It works very well. Many thanks.

    However, one question remains :
    For example, let’s say the user who tries to register makes a mistake and types a wrong password, or a bad name.

    I would like my wordpress theme NOT to process the data and keep the panel open, OR at least to process the data BUT TO KEEP the PANEL OPEN when the page is refreshed, to show the error messages.

    How could i do that ?

    • Jeremie Tisseau says:

      24 Mar, 2010

      @frmars, I understand what you mean but that is not that simple. I have already tried once to implement a contact form with the great Contact Form 7 in WordPress but when you hit the send button, the lightbox just closed and we had to open the lightbox again to see if the message was sent successfully or not. I tried to fix it by looking at other scripts and basically what they seem to do is to trigger the panel open when user hit the send button. Easier to say than to do though. Maybe some Mootools or Javascript expert could better put you on the track.

  117. frmars says:

    26 Mar, 2010

    Thank you for your answer. I will leave this matter to more learned java experts.

    I encounter other problems at the moment with your script :

    1) the script seems to “time out”. It works for a while, but if I leave my screen, make myself a coffee and come back to the SAME PAGE, the script no longer works and the panel doesn’t open. Aaaaarrgh ! WTF ?

    2) the scripts works all right on the HOME PAGE but, though all code is IN THE HEADER (and loaded everytime), it DOESN’T WORK on other WordPress pages (inside articles, etc…) Would you have any clue as to why ?

    (bon, je cause anglais parce que ca servira au plus grand nombre, mais c’est-y-pas malheureux de devoir se parler anglais entre francophones.)

  118. Nikunj says:

    28 Mar, 2010

    Will find a way to implement it on wordpress

  119. frmars says:

    28 Mar, 2010

    Jeremie Tisseau

    I think I will solve all my issues. But I do pray you to answer this single question, which is a code and programming issue (and I am not competent) :

    What parameter must be changed so that, on arriving on homepage, your panel is displayed as OPEN (and not closed) (thus forcing the reader to close it)

    In other words, I want to have the “toggle” the other way round : The panel shows systematically (I will then set conditions) and you click to CLOSE it, not to OPEN it.

    Thanks

  120. Jeremie Tisseau says:

    28 Mar, 2010

    Basically, you just have to remove .hide() from this line in the JS:

    ?View Code JAVASCRIPT
    1
    
    var mySlide = new Fx.Slide('login').hide();

    That way, the panel will always be opened on page load.

  121. Accappella Creative says:

    29 Mar, 2010

    Great post and thank you for the generous giving of the source files. Lovely simple script, came in so handing for me, a new Mootools user. :)

  122. divxcini says:

    6 Apr, 2010

    ty :D:D

  123. Marieken says:

    22 Apr, 2010

    Hi Jeremie Tisseau,

    This looks really great!!

    Would it also be possible to have the panel slide from up from the bottom instead of down from the top?
    It is this script I would like to use.
    http://web-kreation.com/demos/2_sliding_login_panels_mootools_1.2/
    Thanks so much!!
    Marieken

    • Jeremie says:

      23 Apr, 2010

      Nope. To modify the javascript, html and css is not too complicated but you will also have to modify the images for the tab (a simple “Flip Vertical” in Photoshop should do).

      Because of the high demand, I will probably create 3 more versions of the jQuery version. One at the bottom and two on the sides. I might also update this Mootools version later on and apply the new design I made for the jQuery version.

  124. Prime says:

    27 Apr, 2010

    Hey Jeremie Thank you for this script really works for me it really boost up the look of my site.

    For others that was asking if this can be integrate to WP? Yes it can and it works, absolutely beautiful. Check http://www.gameuber.com how it works.

  125. php bug fixing says:

    22 Jun, 2010

    Hi Jeeremie..,
    You had a great job. Its a nice article to you post. Good keep doing posted the article.
    Thanks a lot..! :-)

  126. Tony says:

    5 Jul, 2010

    Bonjour,
    Superbe boulot ! Merci !
    Petite question, comment peut-on faire un lien pour ouvrir le slide.
    J’ai fait un slide de connexion et j’aimerai que le slide s’ouvre quand quelqu’un essaye de faire qqch qui requiert de se loger.

    Merci d’avance,

    Tony

  127. Tony says:

    5 Jul, 2010

    Sorry might be easier in English: My question was, how can I have a link that opens the slide.
    This link would be out of the slide, any where in the page. So that if someone wants to do something that requires to login, the slide would open.

    Thanks

    Tony

  128. Consuelo says:

    4 Aug, 2010

    Hi Tony,

    I was able to add that functionality.
    Your button/link should be something like this:

    ?View Code HTML4STRICT
    1
    
    <a href="#" rel="nofollow">Register</a>

    On the slide.js file you need to repeat the open function but change the id to #open1

    That worked for me.

  129. Consuelo says:

    4 Aug, 2010

    Oops! the code didn’t go through when I post it. Here it is again.

    ()()”Register()()

    *ignore parenthesis. Sorry I didn’t know how to format the code to show

  130. Consuelo says:

    4 Aug, 2010

    well it seems like I cannot give you the answer Tony. If you know how to add code to this post let me know and I’ll give you the answer. Sorry

    • Jeeremie says:

      4 Aug, 2010

      Hi Consuelo. To add code to a comment, you must use <pre lang=”LANG”>your code here</pre>

      Replace ‘LANG’ with ‘html4strict’ for html (without the quotes), ‘php’, ‘css’, ‘javascript’…

      It is not the first time, my commenters cannot attach a code to a comment. I am wondering if WordPress allows non-registered users to write a piece of code. If you can’t write the code, send it to me by email and I shall rectify it.

  131. Hitesh Panchal says:

    6 Aug, 2010

    Hi,

    I want to show sliding panel at the bottom. can i do this thing with this plugin ?

    Please reply me.

    regards,
    Hitesh Panchal

    • eric says:

      8 Aug, 2010

      You can use the css and modify the position accordingly such that it is place at the “bottom” of the browser.:)

  132. eric says:

    8 Aug, 2010

    Hi,

    Anyone knows how to prevent the login panel from sliding up when the “login button” is clicked? (Cases where validations are required for the textbox). For example “Password must not be blank”. For such case, when the login button is clicked the panel should not slide up.

    Thanks!

    Regards
    Eric Ferdinand kaw

  133. Jonathan says:

    7 Sep, 2010

    Hi,
    When I enter login credentials and click the Submit button, the page reloads… cool. I’m new to all this, and for the life of me I cant work out why it reloads, as far as i can tell the submit button has no events attached to it.

    Also ive implemented this into an sap.net page, and would like to authenticate users to aspnetdb once i click the Submit button, so should I attach an event that will do this to the button somehow?

    Nice tutorial, sorry im so noob

  134. Silvia says:

    24 Sep, 2010

    Hello Jeeremi !
    I´m writing form good old germany. Thanks for this great code and example ! The login ist function but i want to use the toogle-function two times for two different containers. I´ve tried with id “logintwo” in a new js-file and give the container the new ids. But it doesn`t function. Now only the logintwo opens and close. May you help me?

  135. Abe says:

    24 Sep, 2010

    Jeeremie –

    Im your biggest fan – that panel is fantastic!!

    Ive implemented it ofcourse on my website and I invite you to come visit please.

    But now today – I just observed, that the logout button doesnt quite work on the panel.

    Sliding is fine – logging in is fine, but log out button acts strangely.

    It logs one out – but still appears as :

    Log Out | Close Panel :/

    Would you have a comment for me … WP novice here…

    Thankss…

  136. jebajseti says:

    26 Sep, 2010

    Hi,

    like the script very much it works fine

    just 1 thing i dont like
    when i click login and then dropdown slides, also my page goes down. I would want it that it goes over the page and not moves the page. Also visibility should be over page not up at page.

    Hope someone can help me

  137. imtiaz says:

    10 Jan, 2011

    I have installed the WordPress version but I dont like the way the registration column displays all fields, thus causing it cut off my registration. The html version with the REGISTER LINK is much nicer. Can I have that in the wordpress version ?

  138. saran says:

    7 Mar, 2011

    my site has black background, can you provide png-24 images with transparent background?

    • Jeeremie says:

      8 Mar, 2011

      Check the jQuery version then. There’s a link in the post

  139. jovie says:

    17 Mar, 2011

    jeeremie,where is the step 2 lol..

    • Jeeremie says:

      21 Mar, 2011

      Oops, you are right. I have edited this post a couple of time and never saw I had “step 3″ twice :( Thanks for reporting

  140. Erwin says:

    24 Mar, 2011

    Hi Jeeremie,

    How could I do a bar like this: http://www.constantcontact.com using your code?

    I mean, bottom of my website.

  141. Emmanuel says:

    13 Apr, 2011

    Hi can i implement this in html page?

  142. Dana says:

    29 Apr, 2011

    plz i can’t found the image
    all tutorial really great and i do it perfect but the image i can’t found also the download like was broken so i just copy and past the codes
    so i just need the img plz TT

    • Jeeremie says:

      4 May, 2011

      It has been fixed. It was a problem with the latest WordPress upgrade. Thanks for reporting

  143. art says:

    18 May, 2011

    is it possible to let the Panel overlap the content instead of “pushing” it?

  144. Dana says:

    20 May, 2011

    THX A LOT ^^

  145. Noteworthy says:

    12 Jun, 2011

    Hello man,

    Je me demande si tu gardes toujours la source de cette démo ? :

    2_sliding_login_panels_mootools_1.2

    Merci bcp.

  146. Ali says:

    13 Jun, 2011

    Bonjour,
    Très joli tuto, pourrais-je l’adapter à vBulletin pour ensuite le partager à la communauté vBulletin ?
    Merci d’avance pour votre réponse.
    Ali

    • Jeeremie says:

      14 Jun, 2011

      Oui bien sûr… mais vérifies avant. Je crois que quelqu’un l’a déjà porté à vBulletin.

  147. Ali says:

    15 Jun, 2011

    Okay, Cool merci :) Oui, je vais vérifier et en même temps, je vais l’adapter vu que vBulletin est passer en 4.x :)
    Merci encore ;)

  148. Yumiko says:

    20 Jul, 2011

    How can i do like the previous “Sliding Login Panel with Mootools 1.2″ effect? The whole content will pull down. Is it possible?

  149. Perra says:

    29 Jul, 2011

    Sorry to trouble you, is there a fix for IE9 as I can’t seem to get it working?

    If not, I will continue to try and work it out and I’ll post the results if I ever fix it.

  150. Perra says:

    29 Jul, 2011

    I’ve just realised the newer version uses jQuery! Which works fine in IE9.

  151. Developer says:

    29 Jul, 2011

    Hi,
    I have used your code but it is not working in IE9.The Panel is open on load of the window of IE9 and does not shut on click whereas in all browser its work fine.
    Please give some tips how i can solve this one.

    Thank you

  152. Fabiano Souza says:

    2 Aug, 2011

    Hello, congratulations for the site and initiative in the first place!

    I want to report that not one of the links work in IE9 is a bug?

    Link 01 – http://web-kreation.com/demos/2_sliding_login_panels_mootools_1.2/

    Link 02 – http://web-kreation.com/demos/login_form_mootools_1.2/

    • Jeeremie says:

      2 Aug, 2011

      Not a bug. When I created this script, IE9 didn’t exist yet. I don’t have time to maintain these scripts anymore. Please use the jQuery version instead. Thanks.

  153. Benjamin says:

    7 Oct, 2011

    I am looking for something for joomla 1.7

    • Azzurro says:

      9 Jan, 2012

      i’m looking also for an Joomla solution, joomla is using mootools, i’t can’t be a good idea to additional loading jquery-libary……. every working fine for me right no, but IE9 makes me crying….

  154. Craig says:

    9 Jan, 2012

    Any way of getting this to work with moo tools mouse enter and mouse leave event instead of the toggle?

  155. Ashish says:

    6 Feb, 2012

    wow, its cool.. nice login box.. lemme intergrate in my new site.. thanx

  156. Alex says:

    28 Feb, 2012

    Hello Jeremie,

    Firstly I love the panel it so slick. I am trying to incorporate it to my site but I am having an issue. I feel a little cheaky asking this because its above the call of duty but here goes. I am using the login panel on my site (not yet live) but I have two tabs the first on the left and second on the right. Unfortunately I have been forced to use a java script to insert the tab_b background image for the second tab is it overlaps the other tab so when ‘open’ is clicked is calls my function that inserts the tab_b image to tab so it looks ok. My problem is with IE6 png fix. It works brilliantly for tab 1 but because i am calling a function to insert image on click the pnf fix JS doenst work. Really sorry to ask this but do you have any ideas ?
    Thanks thanks thanks :)

  157. jas says:

    3 Apr, 2012

    Hello it is good, but the panel stays open IE8,it doesnt toggle please help

  158. Juergen says:

    22 Jun, 2012

    Hi,

    is it possible to let this bar slide horizontal? I would like to use it for a vertical navigation which is on the left of my site. when i click open, i want the bar to slide out from the left to the right hand site…

    THX!

  159. juan carlos says:

    12 Jul, 2012

    tengo el problema que al agregarlo a una pagina no veo el fondo de la pagina, ya que elegi uno con motivo y de color rojo y directamente no lo veo estoy incorporando el fondo de la pagina con el Dreamweaver, como lo soluciono?

  160. a.r.bhuyan says:

    9 Aug, 2012

    Its really cool buddy. thanks for sharing

Leave a Reply

Sorry, comments are closed