Super Tiny Notification Plugin With jQuery - Notifino

Notifino is a very small (~3kb unminified) jQuery plugin for creating flexible, customizable notification bars that appear at the top of the webpage.

How to use it:

1. Load jQuery library together with the jQuery Notifino plugin's JS and CSS files in the html page.

<link rel="stylesheet" href="notifino.css">
<script src="jquery.min.js"></script>
<script src="jquery.notifino.js"></script>

2. Load the Font Awesome 4 Icon Font for the close icon (OPTIONAL).

<link rel="stylesheet" href="font-awesome.min.css">

3. Display a default notification bar on the webpage.

$(" body ").notifino();

4. Change the default styles and message text of the notification bar.

$(" body ").notifino({

  // HEX CODE or RGB
  background      : '#23ADDB', 

  // Message text
  text            : 'Hey there, you got a new notification!', 

  // Text color
  color           : '#fff',

  // Default wrapper
  wrapper         : '<div class="notifino"></div>', 

  // standard - fluid - boxed
  layout          : 'fluid', 

  // Rounded border or not
  rounded         : false, 

  // Text for close button
  closeBtnText    : '', 

  // Close button options
  closeButton     : {
    show    : true,
    id      : "notifino-close", 
    class   : 'notifino-btn-rounded',
    icon    : true
  },

});

5. Add a second action button to the notification bar.

$(" body ").notifino({

  secondButton    : {
    show      : true,
    text      : 'Learn more',
    href      : 'http://jqueryscript.net',
    bgColor   : '',
    textColor : '#fff' 
  }

});

---

This awesome jQuery plugin is developed by erstefan. For more Advanced Usages, please check the demo page or visit the official website.