Good programming libraries help and significantly speed up application development. Excellent example is jQuery, which is widely used among programmers all over the world. I have been using jQuery for couple of years now and cannot give up utilizing it in my projects, as it simplifies the coding and reduces time to market. One of my projects needed a messaging feature that displayed the user recent system messages and after a while faded it away (figure 1). The feature had some basic requirements. The messages are typically informative and can be removed after a certain period. Sometimes new messages appear in bursts so timing out old messages should be dependent on the order of their appearance. I decided to use an unordered HTML list to show the messages. Such a list is easy to maintain with jQuery and setting a timed fadeout for each list item is so easy to implement, that it makes an old programmer laugh eyes wet.
I wanted to have an effect that gradually fades an item in the list and finally removes it. I have written an extremely simple code snippet to add and gradually remove list items using jQuery.
function showMessage(message) {
$('#messages').append('<li>' + message + '</li>')
.children(':last').delay(10000).fadeTo(5000, 0,
function() {
$(this).remove();
});
}This JavaScript code expects an unordered HTML list item with id "messages" placed somewhere on the page, for example:
<ul id="messages">
</ul>New message text is passed as an argument to the showMessage() function, which then appends the text at the end of the list. In this example I use a quick-and-dirty solution to append HTML code ’using jQuerys append() method, but the more formal and purist way to handle this would be using DOM. Anyway the idea is quite clear. After having added the list item I then search for the newly added item in the children collection with ":last" selector to grab the object for the next step to assign some manipulation methods to it. The jQuery delay() function keeps the item in the list for the next 10 000 milliseconds (10 seconds) and the starts to fade it out. The fadeTo() function uses another 5 000 milliseconds (5 seconds) to dim the item changing its opacity from 100 % to zero. When fading finishes, the item is finally permanently removed from the list.
Final words
My messaging list works like a charm. It does exactly what was required and leaves many opportunities to further develop the features. Using the slideUp() function neatly removes the item collapsing the list gradually. In case there are different types of messages, some of them - say error messages - can be left in the list while others still fade away. The fading effect and item removal is not set to such messages and users may examine them as long as they wish and adding some more JavaScript lets users remove items manually. It really pays off to use jQuery as this library brings a huge bunch of other goodies as well.