gritter

http://boedesign.com/demos/gritter/

by ecartdk

HTML

<script src="http://boedesign.com/demos/gritter/js/jquery.gritter.min.js"></script>
<div id="container"> 
    <h1>Gritter Demo</h1> 
    <p> 
        The super awesome background is just to show you that all notifications are transparent! 
        <em>Tested in: FF 3+, Opera 9, IE7, IE8, Safari 4+</em> 
    </p> 
    <ul> 
        <li> 
            <a href="#" id="add-regular">Add regular notification</a>: Fades out after a certain amount of time, can be set for each notification. 
        </li> 
        <li> 
            <a href="#" id="add-sticky">Add sticky notification</a>: Doesn't run on a fade timer.  Just sits there until the user manually removes it by clicking on the (X) 
        </li> 
        <li> 
            <a href="#" id="add-without-image">Add notification without image</a> 
        </li> 
        <li> 
            <a href="#" id="add-with-callbacks">Add notification (with callbacks)</a> 
        </li> 
        <li> 
            <a href="#" id="add-sticky-with-callbacks">Add a sticky notification (with callbacks)</a> 
        </li> 
        <li> 
            <a href="#" id="remove-all">Remove all notifications</a> 
        </li> 
        <li> 
            <a href="#" id="remove-all-with-callbacks">Remove all notifications (with callbacks)</a> 
        </li> 
    </ul> 
</div>

CSS

/* the norm */ #gritter-notice-wrapper {     position:fixed;     top:20px;     right:20px;     width:301px;     z-index:9999; } #gritter-notice-wrapper.top-left {     left: 20px;     right: auto; } #gritter-notice-wrapper.bottom-right {     top: auto;     left: auto;     bottom: 20px;     right: 20px; } #gritter-notice-wrapper.bottom-left {     top: auto;     right: auto;     bottom: 20px;     left: 20px; } .gritter-item-wrapper {     position:relative;     margin:0 0 10px 0;     background:url('http://boedesign.com/demos/gritter/images/ie-spacer.gif'); /* ie7/8 fix */  } .gritter-top {     background:url(http://boedesign.com/demos/gritter/images/gritter.png) no-repeat left -30px;     height:10px; } .hover .gritter-top {     background-position:right -30px; } .gritter-bottom {     background:url(http://boedesign.com/demos/gritter/images/gritter.png) no-repeat left bottom;     height:8px;     margin:0; } .hover .gritter-bottom {     background-position: bottom right; } .gritter-item {     display:block;     background:url(http://boedesign.com/demos/gritter/images/gritter.png) no-repeat left -40px;     color:#eee;     padding:2px 11px 8px 11px;     font-size: 11px;     font-family:verdana; } .hover .gritter-item {     background-position:right -40px; } .gritter-item p {     padding:0;     margin:0; } .gritter-close {     position:absolute;     top:5px;     left:3px;     background:url(../images/gritter.png) no-repeat left top;     cursor:pointer;     width:30px;     height:30px; } .gritter-title {     font-size:14px;     font-weight:bold;     padding:0 0 7px 0;     display:block;     text-shadow:1px 1px #000; /* Not supported by IE :( */ } .gritter-image {     width:48px;     height:48px;     float:left; } .gritter-with-image, .gritter-without-image {     padding:0 0 5px 0; } .gritter-with-image {     width:220px;     float:right; }
    body { 
        background:#222 url(images/trees.jpg); 
        color:#fff; 
    } 
    a { 
        color:#00ff00; 
    } 
   ...

JavaScript

$(function(){ 
 

        // global setting override 
        /* 
        $.extend($.gritter.options, { 
            position: 'bottom-left', // possibilities: bottom-left, bottom-right, top-left, top-right 
            fade_in_speed: 100, // how fast notifications fade in (string or int) 
            fade_out_speed: 100, // how fast the notices fade out 
            time: 3000 // hang on the screen for... 
        }); 
        */ 
 

        $('#add-sticky').click(function(){ 
 

            var unique_id = $.gritter.add({ 
                // (string | mandatory) the heading of the notification 
                title: 'This is a sticky notice!', 
                // (string | mandatory) the text inside the notification 
                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.', 
                // (string | optional) the image to display on the left 
                image: 'http://s3.amazonaws.com/twitter_production/profile_images/132499022/myface_bigger.jpg', 
                // (bool | optional) if you want it to fade out on its own or just sit there 
                sticky: true, 
                // (int | optional) the time you want it to be alive for before fading out 
                time: '', 
                // (string | optional) the class name you want to apply to that specific message 
                class_name: 'my-sticky-class' 
            }); 
 

            // You can have it return a unique id, this can be used to manually remove it later using 
            /* 
            setTimeout(function(){ 
 

                $.gritter.remove(unique_id, { 
                    fade: true, 
                    speed: 'slow' 
                }); 
 

            }, 6000) 
            */ 
 

            return false; 
 

        }); 
 

        $('#add-regular').click(function(){ 
 

      ...