jQuery Notify

JQuery Notification

by JQ Purfect

HTML

<div class="info message" id="notify_autopop">
         <h3>FYI, I only show up when the page loads!</h3>
         <p>This is just info notification message.</p>
</div>

<div class="info message" id="notify_info">
         <h3>FYI, something just happened!</h3>
         <p>This is just an info notification message.</p>
</div>

<div class="error message" id="notify_error">
         <h3>Oops, an error ocurred</h3>
         <p>This is just an error notification message.</p>

</div>

<div class="warning message" id="notify_warning">
         <h3>Wait, I must warn you!</h3>
         <p>This is just a warning notification message.</p>
</div>

<div class="success message" id="notify_success">
         <h3>Congrats, you did it!</h3>
         <p>This is just a success notification message.</p>

</div>

<ul id="trigger-list">
         <li><a href="#notify_info" class="info_trigger">Info</a></li>
         <li><a href="#notify_error" class="error_trigger">Error</a></li>
         <li><a href="#notify_warning" class="warning_trigger">Warning</a></li>
         <li><a href="#notify_success" class="success_trigger">Success</a></li>
</ul>

CSS

body
{
         margin: 0;
         padding: 0;
         font: 14px Arial, Helvetica, sans-serif;
         background: #f1f1f1;
}

.message
{
        -webkit-background-size: 40px 40px;
        -moz-background-size: 40px 40px;
        background-size: 40px 40px;            
        background-image: -webkit-gradient(linear, left top, right bottom,
                                color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
                                color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
                                color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
                                to(transparent));
        background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);
        background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);
        background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);
        background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);
        background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                  ...

JavaScript

$.fn.notify = function(settings_overwrite){
    settings = {
        placement:"top",
        default_class: ".message",
        delay:0
    };
    $.extend(settings, settings_overwrite);
    
    $(settings.default_class).each(function(){$(this).hide();});
    
    $(this).show().css(settings.placement, -$(this).outerHeight());
    obj = $(this);
    
    if(settings.placement == "bottom"){
        setTimeout(function(){obj.animate({bottom:"0"}, 500)},settings.delay);
    }
    else{
        setTimeout(function(){obj.animate({top:"0"}, 500)},settings.delay);
    }
}

$(document).ready(function(){

    $("a.info_trigger").click(function(){
        $("#notify_info").notify({
            placement:"bottom"
        });
        return false;
    });
    
    $("a.warning_trigger").click(function(){
        $("#notify_warning").notify();
        return false;
    });
    $("a.error_trigger").click(function(){
        $("#notify_error").notify();
        return false;
    });
    $("a.success_trigger").click(function(){
        $("#notify_success").notify();
        return false;
    });
    
$("#notify_autopop").notify({
        delay:500
    });
});