Customizable Corner Notifications In JavaScript – notifyMe.js

Preview:

Description:

notifyMe.js is a standalone JavaScript library helps you show growl-style corner notifications of various types to your users.

Features:

• CSS3 powered animations.
• 4 different types: error, info, success, and warning.
• Custom title, message text and position.
• Notification queue supported.

How to use it:

Include the stylesheet notifyMe.min.css and JavaScript notifyMe.min.js on your web page.

<link rel="stylesheet" href="notifyMe.min.css">
<script src="notifyMe.min.js"></script>

Create a default notification that slides out from the edge of your screen.

notifyMe.create({
  title: 'Notification title', // required field
  text: 'Message here', // required field
});

Customization options.

// 'topRight', 'topLeft', 'bottomLeft', 'bottomRight'
position: 'topLeft',
// 'info', 'warning', 'success', 'error'
type: 'info', 
title: 'Notification title',
text: 'Notification message', 
// Remove notification after timeout expire
timeout: 5000, 
// Pause the timeout when mouse is over the notification
pauseOnHover: true, 
// Shows a close button
closeBtn: true, 
// Add 'additional-class' into existing class names
addClass: 'additional-class', 
// Click event handler function
click: function(){ 
    alert('clicked');
}