jQuery notif plugin

 

A jQuery plugin to notify user.

Download

Github: https://github.com/aliozkan/jQuery-Notif
Tarball: Download

Licensed under MIT License
Copyright © 2012, Ali Özkan
All rights reserved.

Options

Demo

Basic usage:
  $.notif({
    'message'   : 'Message Text',
    'title'     : 'Header'
  });
Type usage:
  $.notif({
    'message'   : 'Message Text',
    'title'     : 'Header',
    'duration'  : 10000,
    'type'      : 'info' // info, success ,warning, error
  });
Locations:
  $.notif({
    'message'   : 'Message Text',
    'title'     : 'Header',
    'duration'  : 10000,
    'type'      : 'info',
    'horizontal': 'top', // top, bottom
    'vertical'  : 'right' // right, left
  });
Clear previous notifications:
  $.notif({
    'message'   : 'Message Text',
    'title'     : 'Header',
    'duration'  : 10000,
    'type'      : 'info',
    'horizontal': 'bottom', 
    'vertical'  : 'left',
    'clear'     : true
  });
Custom Link:
  $.notif({
    'message'   : 'Message Text',
    'title'     : 'Header',
    'duration'  : 10000,
    'type'      : 'info',
    'horizontal': 'bottom', 
    'vertical'  : 'left',
    'link'     : 'http://google.com'
  });
get notification id:
Method returns a number that identify the container:
  var lastId = $.notif({
    'message'   : 'Message Text',
    'title'     : 'Header',
    'duration'  : 10000,
    'type'      : 'info',
    'horizontal': 'top', // top, bottom
    'vertical'  : 'right' // right, left
  });
  $('#catched').html('id of the last container: notif_container_'+lastId);
  // You can remove a spesific item:
  $.removeNotif(lastId);

clear notifications:
You can clear a spesific location or all of them
  $.clearNotif();
  $.clearNotif({'horizontal':'top'});
  $.clearNotif({'horizontal':'bottom'});
  $.clearNotif({'vertical':'left'});
  $.clearNotif({'vertical':'right'});
  $.clearNotif({'horizontal':'bottom','vertical':'left'});
Css:
You can modify as you want here.
  .notif_container {
    position:fixed;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 2px 3px rgba(255, 255, 255, 0.5) inset, 0 2px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    padding: 15px 15px;
    min-width: 200px;
    max-width:300px;
    cursor:pointer;
    min-height: 40px;
    z-index: 9999 !important;
}

.notif_container.notif-left {
    left: 30px;
}

.notif_container.notif-right {
    right: 30px;
}

.notif_container h3 {
    font-size: 14px;
    font-weight: bold;
    margin-top: 0;
    line-height: 20px;
    color: inherit;
}

.notif_container p {
    margin-bottom: 0;
    font-size: 13px;
    margin-top: 5px;
}

.notif_container.notif-error {
    background-color: #FAE2E2;
    background-image: -moz-linear-gradient(center top , #FAE2E2, #F2CACB);
    border: 1px solid #EEB7BA;
    color: #BE4741;
    text-shadow: 0 1px 1px #FFFFFF;
}

.notif_container.notif-info {
   background-color: #CCDDFF;
    background-image: -moz-linear-gradient(center top , #EEEEFF, #CCDDFF);
    border: 1px solid #CADCEA;
    color: #225B86;
    text-shadow: 0 1px 1px #FFFFFF;
}

.notif_container.notif-warning {
    background-color: #FFFFC0;
    background-image: -moz-linear-gradient(center top , #FFFFC0, #F9EE9C);
    border: 1px solid #E5DBAA;
    color: #6D7829;
    text-shadow: 0 1px 1px #FFFFFF;
}

.notif_container.notif-success {
    background-color: #E5EDC4;
    background-image: -moz-linear-gradient(center top , #E5EDC4, #D9E4AC);
    border: 1px solid #B8C97B;
    color: #3F7227;
    text-shadow: 0 1px 1px #FFFFFF;
}