<tutorialjinni.com/>

notify.js Example

Posted Under: JavaScript, jQuery, jQuery Plugins, Programming, Tutorials on Sep 18, 2022
notify.js Example
notify.js is a small jQuery plugin that simplifies notification process. Despite its small size it is fully customizable notification library. Usage it very simple, there no need to install it or host on your own server, use a Fast and reliable CDN for this. Since it is a jQuery Library, jQuery is mandatory. 
<script src="https://cdn.tutorialjinni.com/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.tutorialjinni.com/notify/0.4.2/notify.min.js"></script>
Now simply is the notify method 
$("#elem-id").notify("Simple Notify");
There can be six position where the notification can be displayed. if the element is not defined then the default element will be the document itself. Below buttons shows how notification can be displayed.



Complete working example of the above. 
<html>
    <head>
        <meta charset="UTF-8">
        <title>Notify.js Example</title>  
        <style>#absoluteCenteredDiv{position: absolute;top:0;bottom: 0;left: 0;right: 0;margin: auto;width:50%;height: 50%;text-align: center;}</style>
        <!-- Include JS files from a CDN -->
        <script src="https://cdn.tutorialjinni.com/jquery/3.6.1/jquery.min.js"></script>
        <script src="https://cdn.tutorialjinni.com/notify/0.4.2/notify.min.js"></script>
    </head>
    <body>
        <div id="absoluteCenteredDiv">
            <!-- HTML5 Select Tag -->
        <p>
            <h1 id="title">notify.js Demo</h1>
        </p>
        <p>
            <input type="button" name="button" onclick="simpleNotify(this)" value="Simple Notification"/>
            <input type="button" name="button" onclick="globalPositionsNotify()" value="Global Positions Notification"/>
        </p> 
        </div>
        <script>
            function simpleNotify(e){
                $(e).notify("Simple Notify");
            }
            function globalPositionsNotify(){
                $.notify("Bottom Left - Error",{position:"bottom left",className:"error"});
                $.notify("Left",{position:"left",className:"info"});
                $.notify("Right - Warning",{position:"right",className:"warn"});
                $.notify("Top Left",{position:"top left",className:"info"});
                $.notify("Top Center - Success",{position:"top center",className:"success"});
                $.notify("Top Right",{position:"Top Right",className:"info"});
                $.notify("Bottom Right",{position:"bottom right",className:"info"});
                $.notify("Bottom Center",{position:"bottom center",className:"info"});
            }
        </script>
        </div>
    </body>
</html>
One can also tweak the following settings to suite its need. 
{
  // whether to hide the notification on click
  clickToHide: true,
  // whether to auto-hide the notification
  autoHide: true,
  // if autoHide, hide after milliseconds
  autoHideDelay: 5000,
  // show the arrow pointing at the element
  arrowShow: true,
  // arrow size in pixels
  arrowSize: 5,
  // position defines the notification position though uses the defaults below
  position: '...',
  // default positions
  elementPosition: 'bottom left',
  globalPosition: 'top right',
  // default style
  style: 'bootstrap',
  // default class (string or [string])
  className: 'error',
  // show animation
  showAnimation: 'slideDown',
  // show animation duration
  showDuration: 400,
  // hide animation
  hideAnimation: 'slideUp',
  // hide animation duration
  hideDuration: 200,
  // padding between element and notification
  gap: 2
}


imgae