Sliding Login Panel with 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. 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
Step 1: The structure
Before we get to the code, I would like to illustrate the HTML structure used in this script:
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:
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"> </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):
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:
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:
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:
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.
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
Want to become a guest author on this blog?
Wifsimster says:
3 Aug, 2008
Toujours aussi bien
et vive Mootools !
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
Jeremie Tisseau says:
4 Aug, 2008
Effectivement, c tait peut- tre pas n cessaire. Merci pour le commentaire.
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)
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…
Sylvain says:
7 Aug, 2008
Sinon l effet rendu est vraiment tip-top !
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.
acms says:
7 Aug, 2008
Bien jou , merci Jeremie Tisseau d avoir partag .
colin says:
7 Aug, 2008
is it possable to have the login page to slide over the page and not push the content down.
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.
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.
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.
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.
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:
And last, create the link that will open MooSlide:
Frank says:
8 Aug, 2008
Pretty well explained @Jeremie Couldn t do better
Jeremie Tisseau says:
8 Aug, 2008
Oops! Thanks Frank. We were writing comments at the same time.
Colin says:
8 Aug, 2008
Cheers guys thats just what I needed. great work !
Ekrem B y kkaya says:
9 Aug, 2008
wonderful
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…
Jeremie Tisseau says:
19 Aug, 2008
Thanks Rey!
yannick says:
20 Aug, 2008
Sous firefox 3 (linux Ubuntu), j ai un decalage des deux boites de saisie.. dommage
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!
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.
Jeremie Tisseau says:
22 Aug, 2008
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.
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 !
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!!
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 );
});
});
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:
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!
diego says:
5 Sep, 2008
fixed. I had a position: absolute; in the other style and I changed it to relative.
Jeremie Tisseau says:
8 Sep, 2008
@3lr0n: Here s how you can do it:
fx.slide.js:
The HTML:
… and the css:
This code will close the first panel before opening the second panel and viceversa. You can see a demo here »
3lr0n says:
8 Sep, 2008
Hello Jeremie Tisseau,
well done
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
3lr0n
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.
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!!!)
3lr0n says:
8 Sep, 2008
Hello Jeremie Tisseau,
the code works
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
Many many thks
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?
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:
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?
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!
Adrien says:
10 Sep, 2008
Magnifique!
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:diego says:
10 Sep, 2008
Thanks! 2nd option worked great!!! (the first option was already on my code but did t work on IE)
Jaswinder Virdee says:
12 Sep, 2008
I see a little woork inspiration in this post… good work nonetheless
DarkWolf says:
18 Sep, 2008
Hey! thanks!
Very awesome results.
I ll use it for my band s website =)
Mr. Yank says:
18 Sep, 2008
Great script.
But doesn t work if you are using the prototype.js framework in the same page.
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.
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…
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.
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
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.
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
Jeremie Tisseau says:
29 Nov, 2008
Check this post: Sliding login/Signup panel using MooSlide (Mootools 1.2)
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 !
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.
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&redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Log Out</a>
Have you tried with that code?
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……
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….
Jeremie Tisseau says:
11 Dec, 2008
Thanks for posting the solution here. That s good to know it.
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.
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
Himel Khan says:
17 Jan, 2009
Great Tutorial.
i will apply it on my project.
Will says:
26 Jan, 2009
Very nice, I will have to start using mootools!
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
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.
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.
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:
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”.
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.
Thunder says:
21 Feb, 2009
Hi,
great job!!!! It is possible, that I use your Login in a commercial project?????
Best regards
Jeremie Tisseau says:
21 Feb, 2009
Yes, np.
Thunder says:
21 Feb, 2009
Thx!!!!!!
Have a great time!!!
Thunder
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/
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!)
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 !!!!!
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.
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.
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.
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.
Broe says:
26 Mar, 2009
It dosn t show symbols…. Thats why the example isn t longer. Hope you can figure it out?
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
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!
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.
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?
Jeremie Tisseau says:
1 Apr, 2009
Take a look at this page.
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.
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.
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.
Roy says:
8 Apr, 2009
Excellent… thank you!
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!!!
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:
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?
Eric says:
17 Apr, 2009
Please disregard item 1 of previous message. I decided to punt on making it work in IE 6.
younas says:
19 Apr, 2009
hi dear thanx
lahana kaps l says:
24 Apr, 2009
thanx
Stefano says:
27 Apr, 2009
Hi!!
How can I use this with a PHP login script?
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?
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…
you0.net says:
17 May, 2009
Thanks
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?
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.
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.
amy says:
6 Jun, 2009
also does it not work when i use tables where the login tab is?
senthil says:
20 Jun, 2009
supper good
Gustavo says:
21 Jun, 2009
I need it for mootools v 1.11 any idea?
Netfloat says:
11 Jul, 2009
Nice idea !!
sd says:
20 Jul, 2009
that is good idea..
Patrick says:
30 Jul, 2009
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
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.
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
ChanHan HY says:
1 Oct, 2009
Excellent!! It s nice
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
Jeremie Tisseau says:
13 Oct, 2009
@Fernando, I always use Fireworks to design and the font is Bradley Hand ITC.
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.
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.
gokhan says:
6 Feb, 2010
thank you good information oyunteksas
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 ..
Rahul says:
6 Mar, 2010
i want the direct link to download this plugin as i dont know javascript,css at all please
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!
Jeremie Tisseau says:
7 Mar, 2010
I used Fireworks CS4 but you could do the same in Photoshop or Illustrator.
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
kaan says:
22 Mar, 2010
good very good
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.
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.)
Nikunj says:
28 Mar, 2010
Will find a way to implement it on wordpress
Jeremie Tisseau says:
28 Mar, 2010
@Nikunj, I explain it here »
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
Jeremie Tisseau says:
28 Mar, 2010
Basically, you just have to remove .hide() from this line in the JS:
That way, the panel will always be opened on page load.
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.
divxcini says:
6 Apr, 2010
ty :D:D
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.
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.
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..!
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
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
Consuelo says:
4 Aug, 2010
Hi Tony,
I was able to add that functionality.
Your button/link should be something like this:
On the slide.js file you need to repeat the open function but change the id to #open1
That worked for me.
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
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.
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.:)
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
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
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?
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…
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
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 ?
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
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
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.
Emmanuel says:
13 Apr, 2011
Hi can i implement this in html page?
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
art says:
18 May, 2011
is it possible to let the Panel overlap the content instead of pushing it?
Dana says:
20 May, 2011
THX A LOT ^^
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.
Jeeremie says:
13 Jun, 2011
Qu est-ce que tu veux dire?
Noteworthy says:
13 Jun, 2011
J ai pas trouv la source correspondante cette d mo:
http://web-kreation.com/demos/2_sliding_login_panels_mootools_1.2/
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.
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
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?
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.
Perra says:
29 Jul, 2011
I ve just realised the newer version uses jQuery! Which works fine in IE9.
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
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.
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….
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?
Ashish says:
6 Feb, 2012
wow, its cool.. nice login box.. lemme intergrate in my new site.. thanx
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
jas says:
3 Apr, 2012
Hello it is good, but the panel stays open IE8,it doesnt toggle please help
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!
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?
a.r.bhuyan says:
9 Aug, 2012
Its really cool buddy. thanks for sharing