Ho provato al volo ad aggiungere l'effetto che cerchi... ma non ti so dire quanto sia solido, va provato un po'.... Ciao!
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 ? nOldEvent++ : clearTimeout(aCloseCalls[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 ? nOldMsg++ : oNtfArea.removeChild(aMessages[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);
}
function freezeMsgs () {
for (
var nOldEvent = 0;
nOldEvent < aCloseCalls.length;
aCloseCalls[nOldEvent] === false ? nOldEvent++ : (
clearTimeout(aCloseCalls[nOldEvent]),
aCloseCalls[nOldEvent++] = false
)
);
}
function unfreezeMsgs () {
aCloseCalls.push(setTimeout(closeAll, 3000));
}
function newActiveDiv () {
var oNewDiv = document.createElement("div");
oNewDiv.onmouseover = freezeMsgs;
oNewDiv.onmouseout = unfreezeMsgs;
return oNewDiv;
}
var oNtfArea, oCloseAllEl, bTransparent = true, nMessages = 0, aCloseCalls = [], aMessages = [];
this.sendMsg = function (sMsgTitle, sMsgTxt, nDuration) {
var nOpenFrame = 1, oNewMsg = newActiveDiv(),
oMsgClose = newActiveDiv(),
oMsgTitle = newActiveDiv(),
oMsgBody = newActiveDiv(),
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 = "&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 = newActiveDiv();
oCloseAllEl = newActiveDiv();
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>
Rispondi quotando
