Creating a drop down Twitter Login box with Dojo

Creating a Twitter-esque login box with Dojo

Introduction

I promised a few blogs (and more to come in the future) to showcase some of Dojo’s quick & easy wow features. First up, a -esque login box for Dojo. I assume that you already know the basics about Dojo and have included Dojo somewhere in your project. If not, please check out Dojo Campus and the Dojo Toolkit homepage for getting the basics.

The Login Box

Twitter is a very clean and easy to use website. One really cool feature they have is a pop-down login box that stays hidden until the user clicks on it. The majority of the box is done in CSS but the box does require a touch of JavaScript to bring it to life.

The HTML

Let’s get the ball rolling by setting up the HTML.


A Twitter login box!

        
                Login ▼
        
        
                
                        
                                Username
                                
                        
                        
                                Password
                                
                        
                        
                                
                                
                                Remember me

If you load your page in a browser you should have something that looks similar to the image below.

The CSS

That brings me back to the good ole’ days. Let’s spruce it up a bit with a little CSS. Add the CSS below to the section of the page we created earlier.

I’m not a designer but at least it looks a little better.

The Dojo

Now then, onto the fun stuff! Let’s make use of Dojo and use dojo.connect() to make the login box come to life.

The End

That’s all there is to it! With a little touching up of the CSS you can make a box that looks identical to Twitter’s or, better yet, customize it to suit your site. I’ll be posting more wowie Dojo snippets in the near future.

Tags: Cascading Style Sheets, CSS, Dojo, Dojo Toolkit, HTML, JavaScript, , Website

This entry was posted on Saturday, February 27th, 2010 at 10:33 am and is filed under Dojo. You can follow any responses to this entry through the feed. You can leave a response, or from your own site.

3 Responses to “Creating a Twitter-esque login box with Dojo”

Dojo marketing and increasing the community | SpiffyJr's Blogaroo says:

[...] Creating a Twitter-esque login box [...]
mrtom says:

Thanks for this, nice demo.

Would be even better if you had a link to a running demo

mrtom
SpiffyJr says:

A demo can be found on . The menu on the top-right has a working example from this blog (with slightly outdated code).