Tiny Growl-style Notification Plugin For jQuery - Alertigo

File Size: 4.87 KB
Views Total: 1546
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Tiny Growl-style Notification Plugin For jQuery - Alertigo

Alertigo is a very small (~2kb unminified) and cross-browser jQuery plugin to display stacked, sticky (or auto-dismissable), and growl style alert messages at the bottom of the screen.

How to use it:

1. Make sure jQuery library is included in the document, then include the jquery-alertigo.css and jquery-alertigo.js in the web page.

<link href="jquery-alertigo.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-alertigo.js"></script>

2. Create a placeholder element for the alert notifications.

<div id="alertigo"></div>

3. The JavaScript to display a default alert notification on the screen.

$(document).ready(function(){
  alertigo('This is a default alertigo.js notification message!');
});

4. To change the default theme of the alert notification, just override the default value of the color option as this:

$(document).ready(function(){

  alertigo('This is a GREEN alertigo.js notification message!', {
    color: 'green'
  });

  alertigo('This is a LIGHT-BLUE alertigo.js notification message!', {
    color: 'light-blue'
  });

  alertigo('This is a ORANGE alertigo.js notification message!', {
    color: 'orange'
  });

  alertigo('This is a RED alertigo.js notification message!', {
    color: 'red'
  });
  
});

5. By default, the alert notification will auto dismisses after 3 seconds. To change the default timeout follow this step:

$(document).ready(function(){

  alertigo('Auto dismiss after 1000ms', {
    life: '1000'
  });

});

6. You can also create a sticky notification message that always stays on the screen until you click it.

$(document).ready(function(){

  alertigo('This is a STICKY alertigo.js notification message!',{
    sticky: true
  });

});

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