It's possibly an urban legend, but I was told many years ago of a user interaction experiment in which USD100 (100 U.S. dollars) was taped beneath someone's seat while that person was using a desktop application on a computer. In the status bar of the application, it said, "There is $100 taped underneath your seat." The money was never found or claimed by any of the participants, which tells you just how poorly the status bar communicates information and how hard it is to get people's attention nowadays.
This article shows several techniques that use a combination of PHP, Dynamic HTML (DHTML), and Asynchronous JavaScript™ + XML (Ajax) to throw content right into users' lines of sight so that it really grabs their attention.
Tooltips
Setting the status bar in the browser is easy, but doing something useful—like popping up a tooltip—is a bit more difficult. To make it easier on myself, I employ a tooltip library that's freely available on the Web and built on the excellent Prototype.js JavaScript library. Listing 1 shows the code for this tooltip.
Listing 1. index.html
<html>
<head>
<script src="prototype.js" type="text/javascript"></script>
<script src="tooltip.js" type="text/javascript"></script>
<style>
body { font-family: arial,verdana; }
.popup { padding:10px; border:1px solid #ccc;
background:#eee; width:250px; font-size: small; }
</style>
</head>
<body>
<div id="book1">Code Generation In Action</div>
<div id="popup1" class="popup">
</div>
</body>
<script type="text/javascript">
new Ajax.Updater( 'popup1', 'text.php' );
new Tooltip('book1', 'popup1')
</script>
</html>The page first employs an Ajax call to update the contents of the tooltip by using
the Ajax.Updater class from the Prototype.js library.
It then assigns the tooltip to the book1 <div> tag
using the Tooltip class that the tooltip library
provides.
Listing 2 shows the code for the content of the tooltip.
Listing 2. text.php
An excellent book on code generation and generative programming by Jack Herrington.
Now, when I bring up the page in my browser, I see something like Figure 1.
Figure 1. The text before the mouse rolls over it
And when I hover my mouse over it, I get the pretty little pop-up window in Figure 2.
Figure 2. The pop-up window
Live demo of a tooltip
View a live, online demo of the tooltip
.
Tooltips are an easy way to unclutter your page and provide content on demand to users. If users want to know more about something, they can simply hover their mouse over it and get details. And those details can be arbitrarily complex, including images, tables, and formatting.
Lightboxes
Lightboxes are the newest and most novel way to drive your readers' attention to a particular element on the page. In the case of the example below, I have an image thumbnail on the page, and when users click it, they're shown a larger version in a "lightbox."
To create this effect, I use the excellent Lightbox JS 2.0 library, which is also built on the Prototype.js framework. Listing 3 shows the example code.
Listing 3. index.html
<html> <head> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> </head> <body> <a href="images/megan1_400_320.jpg" rel="lightbox"> <img src="images/megan1_400_320.jpg" width="100" height="80" alt="Megan" border="0" /></a> </body> </html>
When I navigate to the page, I see just the thumbnail, as in Figure 3.
Figure 3. The image before clicking it
But when I click it, I see a full-sized image elegantly displayed in the center of the window, as shown in Figure 4.
Figure 4. The lightbox with the full-sized image
Even better, all the material in the background is grayed out, so that my eye is further drawn to the content in the center of the display.
Live demo of lightbox
View a live, online demo of the lightbox.
If you aren't familiar with the term lightbox, that's okay: It's an esoteric term used in photography circles. Back in the days of film photography, a device called a lightbox was literally a box about six inches deep, a couple of feet across on both sides, with some clear white plastic on the top of it. A light in the middle of the box would provide even illumination across the surface. So, you placed your slides or negatives on the lightbox and, using a loupe, which is just a fancy magnifying glass, you inspected each image. You can think of the lightbox shown in Figure 4 as a photo that you're viewing through a loupe on a lightbox. Thus, the term.
But what happens if instead of an image you want to highlight some text?
Text lightboxing
A variation of the lightbox idea has been implemented on a site called Particle Tree. This one has the advantage of being able to display any arbitrary HTML code, fetched using Ajax, from the server. I use it to display some additional text to users.
Listing 4 shows the main page code.
Listing 4. index.html
<html> <head> <title> Lightbox Text Test </title> <link rel="stylesheet" href="css/default.css" media="screen,projection" type="text/css" /> <link rel="stylesheet" href="css/lightbox.css" media="screen,projection" type="text/css" /> <script type="text/javascript" src="scripts/prototype.js"></script> <script type="text/javascript" src="scripts/lightbox.js"></script> </head> <body> <a href="text.php" class="lbOn">More About This Article</a> </body> </html>
In Listing 5, you see the HTML code that Ajax fetches and then displays.
Listing 5. text.php
<p>This article covers the basics of AJAX Lightbox that shows text blocks instead of images</p> <p><a href="#" class="lbAction" rel="deactivate"> Return to article list</a></p>
When I bring up the code in my browser, I see Figure 5.
Figure 5. Text you can click for more information
And when I click the text, I see the lightbox with the content of the page, as in Figure 6.
Figure 6. The text lightbox in action
Live demo of text lightbox
View a live, online demo of the text lightbox.
This is a great way to provide additional material on products or articles listed on the page without moving users away from the page. Instead, you indirectly draw their attention to the additional content you want to provide. As with any HTML code, this can be more text content, images, or even a form such as a registration, comment, or login form.
Windows
I mentioned using a lightbox for a form in the previous example, but that's not really what users expect when they see a form. What they really expect is a window. Thankfully, in the Prototype library, you'll find an excellent window implementation that comes with a variety of different skins to give you whatever look and feel you choose.
The window code also uses Ajax through Prototype to get the content to present in the window frame. I start with Listing 6, which is the page that hosts the window.
Listing 6. index.html
<html>
<head>
<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/effects.js"></script>
<script type="text/javascript" src="javascripts/window.js"></script>
<script type="text/javascript" src="javascripts/window_effects.js"></script>
<link href="themes/default.css" rel="stylesheet" type="text/css" ></link>
<link href="themes/spread.css" rel="stylesheet" type="text/css" ></link>
</head>
<body>
<a href="javascript:void showWindow();">Show Window</a>
<script>
function showWindow()
{
win = new Window( { className: 'spread', url: 'test.html',
title: 'Simple Window', width:400,
height:300, destroyOnClose: true, recenterAuto:false } );
win.showCenter();
}
</script>
</body>
</html>The JavaScript code here responds to the click of the Show window button by
creating a new window with the specified width, height, title, and content
specified by a given URL. It then shows the window using the
showCenter() method, which pops it into the middle of
the browser window.
Listing 7 shows the content for the window.
Listing 7. test.html
<h1>Registration</h1> <p>You need to first register the product before...</p>
When I navigate my browser to the first page, I see something like Figure 7.
Figure 7. The window link
Not much to look at, but when I click it, wow! What a difference, as in Figure 8.
Figure 8. The window that pops up
It's a bit gaudy, but it definitely gets your attention. You don't have to have the lime green thing, though. Several different skins are available for you to select.
But what I really wanted to do was a form, right? In particular, I want a login form on the main page so when I click the Login button, a login form pops up. Listing 8 shows the code for the main page.
Listing 8. form.php
<html>
<head>
<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/effects.js"></script>
<script type="text/javascript" src="javascripts/window.js"></script>
<script type="text/javascript" src="javascripts/window_effects.js"></script>
<link href="themes/default.css" rel="stylesheet" type="text/css" ></link>
<link href="themes/spread.css" rel="stylesheet" type="text/css" ></link>
</head>
<body>
<div id="myloginform" style="display:none;overflow:clip;padding:10px;">
<form id="loginfrm">
<table>
<tr><td>Login</td><td><input type="text" name="name" /></td></tr>
<tr><td>Password</td><td><input type="password" name="password" /></td></tr>
</table>
</form>
<button onclick="login()">Login</button>
</div>
<a href="javascript:void showWindow();">Login</a>
<script>
var g_loginWindow = null;
function login()
{
new Ajax.Request( 'login.php', {
parameters: $('loginfrm').serialize(),
method: 'post',
onSuccess: function( transport ) {
g_loginWindow.close();
}
} );
}
function showWindow()
{
g_loginWindow = new Window( { className: 'spread', title: "Login",
destroyOnClose: true,
onClose:function() { $('myloginform').style.display = 'none'; } } );
g_loginWindow.setContent( 'myloginform', true, true );
g_loginWindow.showCenter();
}
</script>
</body>
</html>This one has the content for the window on the page itself. But, when the user clicks
the Login button on the form, it uses the Ajax.Request object to request a login with the server. Listing 9 shows the simple login script, which is far more complex in practice.
Listing 9. login.php
<true />
Now, when I bring up this page, I get a login link, as in Figure 9.
Figure 9. The login link
And when I click the link, I see a very cool Web 2.0-style login window, as in Figure 10.
Figure 10. The login window
Live demo of window
View a live, online demo of the window.
When I click Login, it sends the user name and password to the server, which can verify the credentials and set a session cookie as well as reply with a response that indicates that I should be forwarded to the home page.
This is the type of functionality that can really bring a pop to the application and give users a sense that they're using something more akin to a desktop application than something on the Web.
Fader messages
Another new way to communicate with users is the fader message—that is, a message that pops up in a known, but valuable, piece of screen real estate to tell users that something important has occurred. In this case, I use the Scriptaculous effects library, which is also built on Prototype.js, to implement the fader message.
It starts with the page in Listing 10.
Listing 10. index.html
<html><head>
<style>
.alert {
opacity: 0.0;
border:2px dashed black;
padding:5px;
background:#eee;
font-family: arial, verdana;
font-weight: bold; }
</style>
<script src="lib/prototype.js"></script>
<script src="src/effects.js"></script>
<script>
function submit()
{
new Ajax.Updater( 'result', 'alert.html', {
method: 'get',
onSuccess: function() {
new Effect.Opacity('result',
{ duration: 2.0, from: 0.0, to: 1.0 } );
new Effect.Opacity('result',
{ delay: 10.0, duration: 2.0, from: 1.0, to: 0.0 } );
} }
);
}
</script>
</head><body>
<div id="result" class="alert"></div><br/><br/>
<button onclick="submit()">Submit</button>
</body></html>Ideally, the page is some sort of form with a Submit button. Then, when the user clicks Submit, the server is sent the form data and replies with a message. This message is then shown in an area that fades up to display the message, then fades away. In this case, I left out the form elements, so I just have the Submit button.
The Submit button sends an Ajax request to the alert.html page. It then puts
the result of that page in the result <div> tag,
which then fades in and out using the Scriptaculous effects classes.
Listing 11 shows the code for the alert page.
Listing 11. alert.html
A new record has been added.
When I bring up the page in my browser, I see something like Figure 11.
Figure 11. The Submit button for a form
Once again, not much too look at. Imagine a set of form fields with some data before the Submit button.
When I click Submit, the alert fades up, as shown in Figure 12.
Figure 12. The faded-in message announcing the addition of a message
Live demo of fader
View a live, online demo of the fader.
After a few seconds, the message fades away.
This is a simple, yet very effective way to communicate with users. As long as you don't overuse it, it taps directly into the keen sense of awareness for objects appearing and disappearing. That's a survival instinct that's bred into humans. So, it's something you pay attention to. As long as it's well used, it's a powerful way to get users' attention quickly.
Conclusion
Hopefully, this article has provided you with a whole new set of tools to interact with and alert your users in novel ways. Over time, I'm sure they will be overused and become just as ineffective as the status bar. But for the time being, these tools can provide a fun, effective, and Web 2.0 way to get people's attention.
Download
| Description | Name | Size |
|---|---|---|
| Sample code | x-ajaxxml6-lightbox.zip | 1573KB |
Resources
Learn
- PHP home page: Visit an invaluable resource for PHP programmers.
- Prototype library: Explore this JavaScript Framework designed to ease development of dynamic Web applications.
- Scriptaculous JavaScript library: Find display helpers and effects to make your Web site fly with this Prototype-based framework.
- Lightbox JS 2.0 library: Discover an excellent way to create image lightboxes.
- Lightbox Gone Wild!: This code from Particle Tree offers a more flexible approach to lightboxes.
- Xilinus.com: Xilinus hosts the Window library.
- Prototype.js documentation page: Get additional information on the Prototype JavaScript library with links to the official Prototype blog and many other resources.
- jQuery: Explore another JavaScript library that provides similar functionality to Prototype.js.
- Yahoo! User Interface Library: Check out Yahoo!'s toolkit for Ajax.
- developerWorks XML zone: Learn all about XML at the developerWorks XML zone.
- IBM XML certification: Find out how you can become an IBM-Certified Developer in XML and related technologies.
- XML technical library: See the developerWorks XML Zone for a wide range of technical articles and tips, tutorials, standards, and IBM Redbooks.
- developerWorks technical events and webcasts: Stay current with technology in these sessions.
- Ajaxian: Ajaxian is a great resource for keeping up with developments in Ajax and the front-end widgets that use it.
Discuss
- Participate in the discussion forum.
- XML zone discussion forums: Participate in any of several XML-centered forums.
- developerWorks XML zone: Share your thoughts: After you read this article, post your comments and thoughts in this forum. The XML zone editors moderate the forum and welcome your input.
Comments
Dig deeper into XML on developerWorks
- Overview
- New to XML
- Technical library (tutorials and more)
- Forums
- Downloads and products
- Open source projects
- Standards
- Events
developerWorks Premium
Exclusive tools to build your next great app. Learn more.
developerWorks Labs
Technical resources for innovators and early adopters to experiment with.
IBM evaluation software
Evaluate IBM software and solutions, and transform challenges into opportunities.
