JQuery Notify

Display notifications one at a time unsing this JQuery plugin.

by Devendra Mani

HTML

<button onclick="clearCook();">Clear Cookie</button>

CSS

.alert{
    border-radius: 5px;
    color: #C09853;
    background-color: #FCF8E3;
    border: 1px solid #FBEED5;
    padding: 5px;
}
.alert.info{
    background-color: #D9EDF7;
    border-color: #BCE8F1;
}
.info{
    color: #3A87AD;
}
.alert.error{
    background-color: #F2DEDE;
    border-color: #EED3D7;
}
.error{
    color: #B94A48;
}
.alert.success{
    background-color: #DFF0D8;
    border-color: #D6E9C6;
}
.success{
    color: #468847;
}
#notifier{
    position:fixed;
    bottom: 0;
    left: 35%;
    right: 35%;
    width: 30%;
    text-align: center;
    border-radius: 5px 5px 0 0;
    border-bottom: none;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}
#notifier .title{
    font-weight: bold;
    font-size: 2em;
    border-bottom: 1px dashed;
}

JavaScript

$.extend({
    notify: function(options) {
        var html = [];
        var defaults = {
            delay: 5000,
            element: '#notifier',
            className: 'alert'
        };
        var settings = $.extend({}, defaults, options);
        var $element = $(settings.element);
        if (!$element.length) {
            $element = $('<div id="notifier">').hide().appendTo('body');
        }
        if (!$element.data('notifyCount')) {
            $element.data('notifyCount', 0).click(function() {
                if (!$(this).is(':animated')) {
                    $(this).stop();
                }
            });
        }
        if (settings.title) {
            html.push('<div class="title">');
            html.push(settings.title);
            html.push('</div>');
        }
        html.push('<div class="content">');
        html.push(settings.message);
        html.push('</div>');
        $element.data('notifyCount', $element.data('notifyCount') + 1).queue(function(next) {
            $(this).empty().addClass(settings.className + ' ' + settings.type).append($(html.join('\n')));
            next();
        }).slideDown().delay(settings.delay).slideUp().queue(function(next) {
            $(this).data('notifyCount', $(this).data('notifyCount') - 1).removeClass(settings.className + ' ' + settings.type);
            next();
        });
    }
});

$(document).ready(function() {
    if(getCookie("notified")==""){
        $.notify({
            type: 'error',
            delay: 4000,
            message: 'Notification'
        });
   document.cookie="notified=yes";
    }
});


function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}

function clearCook(){
    document.cookie="notified=";
}