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

AngularJS Interview Questions and Answers

1) What is Angular.js ? AngularJS is a javascript framework used for creating single web page applications.  It allows you to use HTML as your template language and enables you to extend HTML’s syntax to express your application’s components clearly 2) Explain what are the key features of Angular.js ? The key features of angular.js are Scope Controller Model View Services Data Binding Directives Filters Testable 3) Explain what is scope in Angular.js ? Scope refers to the application model, it acts like glue between application controller and the view.  Scopes are arranged in hierarchical structure and impersonate the DOM ( Document Object Model) structure of the application.  It can watch expressions and propagate events. 4) Explain what is services in Angular.js ? In angular.js services are the singleton objects or functions that are used for carrying out specific tasks.  It holds some business logic and these function can be called as contro...
Post a Comment
Read more

Check dot net core framework version in my PC Or System

 Open My Computer → double click "C:" drive → double click "Windows" → double click "Microsoft.NET" → double click "Framework" → Inside this folder, there will be folder(s) like "v1.0.3705" and/or "v2.0.50727" and/or "v3.5" and/or "v4.0.30319". Your latest .NET version would be in the highest v number folder, so if v4.0.30319 is available that would hold your latest .NET framework. However, the v4.0.30319 does not mean that you have the .NET framework version 4.0. The v4.0.30319 is your Visual C# compiler version, therefore, in order to find the .NET framework version do the following. Go to a command prompt and follow this path: C:\Windows\Microsoft.NET\Framework\v4.0.30319 (or whatever the highest v number folder) C:\Windows\Microsoft.NET\Framework\v4.0.30319 > csc.exe Output: Microsoft (R) Visual C# Compiler version 4.0.30319.17929 for Microsoft (R) .NET Framework 4.5 Copyright (C) Microsoft Corporati...
1 comment
Read more