Home / Premium Pro Plugins / Noty Manager

Noty Manager

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)


Extremely customizable notification supervisor.
It additionally helps open supply Noty plugin.

Noty Supervisor Documentation


A – Set up

Embrace the newest launch of jQuery earlier than your NotyManager recordsdata.
The Google AJAX Libraries API can be utilized for this however you may additionally host the library your self.

Embrace jquery.noty.supervisor.js and its dependancies beneath jQuery.

NotyManager is appropriate with jQuery 1.6+ for now.

Your code ought to then be just like this:

<script sort="textual content/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script sort="textual content/javascript" src="js/noty-manager/jquery.noty.supervisor.js"></script>

If you wish to use this supervisor with open supply Noty plugin. Embrace jquery.noty.packaged.min.js too.

<script sort="textual content/javascript" src="js/noty/packaged/jquery.noty.packaged.min.js"></script>

B – Initializing

Initializing an occasion is straightforward really, as may be seen within the beneath;

// NotyManager initialization
window.NotyManager = new $.NotyManager($('#notifications'), 
    bubble   : 
        high : 10,
        left: -2,
        showZero: true
    max: 30,
    container: $('#notification-list'),
    wrapper: '<div/>',
    emptyHTML: '<div class="no-notification">There isn't a notification in right here</div>',
        onOpen: perform() ,
        onClose: perform() 
    useNoty: true,
        format: 'bottomLeft',
        timeout: false,
        closeWith: ['button']

C – Creating Notifications

If you create a notification with beneath capabilities, it returns a NotyManager occasion. So it’s chainable.

You may give any html as a notification content material.

// notification physique's may be any html string or simply string
var notification_1 = '<div class="activity-item"> <i class="fa fa-tasks text-warning"></i> <div class="exercise"> There are <a href="#">6 new duties</a> ready for you. Remember! <span>About three hours in the past</span> </div> </div>',
notification_2 = '<div class="activity-item"> <i class="fa fa-check text-success"></i> <div class="exercise"> Mail server was up to date. See <a href="#">changelog</a> <span>About 2 hours in the past</span> </div> </div>',
notification_3 = '<div class="activity-item"> <i class="fa fa-heart text-danger"></i> <div class="exercise"> Your <a href="#">newest put up</a> was preferred by <a href="#">Audrey Mall</a> <span>35 minutes in the past</span> </div> </div>',
notification_4 = '<div class="activity-item"> <i class="fa fa-shopping-cart text-success"></i> <div class="exercise"> <a href="#">Eugene</a> ordered 2 copies of <a href="#">OEM license</a> <span>14 minutes in the past</span> </div> </div>';

NotyManager.alert('Another string or <sturdy>html</sturdy>');
NotyManager.error(notification_4,  useNoty: false, improve: false );

D – Choices & Defaults

Choices and default values are listed beneath;

// NotyManager initialization
window.NotyManager = new $.NotyManager($('#notifications') /* that is the bubble connect aspect */, 

    // bubble choices
    bubble   : 
        high : 10, // default: 10
        left: -2, // default: -2
        showZero: true // default: false

    // max bubble depend, if the depend is larger than 30 it's going to present 30+
    max: 30, // default: 20

    // this this the notification container
    container: $('#notification-list'), // default: <div/>

    // that is the wrapper of the a single notification
    wrapper: '<div/>',

    emptyHTML: '<div class="no-notification">There isn't a notification in right here</div>', // default: as is


        // This callback is fired every time a notification record is opened
        onOpen: perform()  // default: perform()
            // NotyManager occasion accessible with this variable on this scope
            console.log('opened', this);

        // This callback is fired every time a notification record is closed
        onClose: perform()  // default: perform()
            // NotyManager occasion accessible with this variable on this scope
            console.log('closed', this);

    // Beneath settings for the utilizing open supply Noty plugin

    // if true notifications additionally seems on the display screen
    useNoty: true, // default: false

    // this settings used when if useNoty is `true`
        format: 'bottomLeft', // default: 'bottomLeft'
        timeout: false, // default: false
        closeWith: ['button'] // default: ['button']

Choice Default Description
bubble.high 10 Bubble high place from aspect
bubble.left -2 Bubble left place from aspect
bubble.showZero false If false and there’s no notification, bubble is not going to be displayed. In any other case bubble will show zero (zero).
max 20 Max restrict for bubble depend, if depend larger than max restrict bubble will show maxlimit+ On this case 20+
container $(’<div/>’) That is the container of notification messages. Every notification shall be prepend on this container.
wrapper $(’<div/>’) That is the wrapper of every notification html’s. You should utilize this wrapper for css styling and and so on.
emptyHtml There isn’t a notification in right here If there is no such thing as a notification within the ‘container’ this html shall be proven within the container.
callback.onOpen perform() This callback fired when notification container opened
callback.onClose perform() This callback fired when notification container closed
useNoty false If true and noty plugin is loaded, notifications shall be show on the display screen.
noty Object This selection shall be utilized by noty plugin. Choice particulars are right here.

E – Per Notification Choices

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

First parameter is the notification html content material.
Second parameter may be useable for the per notification choice overriding.
For now per notification choices contains useNoty and improve choices.

    useNoty: false, // notification is not going to be displayed with noty. default: true
    improve: false // notification is not going to improve the bubble depend. default: true



Operate Param Description
NotyManager.alert(param1, param2); String, Object For making a standart sort notification
NotyManager.data(param1, param2); String, Object For making a data sort notification
NotyManager.warning(param1, param2); String, Object For making a warning sort notification
NotyManager.error(param1, param2); String, Object For making a error sort notification
NotyManager.improve(param); Quantity Improve the depend of bubble
NotyManager.lower(param); Quantity Lower the depend of bubble
NotyManager.setCount(param); zero Bubble depend setter
NotyManager.getNotificationCount(); None Returns notification aspect’s depend
NotyManager.getBubbleCount(); None Returns bubble’s depend
NotyManager.clearNotifications(); None Clears the notification components


Check Also


Double Colors

DOWNLOAD It’s countless recreation. You want faucet for rotate blocks. Contact similar colours! Watch video ...


Love Calculator

DOWNLOAD Love calculator is a enjoyable software the place buddies and can calculate the share ...