info or error or warning message

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.