Notification Message Like Twitter in ASP.NET


This post explains how to display notification messages like twitter in asp.net at the top of the page.

Step 1

Download the JQuery plugin from http://sizzlejs.com/

Step 2

Include the following in header section

<script src="Scripts/Notification.js" type="text/javascript"></script>
    <style type="text/css">

        .divFaliure
        {
             width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 32768;
            background-color: #efefef;
            font-size: 18px;
            color: #000;
            text-align: center;
            font-family: Arial, Verdana, sans-serif;
            padding: 20px 0px;
            border-bottom: 1px solid #bbb;
            cursor: pointer;
            color: #f00;
            background-color: #fdd;
        }
        .divsuccess
        {
             width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 32768;
            background-color: #efefef;
            font-size: 18px;
            color: #000;
            text-align: center;
            font-family: Arial, Verdana, sans-serif;
            padding: 20px 0px;
            border-bottom: 1px solid #bbb;
            cursor: pointer;
            color: #060;
            background-color: #BBFFB6;
        }

    </style>


Step 3

  Place the button control in the form
  <div id="divMessage" runat="server" visible="false">
        Message Here
    </div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /></div>
Code Behind Code:
divMessage.Visible = true;
            StringBuilder strScript = new StringBuilder();
            strScript.Append("$(document).ready(function(){");
            strScript.Append("setTimeout(function(){");
            strScript.Append("$(\"div.divsuccess\").fadeOut(\"slow\", function () {");
            strScript.Append("$(\"div.divsuccess\").remove();");
            strScript.Append("});");
            strScript.Append("}, 2000)");
            strScript.Append("});");
            Page.ClientScript.RegisterStartupScript(this.GetType(), "Script", strScript.ToString(), true);

Output

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s