Tuesday, August 19th, 2008

Ajaxian Featured Tutorial: Show/Hide Login Panel Built with MooTools

Category: MooTools, Tutorial

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.

Posted by Rey Bango at 10:27 am

3.5 rating from 17 votes


Comments feed TrackBack URI

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

Comment by ChadB — August 19, 2008

It looks like an old version of Shaun Inman’s site

Comment by rizqi — August 19, 2008

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.

Comment by gonchuki — August 19, 2008

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

Comment by RobFrontEndDeveloper — August 20, 2008

Hey, we’ve been doing that over at hiwired.com for about a year! Nice.

Comment by dirtynine — August 28, 2008

Leave a comment

You must be logged in to post a comment.