Hi All,
Recently i have applied new message system like what we have seen in gmail and yahoo , when we delete the message,the message come for 4-5 second and after that it just fade out. First i was thinking it is going to be though.But after i implement it,i was not all that diffcult.So below is the solution .
/******************************************************************/
First we have to place a div in the master page and have to assign id to it.
<div id="msgdiv"></div>
Make the body of the master page runat="server" and have a id for it as well.
<body id="MainBody" runat="server">
we also have to add jquery file of 1.2.1min.js file :
<script src="js/jquery-1.2.1.min.js" type="text/JavaScript"></script>
Now lets say you want to show message on deleting of message from inbox.
So add the following two functions in JavaScript:
function DeleteFromInbox() {
document.getElementById("msgdiv").className = "quick-alert";
document.getElementById("msgdiv").innerHTML = "<table border='0' align='center' cellpadding='0' cellspacing='0'><tr><td><img src='images/checked_new_icon.jpg' alt='' /></td><td width='8'> </td><td>message deleted from inbox successfully.</td></tr></table>";
setTimeout("FadeOutDiv()", 2000);
}
function ErrorInDeleteing() {
document.getElementById("msgdiv").className = "quick-alert";
document.getElementById("msgdiv").innerHTML = "<table border='0' align='center' cellpadding='0' cellspacing='0'><tr><td><img src='images/checked_new_icon.jpg' alt='' /></td><td width='8'> </td><td>message was not deleted from inbox.</td></tr></table>";
setTimeout("FadeOutDiv()", 2000);
}
function FadeOutDiv() {
$(".quick-alert").fadeOut("slow", function() {
$(".quick-alert").remove();
});
}
we should have following in our css file :
.quick-alert
{
width:66%;
background:#EE5A1E; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#fff; font-weight:bold; text-align:center; border:1px solid #727272; padding:5px; margin:3px;margin-left:100px;
}
here you can set BG-color and font size according to your design.
Now finally on the click of the delete button we have to call this function from server-side :
protected void btnDelete_Click(object sender, ImageClickEventArgs e)
{
int i = DeleteFromInbox();
// after this we can return any variable knowing if the message is deleted or not
HtmlGenericControl MasterPageBodyTag = (HtmlGenericControl)this.Page.Master.FindControl("MainBody");
if (i>0)
{
MasterPageBodyTag.Attributes.Add("Onload", "javascript:DeleteFromInbox();");
}
else
{
MasterPageBodyTag.Attributes.Add("Onload", "javascript:ErrorInDeleteing();");
}
}
/******************************************************************/
Showing posts with label Error message. Show all posts
Showing posts with label Error message. Show all posts
Friday, June 12, 2009
Subscribe to:
Posts (Atom)
