• Choose a category
• All
• Classic-Fiction

Progress Bar

Our client wants to implement a new feature he calls StarChirp, which will enable his users to communicate via short status messages (presumably about celebrities). We have no idea where he could have come up with this idea, but we’re happy to have a go at it. He specifies that he wants to differentiate his product from other status update sites by displaying the remaining character count in the form of a progress bar. This makes sense: it’ll display the percentage of how much room is left to type, so users can easily see if they’re approaching their word limit.

A progress bar is one of the most recognizable messages a user can see. Thanks to countless bad movies, even the layperson understands that the progress bar is the ultimate technological ticking clock. A progress bar effectively shows how far through a long-running process or set of processes we are—and more importantly, how far we have to go.

The simplest way to simulate a progress bar is to include a block-level element inside another block-level element. The outside element’s width is set to the length of the progress bar, and the inside element’s width is set to the correct ratio in relation to the outer element. Give the inside element a bit of color and that’s it!

As we’ve been using the jQuery UI library for our recent tasks, we might as well explore the whole gamut and see what the jQuery UI progress bar widget has to offer.

We’ve coded up a small form to hold the relevant elements, but for the progress bar all that’s required is an empty div:

chapter_07/16_progress_bar/index.html (excerpt)

Now we simply need to tell jQuery UI which element we’d like to transform:

chapter_07/16_progress_bar/script.js (excerpt)

$('#bar').progressbar();

That’s it. The progress bar is ready! There’s not much tweaking you can do. If you want the bar to default at a value other than 0%, you can specify it like this: $('#bar').progressbar({value: 50}).

For our StarChirp box, we’ll monitor the user’s key presses in much the same manner as we did for the maximum length indicator earlier in this chapter. This time, however, we need to update the progress bar as the user types:

chapter_07/16_progress_bar/script.js (excerpt)

$('#chirper')

.val('')

.keyup(function(e) {

var characters = 140;

var chirp = $('#chirper').val();

var count = chirp.length;

if (count <= characters) {

$('#bar').progressbar('value', (count / characters) * 100);

$('#count').text(count);

} else {

$('#chirper').val(chirp.substring(0,characters));

}

});

The important point to remember about the jQuery UI progress bar is that its range is from 0 to 100. It’s a percentage, so you’ll need to figure out the percentage to pass in. We’ll divide the current number of characters by the total allowed, and multiply the result by 100. Now we have a valid value to pass to the progress bar via the value option.

If there are already more characters in the box than what’s allowed, we’ll use the JavaScript substring function to chop off the excess.

The effect is that every character we add will move the progress bar to the right, and every character we remove will move the progress bar to the left.

Dialogs and Notifications

In the olden days, there was little requirement for user messages on our brochure sites; perhaps just a “thanks for submitting the form,” or a JavaScript popup dialog telling us we forgot to fill out an email field.

These days, as our Ajax-enabled web applications become more complex, the breadth of information that needs to be conveyed is growing: validation messages, status updates, error handling messages, and so on. Doing it in a way that avoids overwhelming or annoying the user can be quite an art form.

Simple Modal Dialog

Modal dialogs are notifications that pop up in the user’s face and must be acted on if the user want to continue.