JavaScript auto-collapsing notification panel

Posted by Andrea on 2009-05-29 16:33

In almost all web applications comes the moment when it becomes necessary to display 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 interaction with the DOM is a quite well known and widespread, 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';\">chiudi</a>)
</div>

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 (eg jQuery), you can easily introduce advanced text effects.