Simple notification panel for your website with notifyMe

INTRODUCTION

In previous post, I have introduced SweetAlert as cool javascript alert alternative. In this post, I will talk about notifyMe, a little plugin for just notification task. notifyMe is a very simple and elegant notification bar jQuery plugin. I found this plugin extremely helpful when I want to display a message, notification or alert quickly because it caught the attention of audience with simple and smooth sliding effect, along with clear and elegant messages.

notification jquery plugin

HOW TO USE

1. Include Javascript & CSS

We need Jquery as well

<link rel='stylesheet' href='https://cdn.rawgit.com/brunodsgn/notifyme/v1.1/assets/css/notifyme.css'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/brunodsgn/notifyme/v1.1/assets/js/notifyme.js'></script>

2. HTML

We prepare 4 buttons to test 4 types of notification: default, error, success, info

<div class="btn-group">
	<a class="btn default">Default</a>
	<a class="btn error">Error</a>
	<a class="btn info">Info</a>
	<a class="btn success">Success</a>
</div>

3. Call notifyMe to create the notification

$(document).ready(function(){
    
    // ERROR NOTIFICATION
        $('.error').on('click', function(){
            $(this).notifyMe(
                'bottom',           // POSITION
                'error',            // TYPE OF NOTIFICATION
                'Lorem Ipsum Text', // TITLE
                'Lorem ipsum dolos lorem uisnsnd h jsakdh ajkdbh',  // DESCRIPTION
                200,                // VELOCITY OF TRANSITION
                2000                // AUTO CLOSE, OPTIONAL
            );
        });

    // INFO NOTIFICATION
        $('.info').on('click', function(){
            $(this).notifyMe(
                'top',
                'info',
                'Lorem Ipsum Text',
                'Lorem ipsum dolos lorem uisnsnd h jsakdh ajkdbh',
                300
            );
        });
    
    // SUCCESS NOTIFICATION
        $('.success').on('click', function(){
            $(this).notifyMe(
                'left',
                'success',
                'Lorem Ipsum Text',
                'Lorem ipsum dolos lorem uisnsnd h jsakdh ajkdbh',
                400
            );
        });

    // DEFAULT NOTIFICATION
        $('.default').on('click', function(){
            $(this).notifyMe(
                'right',
                'default',
                'Lorem Ipsum Text',
                'Lorem ipsum dolos lorem uisnsnd h jsakdh ajkdbh',
                500
            );
        });
    });

DEMO

See the Pen notifyme jquery plugin by Thanh Nguyen (@genievn) on CodePen.

Recent Post