Tuesday, August 19th, 2008
Ajaxian Featured Tutorial: Show/Hide Login Panel Built with MooTools
Conserving screen real-estate while still providing good content to the user has always been a challenge for designers and developers and while larger screen dimensions are becoming more prominent, it’s still important to take full advantage of the space available to you. Jeeremie over at Web Kreation came up with a very cool method of display a login panel using MooTools v1.2’s built-in effects capabilities:
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.
Jeeremie walks you through the steps of dropping this code into your site and provides the final source code as well to make the whole process painless. The end result is a very nice and intuitive slide down login panel which provides a nice balance of functionality and preserving screen real-estate.
The biggest problem with this, at least as-implemented at the link provided, is its atrocious lack of error handling.
If I type in the wrong username or password it just looks like the screen blinks and I have no idea if anything’s happened or not.
Maybe a hidden field maintaining the widget’s display state could be added so that the server can dynamically add script to automatically re-show the panel after a failed POST (with error messages, of course).
It looks like an old version of Shaun Inman’s site
looks like the operator11 login pulldown.
just that the o11 one was built almost a year ago, so much for “he came up with”… anyways, not innovative at all but still looking great :)
also speaking of the code, seems the author doesn’t know about the Fx.Slide element shortcuts. he could have used $(’login’).slide(’hide’) and the other methods instead of creating the mySlide var.
Not bad, some guys at Lightmaker have done a very similar one in jQuery over at lewishamilton.com, very slick and easy to roll back for those not lucky enough to experience Javascript :)
Hey, we’ve been doing that over at hiwired.com for about a year! Nice.