Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Designing With Code: Create a DropIn JavaScript Component

Last updated Oct 17, 2003.

By Kris Hadlock

The Designing With Code series looks at design and interaction issues in web applications and finds elegant design solutions through code. This week, I follow up Robert Hoekman’s column on Ning, a web application that allows you to create your own social networks.

As Robert mentioned in his column, Ning is one of those rare applications that has nearly flawless user interactions. One feature that I especially like is the drop-in interaction that comes in from the top of the page when a member is logged in. This is where users edit their profiles, send e-mail, and manage invites.

Figure 1

Figure 1 In Ning, this area at the top of the screen drops down to enable users to edit profiles, send e-mail, and manage invites.

The first time I was exposed to this interaction was when I was working at GoDaddy with Robert and he came up with the concept to add it to the application that I was working on. The drop-in is a great way to introduce additional information to the user without refreshing the page, throwing an alert in the user’s face, or creating some other form of contextual confusion.

In this column, I’ll show you how to create a reusable DropIn JavaScript component. A live sample can be seen here and the source code for the project can be downloaded here. Let’s jump right in and start creating the DropIn object.

Creating a Drop-In

The DropIn object will need to have a way to toggle itself open and closed, so we will add a method called Toggle, which takes an element id and sets the display style for that element to the opposite value of what it currently is.

The DropIn Object (js/DropIn.js)

var DropIn = new Object();

DropIn.Toggle = function(id)
{ 
    if(document.getElementById(id).style.display == 'none')
    {
        document.getElementById(id).style.display = '';
    }
    else
    {
        document.getElementById(id).style.display = 'none';
    }
}

DropIn.AddItem = function(dropinId, contentId, textEl)
{
    if(document.getElementById(textEl).value != "")
    {
        document.getElementById(id).innerHTML += "<br/><br/>"+ document.getElementById(textEl).value;
    }
    DropIn.Toggle(dropinId);
}

The other method that is included in this object is called AddItem, which takes the id for the drop-in, the content, and the textarea elements. If the value of the textarea is not empty it is appended to the innerHTML of the content element and the DropIn is then toggled closed.

In order to use this component, we will need to create a web page. We’ll start by creating an index.html and then we’ll add some style to it with a CSS file called layout .css. The index file that I created is split into two different areas, the drop-in at the top of the page, which is closed by default, and the main area of the page, which contains the content.

Above the drop-in is an "Add item" link that fires the DropIn.Toggle method and passes the id of the dropin element. When open, the dropin element contains a text area and two buttons: close and add. The close button fires DropIn.Toggle and closes the dropin, while the add button fires the DropIn.AddItem method, which appends the textarea value to the content.

Tying It All Together (index.html)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Designing with Code: Ning</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/DropIn.js"></script>

</head>

<body>

<a href="#" onclick="DropIn.Toggle('dropin');">Add item</a>
<br/><br/>
<div id="dropin" style="display: none;">
    Add an text to the page:<br/>
    <textarea id="dropinText"></textarea>
    <br/><br/>
    <a href="#" onclick="DropIn.Toggle('dropin');">close</a>
      
    <input type="button" value="add" onclick="DropIn.AddItem('dropin', 'content', 'dropinText');" />

</div>

<div id="main">
    <div id="content">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nisl turpis, viverra quis, molestie vitae, pellentesque a, nisi. Fusce ac metus et nibh fringilla sollicitudin. Nam sollicitudin diam id ante. Donec convallis. Proin consectetuer fermentum tellus. Donec dignissim auctor odio. Mauris magna leo, blandit sed, elementum hendrerit, sollicitudin vitae, est. Fusce sem ligula, malesuada eu, volutpat sit amet, ultricies at, sem. Integer lobortis eros quis leo. Nam eleifend tortor in magna. Morbi lacus nisi, vulputate ut, rhoncus sed, ultrices sed, dolor. Phasellus risus metus, gravida eu, sodales lobortis, faucibus ut, augue. Vivamus egestas auctor ante. Morbi urna. Quisque justo magna, mollis ut, aliquet at, tincidunt non, nunc. Nunc sapien. Praesent nonummy elit eu sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        <br/><br/>
        Nulla facilisi. Aliquam viverra ornare libero. Sed faucibus fringilla ipsum. Sed hendrerit. Integer fermentum bibendum dui. Nulla gravida fermentum lorem. Donec placerat convallis urna. Curabitur molestie orci. Etiam quam libero, porta et, consequat a, sagittis non, sapien. Pellentesque sed tortor. Vestibulum pretium, ligula sit amet ullamcorper commodo, urna elit viverra eros, hendrerit ornare turpis dolor tincidunt urna. Vivamus ultrices nunc eu velit. Integer rutrum arcu porttitor erat. Donec fringilla est sit amet metus. Ut pulvinar quam in diam. Aenean dignissim tortor sed est facilisis tristique. Suspendisse potenti. Pellentesque diam tellus, consequat eget, dictum vitae, mattis sit amet, odio. Praesent at felis.
    </div>
</div>

</body>
</html>

The CSS for the page is defined in a file called layout.css.

Styling The Page (css/layout.css)

body
{
    margin: 0px;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 11px;
}

#main
{
    width: 800px;
    margin: auto;
}

#dropin
{
    height: 150px;
    padding: 10px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #ccc;
    overflow: hidden;
}

textarea
{
    width: 100%;
    height: 100px;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 11px;
}

#content
{
    padding: 10px;
}

Creating Visual Context

Sure, an interaction had to take place in order for the drop-in to appear, but a lot of users may still not understand how this new form appeared on the page. In order to give it a little more context, we can leverage a set of Tween objects that have been modeled after the Flash ActionScript Tween classes. The official web site for these objects can be found here.

Once the objects are downloaded, we can add what we need to animate our DropIn open. The main Tween object will handle our specific functionality, so let’s start by including it in our index.html.

Including The Tween Object (index.html)

<script type="text/javascript" src="js/Tween.js"></script>

Once the object has been included, we can start using it in our DropIn object. To add context to the opening and closing of the drop-in, we will create a Tween that animates the height of the DropIn element. When opening, it will animate from 0px to 150px in height. When closing, it will animate from 150px to 0px.

Adding Animation To The DropIn Object (js/DropIn.js)

DropIn.Toggle = function(id)
{ 
    if(document.getElementById(id).style.display == 'none')
    {
        document.getElementById(id).style.display = '';
        var tween = new Tween(document.getElementById(id).style, 'height', Tween.regularEaseOut, 0, 150, 1, 'px');
        tween.start();
    }
    else
    {
        var tween = new Tween(document.getElementById(id).style, 'height', Tween.regularEaseOut, 150, 0, 1, 'px');
        tween.start();
        tween.onMotionFinished = function()
        {
            document.getElementById(id).style.display = 'none';
        }
    }
}

The Importance of Context

A very important part of a web designer’s job is creating context for users so that they know what they’re looking at and where they are in an application at all times. Animations may seem like an unnecessary addition to an interface, but—if used properly—they can help create context for users. This context makes users consciously aware of what previous interactions occurred to get them to their current location

.