CodeCanyon Noty Manager 7054200

CodeCanyon Noty Manager 7054200

CodeCanyon Noty Manager 7054200
JavaScript \ Miscellaneous
Noty \ Manager \ Plugin \ Jquery \ Notification \ Bubble

JavaScript - Noty Manager 7054200 by needim @ CodeCanyon

JavaScript \ Miscellaneous

Last Update: 11 March 14; Compatible Browsers: IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome; Software Version: jQuery; Files Included: 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=""></script>
<script type="text/javascript" src=""></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=""></script>

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

// NotyManager initialization
window.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 string
var 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('Some other string or <strong>html</strong>');;
NotyManager.error(notification_4, { useNoty: false, increase: false });

D – Options & Defaults Options and default values are listed below;

// NotyManager initialization
window.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']

Option Default Description 10 Bubble top position from element bubble.left -2 Bubble left position from element bubble.showZero false If false and there is no notification, bubble will not be displayed. Otherwise bubble will display zero (0). max 20 Max 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. emptyHtml There is no notification in here If there is no notification in the ‘container’ this html will be shown in the container. callback.onOpen function(){} This callback fired when notification container opened callback.onClose function(){} This callback fired when notification container closed useNoty false If true and noty plugin is loaded, notifications will be display on the screen. noty Object This 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 Function Param Description NotyManager.alert(param1, param2); String, Object For creating a standart type notification, param2); String, Object For creating a information type notification NotyManager.warning(param1, param2); String, Object For creating a warning type notification NotyManager.error(param1, param2); String, Object For creating a error type notification NotyManager.increase(param); Number Increase the count of bubble NotyManager.decrease(param); Number Decrease the count of bubble NotyManager.setCount(param); 0 Bubble count setter NotyManager.getNotificationCount(); None Returns notification element’s count NotyManager.getBubbleCount(); None Returns bubble’s count NotyManager.clearNotifications(); None Clears the notification elements

Keywords: bubble, jquery, manager, notification, noty, noty manager, plugin.

Tags: Manager, Plugin, Notification, Bubble, Jquery

Premium CodeCanyon Noty Manager 7054200 WordPress Themes, Website Templates, Mobile Themes, Flash Templates & Scripts from creative professional designers. Full details of CodeCanyon Noty Manager 7054200 for digital design and education. CodeCanyon Noty Manager 7054200 desigen style information or anything related.


Add Comments:
Enter Code: *