Buondì. Per motivi miei ho dovuto creare un'area di notifica stile Gnome / OsX. Rilascio il codice, facilmente personalizzabile, per chiunque ne avesse bisogno.

@Xinod, @br1
Valutate voi se è il caso di inserirla in "Script / Discussioni utili"...



codice:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Notify Example</title>
<script type="text/javascript">

var gNotify = new (function () {
	function closeAll () {
		for (
			var nOldEvent = 0;
			nOldEvent < aCloseCalls.length; 
			aCloseCalls[nOldEvent] !== false ? clearTimeout(aCloseCalls[nOldEvent++]) : nOldEvent++
		);
		aCloseCalls.length = 0;
		bTransparent = true;
		var nClAllFrame = 1, nClAllAnim = setInterval(function() {
			if (nClAllFrame < 5) {
				oNtfArea.style.opacity = "0." + String(85 - (17 * nClAllFrame));
				nClAllFrame++;
				return;
			}
			clearInterval(nClAllAnim);
			oNtfArea.style.opacity = "0";
			oCloseAllEl.style.display = "none";
			for (
				var nOldMsg = 0;
				nOldMsg < aMessages.length;
				aMessages[nOldMsg] !== false ? oNtfArea.removeChild(aMessages[nOldMsg++]) : nOldMsg++
			);
			aMessages.length = 0;
			nMessages = 0;
		}, 50);
	}

	function closeMsg (nEventId) {
		var oMsgNode = aMessages[nEventId];
		aCloseCalls[nEventId] = false;
		aMessages[nEventId] = false;
		var nCloseFrame = 1;
		var nClMsgAnim = setInterval(function() {
			if (nCloseFrame < 5) {
				oMsgNode.style.opacity = "0." + String(85 - (17 * nCloseFrame));
				nCloseFrame++;
				return;
			}
			clearInterval(nClMsgAnim);
			oMsgNode.style.opacity = "0";
			oNtfArea.removeChild(oMsgNode);
			nMessages--;
			if (nMessages === 1) { oCloseAllEl.style.display = "none"; }
			if (nMessages === 0) {
				aCloseCalls.length = 0;
				aMessages.length = 0;
			}
		}, 50);
	}

	function closeMe () {
		var nMsgId = parseFloat(/\d+$/.exec(this.parentNode.getAttribute("id")));
		if (aCloseCalls[nMsgId] !== false) { clearTimeout(aCloseCalls[nMsgId]); closeMsg(nMsgId); } 
	}

	var oNtfArea, oCloseAllEl, bTransparent = true, nMessages = 0, aCloseCalls = [], aMessages = [];

	this.sendMsg = function (sMsgTitle, sMsgTxt, nDuration) {
		var	nOpenFrame = 1, oNewMsg = document.createElement("div"),
			oMsgClose = document.createElement("div"),
			oMsgTitle = document.createElement("div"),
			oMsgBody = document.createElement("div"),
			nEventId = aMessages.length,
			nOpMsgAnim = setInterval(function() {
				if (nOpenFrame > 4) { clearInterval(nOpMsgAnim); }
				oNewMsg.style.opacity = "0." + String(17 * nOpenFrame);
				nOpenFrame++;
			}, 50);

		if (bTransparent) { 
			oNtfArea.style.opacity = "1";
			bTransparent = false;
		}

		if (nMessages > 0) { oCloseAllEl.style.display = "block"; }

		aMessages.push(oNewMsg);
		aCloseCalls.push(setTimeout(function() { closeMsg(nEventId); }, nDuration || 2000));
		oNewMsg.className = "gNotify-notification default";
		oMsgClose.className = "close";
		oMsgClose.onclick = closeMe;
		oMsgClose.innerHTML = "&amp;times;";
		oMsgTitle.className = "header";
		oMsgTitle.innerHTML = sMsgTitle;
		oMsgBody.className = "gNotify-message";
		oMsgBody.innerHTML = sMsgTxt;
		oNewMsg.style.opacity = "0";
		oNewMsg.id = "gNotify_msg" + nEventId;
		oNewMsg.appendChild(oMsgClose);
		oNewMsg.appendChild(oMsgTitle);
		oNewMsg.appendChild(oMsgBody);
		oNtfArea.insertBefore(oNewMsg, oCloseAllEl);
		nMessages++;
	};

	this.close = closeAll;

	this.append = function () {
		oNtfArea = document.createElement("div");
		oCloseAllEl = document.createElement("div");
		oNtfArea.className = "top-right gNotify";
		oNtfArea.id = "gNotify";
		oCloseAllEl.className = "gNotify-closer";
		oCloseAllEl.innerHTML = "[ close all ]";
		oCloseAllEl.onclick = closeAll;
		oNtfArea.appendChild(oCloseAllEl);
		document.body.appendChild(oNtfArea);
	};
})();
</script>
<style type="text/css">
	div.gNotify {
		padding: 10px;
		z-index: 10000001;
	}

	/** Normal Style Positions **/
	div.gNotify { position: fixed; }

	div.gNotify.top-left {
		left: 0;
		top: 0;
	}

	div.gNotify.top-right {
		right: 0;
		top: 0;
	}

	div.gNotify.bottom-left {
		left: 0;
		bottom: 0;
	}

	div.gNotify.bottom-right {
		right: 0;
		bottom: 0;
	}

	div.gNotify.center {
		top: 0;
		width: 50%;
		left: 25%;
	}

	div.gNotify-message span.intLink, div.gNotify-message a, div.gNotify-message a:link, div.gNotify-message a:visited, div.gNotify-message a:hover {
		font-weight: bold;
		text-decoration: inherit;
		color: inherit;
	}

	/** Cross Browser Styling **/
	div.center div.gNotify-notification, div.center div.gNotify-closer {
		margin-left: auto;
		margin-right: auto;
	}

	div.gNotify div.gNotify-notification, div.gNotify div.gNotify-closer {
		background-color: #000000;
		color: #ffffff;
		opacity: 0.85;
		filter: alpha(opacity=85);
		width: 235px;
		padding: 10px;
		margin-top: 5px;
		margin-bottom: 5px;
		font-family: Tahoma, Arial, Helvetica, sans-serif;
		font-size: 12px;
		text-align: left;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}

	div.gNotify div.gNotify-notification { min-height: 40px; }

	div.gNotify div.gNotify-notification div.header {
		font-weight: bold;
		font-size: 10px;
	}

	div.gNotify div.gNotify-notification div.close {
		float: right;
		font-weight: bold;
		font-size: 12px;
		cursor: pointer;
	}

	div.gNotify div.gNotify-closer {
		display: none;
		height: 15px;
		padding-top: 4px;
		padding-bottom: 4px;
		cursor: pointer;
		font-size: 11px;
		font-weight: bold;
		text-align: center;
	}
</style>
</head>

<body onload="gNotify.append();">



[ Durata predefinita | Durata personalizzata ]</p>
</body>
</html>