Noty Manager

Noty Manager Created by needim. This templates have specific characteristics, namely: Highly customizable notification manager.It also supports open source Noty plugin. .

You can use this Noty Manager on Javascript category for bubble, jquery, manager, notification, noty, noty manager, plugin and another uses.

Noty Manager
© Copyright by needim

Features:

  • None: None
  • Jquery: jQuery
  • None: None
  • Ie8, ie9, ie10, ie11, firefox, safari, opera, chrome: IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome
  • Javascript js, html, css: JavaScript JS, HTML, CSS

Highly customizable notification manager.It also supports open source Noty plugin.

Noty Manager Documentation

NotyManager

A – Installation

Include the latest release of jQuery before your NotyManager files.
The Google AJAX Libraries API can be used for this but you could also host the library yourself.

Include jquery.noty.manager.js and its dependancies below jQuery.

NotyManager is compatible with jQuery 1.6+ for now.

Your code should then be similar to this:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'></script><script type='text/javascript' src='js/noty-manager/jquery.noty.manager.js'></script>

If you want to use this manager with open source Noty plugin. Include jquery.noty.packaged.min.js too.

<script type='text/javascript' src='js/noty/packaged/jquery.noty.packaged.min.js'></script>

B – Initializing

Initializing an instance is simple actually, as can be seen in the below;

// NotyManager initializationwindow.NotyManager = new $.NotyManager($('#notifications'), {    bubble   : {        top : 10,        left: -2,        showZero: true    },    max: 30,    container: $('#notification-list'),    wrapper: '<div/>',    emptyHTML: '<div class='no-notification'>There is no notification in here</div>',    callback: {        onOpen: function() {},        onClose: function() {}    },    useNoty: true,    noty: {        layout: 'bottomLeft',        timeout: false,        closeWith: ['button']    }});

C – Creating Notifications

When you create a notification with below functions, it returns a NotyManager instance. So it’s chainable.

You can give any html as a notification content.

// notification body's can be any html string or just stringvar notification_1 = '<div class='activity-item'> <i class='fa fa-tasks text-warning'></i> <div class='activity'> There are <a href='#'>6 new tasks</a> waiting for you. Don't forget! <span>About 3 hours ago</span> </div> </div>',notification_2 = '<div class='activity-item'> <i class='fa fa-check text-success'></i> <div class='activity'> Mail server was updated. See <a href='#'>changelog</a> <span>About 2 hours ago</span> </div> </div>',notification_3 = '<div class='activity-item'> <i class='fa fa-heart text-danger'></i> <div class='activity'> Your <a href='#'>latest post</a> was liked by <a href='#'>Audrey Mall</a> <span>35 minutes ago</span> </div> </div>',notification_4 = '<div class='activity-item'> <i class='fa fa-shopping-cart text-success'></i> <div class='activity'> <a href='#'>Eugene</a> ordered 2 copies of <a href='#'>OEM license</a> <span>14 minutes ago</span> </div> </div>';NotyManager.alert(notification_1);NotyManager.alert('Some other string or <strong>html</strong>');NotyManager.info(notification_2);NotyManager.warning(notification_3);NotyManager.error(notification_4, { useNoty: false, increase: false });

D – Options & Defaults

Options and default values are listed below;

// NotyManager initializationwindow.NotyManager = new $.NotyManager($('#notifications') /* this is the bubble attach element */, {    // bubble options    bubble   : {        top : 10, // default: 10        left: -2, // default: -2        showZero: true // default: false    },    // max bubble count, if the count is bigger than 30 it will show 30+    max: 30, // default: 20    // this this the notification container    container: $('#notification-list'), // default: <div/>    // this is the wrapper of the a single notification    wrapper: '<div/>',    emptyHTML: '<div class='no-notification'>There is no notification in here</div>', // default: as is    callback: {        // This callback is fired each time a notification list is opened        onOpen: function() { // default: function(){}            // NotyManager instance accessible with this variable in this scope            console.log('opened', this);        },        // This callback is fired each time a notification list is closed        onClose: function() { // default: function(){}            // NotyManager instance accessible with this variable in this scope            console.log('closed', this);        }    },    // Below settings for the using open source Noty plugin    // if true notifications also appears on the screen    useNoty: true, // default: false    // this settings used when if useNoty is `true`    noty: {        layout: 'bottomLeft', // default: 'bottomLeft'        timeout: false, // default: false        closeWith: ['button'] // default: ['button']    }});

OptionDefaultDescription
bubble.top10Bubble top position from element
bubble.left-2Bubble left position from element
bubble.showZerofalseIf false and there is no notification, bubble will not be displayed. Otherwise bubble will display zero (0).
max20Max limit for bubble count, if count greater than max limit bubble will display {maxlimit}+ In this case 20+
container$(’<div/>’)This is the container of notification messages. Each notification will be prepend in this container.
wrapper$(’<div/>’)This is the wrapper of each notification html’s. You can use this wrapper for css styling and etc.
emptyHtmlThere is no notification in hereIf there is no notification in the ‘container’ this html will be shown in the container.
callback.onOpenfunction(){}This callback fired when notification container opened
callback.onClosefunction(){}This callback fired when notification container closed
useNotyfalseIf true and noty plugin is loaded, notifications will be display on the screen.
notyObjectThis option will be used by noty plugin. Option details are here.

E – Per Notification Options

As you can see above; NotyManager.error function has 2 parameters.

First parameter is the notification html content.
Second parameter can be useable for the per notification option overriding.
For now per notification options includes useNoty and increase options.

{    useNoty: false, // notification will not be displayed with noty. default: true    increase: false // notification will not increase the bubble count. default: true}            

F – API

FunctionParamDescription
NotyManager.alert(param1, param2);String, ObjectFor creating a standart type notification
NotyManager.info(param1, param2);String, ObjectFor creating a information type notification
NotyManager.warning(param1, param2);String, ObjectFor creating a warning type notification
NotyManager.error(param1, param2);String, ObjectFor creating a error type notification
NotyManager.increase(param);NumberIncrease the count of bubble
NotyManager.decrease(param);NumberDecrease the count of bubble
NotyManager.setCount(param);0Bubble count setter
NotyManager.getNotificationCount(); NoneReturns notification element’s count
NotyManager.getBubbleCount(); NoneReturns bubble’s count
NotyManager.clearNotifications(); NoneClears the notification elements