Live Notification like Facebook using Jquery and Css

Today I am going to share same kind of facebook like live notification system using jquery and css.

Everyone knows that facebook has a live notification messages that pop ups bottom-left corner. 

Using the simple Jquery code,we can use the live notification messages,

<script>
 $(document).ready(function() {
     $.sticky('The webpage has loaded!');
     var callnotification = function(){
     $.sticky('<b>You have a new message!</b>');
     }
     setInterval(callnotification,4000);
 });
</script>

By default it is on the top-right. Other options are we can design it on the bottom-right, bottom-left, top-left.close option is also there.

Index :

<div style="margin:0 auto; margin-right:250px; padding:10px; width:30%; background:#fff;">
<h1>Live Notification like Facebook using Jquery - by </h1><a href="http://suganjayaraman.blogspot.in/">suganjayaraman.blogspot.in</a>
</div>

style :

div.sticky-queue
    { 
    position:absolute;
    background:#fff;
    border:1px solid #999;
    box-shadow:0px 0px 5px #bbb;
    -moz-box-shadow:0px 0px 5px #bbb;
    -webkit-box-shadow:0px 0px 5px #bbb;
    width:200px;
    }
div.sticky
    {
    font-size:12px;
    color:#555;
    display:none;
    padding:10px;
    position:relative;
    }
img.sticky-close
    {
    position:absolute;
    top:10px;
    right:10px;
    height:14px;
    width:14px;
    cursor:pointer;
    }
.top-right
    { right:20px; }
.top-left
    { left:20px; }
.top-right, .top-left
    {
    top:-2px;
    border-bottom-right-radius:6px;
    border-bottom-left-radius:6px;
    -moz-border-radius-bottomright:6px;
    -moz-border-radius-bottomleft:6px;
    -webkit-border-bottom-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    }

Script :

<script>
 $(document).ready(function() {
     $.sticky('The webpage has loaded!');
     var callnotification = function(){
     $.sticky('<b>You have a new message!</b>');
     }
     setInterval(callnotification,4000);
 });
</script>