Andrea Azzola

Tips and Techniques for Lifestyle Design

JavaScript Auto-collapsing Notification Panel

Posted on [Permalink]

In almost all web applications comes the moment when it becomes necessary to show some notifications to the user. Fairly widespread practice even when elegance was unimportant and web pages didn't show great dynamic qualities, was the use of the method alert() from JavaScript.

Nowadays, the practice of interacting with the DOM is a widespread, so you'd be able to write some functions in a more elegant, advanced and enjoyable way for the user.

This code behaviour you'll find below was made famous by Google mailing client Gmail, is nothing exceptional and can be managed with a few simple lines of code:

<div id="notification" class="notification" style="background-color:#f8f8f8;">
Hello World!!! 
(<a OnClick=\"document.getElementById('notification').style.display='none';\">close</a>)

function closeDiv() {
document.getElementById('notification').style.display = 'none';

<input type="button" value="Hide" onclick="window.setTimeout(closeDiv, 5000);" />

You can use CSSs to make your DIV appear like a popup, in addiction, using a graphic library like jQuery you can easily introduce more advanced text effects.