Ashish Patel

Display Notification Messages using jQuery

In this article, I am going to show you how to display notification messages in Webpage. Toastmessage-plugin is a JQuery plugin which provides android-like notification messages. The toasted messages arriving on the screen in a seamless and natural way. It’s a quite nice way to report info or error or warning to the user.

Demo

Demo


The plugin is entirely customizable. So you can change the positioning, the required user action, the style and so on.

Installation
The plugin is download from here .

jquery.toastmessage.js        -- the plugin
css/jquery.toastmessage.css   -- the css file
images/error.png              -- image
images/close.gif              -- image
images/notice.png             -- image
images/success.png            -- image
images/warning.png            -- image

Types of messages
4 different types message you can use. Each type comes with its own icon and colored border. The types are:

  • notice
  • success
  • warning
  • error

Easy to use
The following methods will display a toast message:

$().toastmessage('showNoticeToast', 'some message here');
$().toastmessage('showSuccessToast', 'some message here');
$().toastmessage('showWarningToast', 'some message here');
$().toastmessage('showErrorToast', 'some message here');

You can alter the configuration to your special use case.

// user configuration of all toastmessages to come:
$().toastmessage({
    text     : 'Ashish Blog',     // content of the item
    sticky   : true,               // should the toast item sticky or not?
    position : 'top-right',       // top-left, top-center, top-right, middle-left, middle-center, middle-right
                                      // Position of the toast container holding different toast.
                                      // Position can be set only once at the very first call,
                                     // changing the position after the first call does nothing
    type     : 'success',        // notice, warning, error, success
    close    : function () {console.log('toast is closed ...');}
});

Here is example of all type of message code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ashish's Blog</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script src="jquery.toastmessage.js" type="text/javascript"></script>
    <link href="jquery.toastmessage.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">

        function showSuccessToast() {
            $().toastmessage('showSuccessToast', "Success Dialog which is fading away ...");
        }
        function showStickySuccessToast() {
            $().toastmessage('showToast', {
                text: 'Success Dialog which is sticky',
                sticky: true,
                position: 'top-right',
                type: 'success',
                closeText: '',
                close: function () {
                    console.log("toast is closed ...");
                }
            });

        }
        function showNoticeToast() {
            $().toastmessage('showNoticeToast', "Notice  Dialog which is fading away ...");
        }
        function showStickyNoticeToast() {
            $().toastmessage('showToast', {
                text: 'Notice Dialog which is sticky',
                sticky: true,
                position: 'top-left',
                type: 'notice',
                closeText: '',
                close: function () { console.log("toast is closed ..."); }
            });
        }
        function showWarningToast() {
            $().toastmessage('showWarningToast', "Warning Dialog which is fading away ...");
        }
        function showStickyWarningToast() {
            $().toastmessage('showToast', {
                text: 'Warning Dialog which is sticky',
                sticky: true,
                position: 'middle-right',
                type: 'warning',
                closeText: '',
                close: function () {
                    console.log("toast is closed ...");
                }
            });
        }
        function showErrorToast() {
            $().toastmessage('showErrorToast', "Error Dialog which is fading away ...");
        }
        function showStickyErrorToast() {
            $().toastmessage('showToast', {
                text: 'Error Dialog which is sticky',
                sticky: true,
                position: 'center',
                type: 'error',
                closeText: '',
                close: function () {
                    console.log("toast is closed ...");
                }
            });
        }
 
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 
    <p>
            <span class="description">Show a success toast</span> <a href="javascript:showSuccessToast();">not
            sticky</a>|<a href="javascript:showStickySuccessToast();">sticky</a>
        </p>
 
        <p>
            <span class="description">Show a notice toast</span> <a href="javascript:showNoticeToast();">not sticky</a>|<a
                href="javascript:showStickyNoticeToast();">sticky</a>
        </p>
 
        <p>
            <span class="description">Show a warning toast</span> <a href="javascript:showWarningToast();">not
            sticky</a>|<a href="javascript:showStickyWarningToast();">sticky</a>
        </p>
 
        <p>
            <span class="description">Show a error toast</span> <a href="javascript:showErrorToast();">not sticky</a>|<a
                href="javascript:showStickyErrorToast();">sticky</a>
        </p>
 
    </div>
    </form>
</body>
</html>

Thanks.

Posted in ASP.Net, Classic ASP, JQueryTagged , , , 22 Comments

22 responses to “Display Notification Messages using jQuery”

  4. Hi Ashish

    I want to show a value(Name of the Employee from a table) in the message area which will retrieve using webservice (message area with link option), so that if click that link it will redirect to the related aspx page, Pls give some solution….

    Reply

  9. Guys,

    How to showing more than 1 toast box at same time? I am not using click function to show the toast box, i am using load a php file every 2 seconds to showing the toast box if there is any notification to the user. But for this script, i can only display 1 box per time. What should i edit the js file to show limit 5 toast box at a same time if there is 5 notifications?

    Thanks…

    Reply

  10. can i use your plugin in my scenario(when user enter some data the alert box show on the administrator screen)???

    Reply

  11. hi. how can i remove appended toast ? i have hard time figuring it out. if i click the button twice it tends to show twice .. please help me .

    Reply

  12. Hi Ashish,
    There is console.log function parameter is available
    close: function () {console.log(“toast is closed …”);

    Whats the use of that statement. Am getting the error message as below.

    how can i fix thisussue.

    Thanks
    Microsoft JScript runtime error: ‘console’ is undefined

    Reply

  18. Perfecto. Combinado con un timer, le da un efecto fabuloso.
    En PHP? No entiendo la pregunta. Esto es JAVASCRIPT que supongo lo puedes mezclar con .NET como he hecho yo, PHP o lo que sea.
    El archivo javascript test no es necesario, pero IMPORTANTE el css, sino, te volverás loco.

    Reply

  20. I really like this, great work! Hey question… How could/would I convert or add additional functionality to make it a confirm box?

    Reply

Leave a Reply