Notify Notify is a notification bar that can be positioned at the top or bottom of screen.
$('#notify').puinotify();
                                
<div id="notify"></div>
                                
Name Type Default Description
position string top Defines position of notify, can be "top" or "bottom".
visible boolean false Specifies if notify should be auto open on load.
animate boolean true Show and Hide events are animated by default, setting this option would disable effects.
effectSpeed int/string normal Speed in milliseconds or keywords like slow, normal and fast.
easing string swing Optional easing to use in animation.
Name Parameters Description
beforeShow event: puinotifybeforeShow event Fired before showing.
afterShow event: puinotifyafterShow event Fired after showing.
beforeHide event: puinotifybeforeHide event Fired before hiding.
afterHide event: puinotifyafterHide event Fired after hiding.

Example

$('#default').puinotify({
    beforeShow: function(event) {
        //...
    }
});
                                
Name Parameters Description
show content: Content to display as html. Shows the notify after updating with optional content.
hide - Hides the notify.
update content: Content to display as html. Updates content of notify.
option name: Name of the option Returns the value of the option.
option name: Name of the option, value: Value of the option Set the value of the option.

Example

$('#default').puinotify('show');
                                
$(function() {                
    $('#t-btn-show').puibutton({
        click: function() {
            $('#notifytop').puinotify('show', '<h1>PrimeUI Notify Widget</h1> <p>Notify is a notification bar that can be positioned at the top or bottom of screen.</p>');
        }
    });

    $('#b-btn-show').puibutton({
        click: function() {
            $('#notifybottom').puinotify('show', '<h1>PrimeUI Notify Widget</h1> <p>Notify is a notification bar that can be positioned at the top or bottom of screen.</p>');
        }
    });

    $('#notifytop').puinotify({
        easing: 'easeInOutCirc'
    });

    $('#notifybottom').puinotify({
        easing: 'easeInOutCirc',
        position: 'bottom'
    });
});
                                
<button id="t-btn-show" type="button">Top</button>
<button id="b-btn-show" type="button">Bottom</button>

<div id="notifytop"></div>
<div id="notifybottom"></div>