Desktop notifications

by sambenson

HTML

<h3 style="font-weight: bold; margin-bottom: 0;">HTML from this page</h3>
<pre><code>
$('#inline').click(function(){
    $.notify({
        inline: true,
        href: '#alert'
    }, 3000)
})

</code></pre>
<a id="inline" href="#">Click to test...</a><br /><br /><br />


<h3 style="font-weight: bold; margin-bottom: 0;">Inline HTML</h3>
<pre><code>
$('#html').click(function(){
    $.notify({
        inline: true,
        html: '<p>This is some random HTML</p>'
    }, 3000)
})

</code></pre>
<a id="html" href="#">Click to test...</a>

<div id="alert">
    <h3>Test</h3>
    <p>This is a test of a das dasd asd as das HTML within the page...</p>
</div>

CSS

/* Corners */
.notify_nw,
.notify_ne,
.notify_se,
.notify_sw{
    float: left;
    height: 20px;
    width: 20px;
    background: url(http://i.imgur.com/zW3Ww.png) no-repeat;
}

/* Sides */
.notify_w,
.notify_e {
    float: left;
    width: 20px;
    background: url(http://i.imgur.com/1ocKa.png) repeat-y;
}

/* Center and Bottom */
.notify_center,
.notify_bottom {
    clear: left;
}

/* Top and Bottom */
.notify_n,
.notify_s {
    float: left;
    background: url(http://i.imgur.com/Rs86p.png) no-repeat;
    height: 20px;
}

.notify_content {
    float: left;
    background: #1E211F;
    color: #fff;
    width: 250px;
}

.notify_center {
    background: #1E211F;
}

.notify_n {
    background-position: -16px -49px;
    background-repeat: repeat-x;
}

.notify_ne {
    background-position: -20px 0;
}

.notify_se {
    background-position: 0 -20px;
}

.notify_sw {
    background-position: -20px -20px;
}

.notify_s {
    background-position: -16px -70px;
    background-repeat: repeat-x;
}

.notify_e {
    background-position: -20px 0;
}

.notification {
    clear: left;
    float: left;
}


#notification_area {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

.cl {
    margin-top: 46px;
    font-weight: bold;
    display: block;
}

pre {
    background: lightGray;
    padding: 3px;
}

#alert {
    display: none;
}

.notification #alert {
    display: block;
}

.notification iframe {
    border: 0;
}

h3 {
    font-weight: bold;
}

JavaScript

(function($){
    $.extend({
        notify: function(options, duration) {
            var 
            // Default options object 
            defaults = {
                inline: false,
                href: '',
                html: '',
                onStart: function(){},
                onComplete: function(){},
                onCleanup: function(){},
                onClosed: function(){}
            }, 
            options = $.extend(defaults, options),
            
            // Elements & Clones 
            notifications_active = ($('ul#notification_area').length ? true : false),
            container = (notifications_active ? $('ul#notification_area') : $('<ul></ul>').attr('id', 'notification_area')),
            wrapper = $('<li></li>').addClass('notification'),
                
            // Useful variables
            clone,
            get_clone,
            close, 
            start_countdown,
            element,
            north,
            south,
            east,
            west,
            content,
            add_notification,
            iframe = false;
            
           options.onStart.call(this);
            
            if(!notifications_active){
                $('body').append(container);
            }
            
            get_clone = function(){
                if(options.href){
                    if(options.inline){
                        return $(options.href).clone();
                    }
                    else {
                        iframe = true;
                        return $('<iframe></iframe>').attr('src', options.href).css({width: '100%', height: '100%'});
                    }
                }
                else if(options.html){
                    return $(options.html);
                }
            }
                
            close = function(){
                options.onCleanup.call(this);
                wrapper.fadeOut('fast', function(){
                    $(this).remove();
       ...