Skip to main content

jNotify Example for Disply animated boxes (information, errors, success) in asp.net

jNotify : Disply animated boxes (informations, errors, success) in just one line of code


jNotify can display information boxes in just one line of code in asp.net .
Three kind of boxes are allowed : information, success and failure.
The whole box is entirely skinnable with css. For example, you could use it for a mail being successfully sent or a validation error of a form , or alert message .

First download  JNotify from GitHub 

Implementations  

Add links to master page , copy images into your folder 

<link href="Styles/jNotify.jquery.css" rel="stylesheet" type="text/css" />
  <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
 <script src="Scripts/jNotify.jquery.min.js" type="text/javascript"></script>

Master page look like this 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <link href="Styles/jNotify.jquery.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
    <script src="Scripts/jNotify.jquery.min.js" type="text/javascript"></script>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
    <asp:ScriptManager ID="scmproxy" runat="server" ></asp:ScriptManager>
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                    My ASP.NET Application
                </h1>
            </div>
                        <div class="clear">
        </div>
    </div>
    <div class="footer">
        
    </div>
    </form>
</body>
</html>

Defalut.aspx Page 

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript">
  function callalert()
        {
            jNotify('Here the message !!<br />You can write HTML code <strong>bold</strong>, <i>italic</i>, <u>underline</u>',
{
   autoHide: true, // added in v2.0
   clickOverlay: false, // added in v2.0
   MinWidth: 250,
   TimeShown: 3000,
   ShowTimeEffect: 200,
   HideTimeEffect: 200,
   LongTrip: 20,
   HorizontalPosition: 'center',
   VerticalPosition: 'top',
   ShowOverlay: true,
   ColorOverlay: '#000',
   OpacityOverlay: 0.3,
   onClosed: function () { // added in v2.0

   },
   onCompleted: function () { // added in v2.0

   }
}
          );}
</script>
     <script src="Scripts/Default.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:UpdatePanel runat="server" ID="uproot" >
<ContentTemplate>

    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit JNotify plug-in 
    <p>
       <asp:Button runat="server" OnClientClick="callJsucces();"   Text="Success" ID="btnSuccess" />
        <asp:Button runat="server" OnClientClick="callJError();" Text="alert" ID="btnalert" />
         <asp:Button runat="server" OnClientClick="callNotify();" Text="fail" ID="btnfail" />
            </p>
    </ContentTemplate>
</asp:UpdatePanel>
</asp:Content>

Defaulr.js File :

function callNotify() {
    jNotify('Here the Notify message !!<br />You can write HTML code <strong>bold</strong>, <i>italic</i>, <u>underline</u>',
{
   autoHide: true, // added in v2.0
   clickOverlay: false, // added in v2.0
   MinWidth: 250,
   TimeShown: 3000,
   ShowTimeEffect: 200,
   HideTimeEffect: 200,
   LongTrip: 20,
   HorizontalPosition: 'center',
   VerticalPosition: 'top',
   ShowOverlay: true,
   ColorOverlay: '#000',
   OpacityOverlay: 0.3,
   onClosed: function () { // added in v2.0

   },
   onCompleted: function () { // added in v2.0
   }
}
     );
}
function callJError() {
    jError('Here the Error message !!<br />You can write HTML code <strong>bold</strong>, <i>italic</i>, <u>underline</u>',
{
   autoHide: true, // added in v2.0
   clickOverlay: false, // added in v2.0
   MinWidth: 250,
   TimeShown: 3000,
   ShowTimeEffect: 200,
   HideTimeEffect: 200,
   LongTrip: 20,
   HorizontalPosition: 'center',
   VerticalPosition: 'top',
   ShowOverlay: true,
   ColorOverlay: '#000',
   OpacityOverlay: 0.3,
   onClosed: function () { // added in v2.0

   },
   onCompleted: function () { // added in v2.0

   }
}
      );
}
function callJsucces() {
    jSuccess('Here the Success message !!<br />You can write HTML code <strong>bold</strong>, <i>italic</i>, <u>underline</u>',
{
   autoHide: true, // added in v2.0
   clickOverlay: false, // added in v2.0
   MinWidth: 250,
   TimeShown: 3000,
   ShowTimeEffect: 200,
   HideTimeEffect: 200,
   LongTrip: 20,
   HorizontalPosition: 'center',
   VerticalPosition: 'top',
   ShowOverlay: true,
   ColorOverlay: '#000',
   OpacityOverlay: 0.3,
   onClosed: function () { // added in v2.0
   },
   onCompleted: function () { // added in v2.0
   }
}
      );
}

Output :



Labels:

Comments

Post a Comment

Popular posts from this blog

Asp.Net AjaxFileUpload Control With Drag Drop And Progress Bar

This Example explains how to use AjaxFileUpload Control With Drag Drop And Progress Bar Functionality In Asp.Net 2.0 3.5 4.0 C# And VB.NET. Previous Post  I was Explained about the   jQuery - Allow Alphanumeric (Alphabets & Numbers) Characters in Textbox using JavaScript  ,  Fileupload show selected file in label when file selected  ,  Check for file size with JavaScript before uploading  . May 2012 release of AjaxControlToolkit includes a new AjaxFileUpload Control  which supports Multiple File Upload, Progress Bar and Drag And Drop functionality. These new features are supported by Google Chrome version 16+, Firefox 8+ , Safari 5+ and Internet explorer 10 + , IE9 or earlier does not support this feature. To start with it, download and put latest AjaxControlToolkit.dll in Bin folder of application, Place ToolkitScriptManager  and AjaxFileUpload on the page. HTML SOURCE < asp:ToolkitScriptManager I...
3 comments
Read more

View online files using the Google Docs Viewer

Use Google Docs Viewer for Document viewing within Browser I was looking for a way to let users see Microsoft Word Doc or PDF files online while using my application without leaving their browser without downloading files and then opening it to view with Word or PDF viewer . I was looking for some way out either via any PHP or Microsoft.NET libraries, did some googling on that; but later on I just got an idea that google already has all code written for me.. when I have any email attachment in PDF or DOC or DOCX google does it for me ..! Even while searching I can see PDFs by converting them in HTML. So I just googled it up and found that Google already has this ability that we can use Google Docs Viewer without any Google Account Login . YES that's true no Google Account login is required. It's damn simple and easy. Just pass document path as attachment as parameter and we are done. Google Docs Viewer gives us ability to embed PDF, DOC/DOCX, PPT, TIFF:...
1 comment
Read more

How to send mail asynchronously in asp.net with MailMessage

With Microsoft.NET Framework 2.0 everything is asynchronous and we can send mail also asynchronously. This features is very useful when you send lots of bulk mails like offers , Discounts , Greetings . You don’t have to wait for response from mail server and you can do other task . By using     SmtpClient . SendAsync Method (MailMessage, Object)    you need to do  System.Net.Mail has also added asynchronous support for sending email. To send asynchronously, you need need to Wire up a SendCompleted event Create the SendCompleted event Call SmtpClient.SendAsync smtpClient.send() will initiate the sending on the main/ui  thread and would block.  smtpClient.SendAsync() will pick a thread from the .NET Thread Pool and execute the method on that thread. So your main UI will not hang or block . Let's create a simple example to send mail. For sending mail asynchronously you need to create a event handler that will notify that mail success...
Post a Comment
Read more