notification bubble badge in ajax

Problem

how to get the notification number badge in ajax like Facebook. cant post a picture here but i think people know what am i talking about. its like when you log in to Facebook, if you have new messages you will get a little number on the top right corner of the icons next to search bar. i'm currently found this piece of code in charge of creating that number but i cant go any further from that. here is the code i found.

<span class="jewelCount" id="notificationsCountWrapper">
    <span id="notificationsCountValue">1</span>
    <i class="accessible_elem"> Notifications</i>
</span>
Problem courtesy of: A Web-Developer

Solution

You want something like that?

Here is the css & jquery solution, if you like. DEMO http://jsfiddle.net/yeyene/DfSda/1/

Add <span class="ballons"></span> inside your button, and replace the dynamic count value.

.ballons {
    float:right;
    margin:-20px 8px 0 0;
    line-height:30px;
    padding:0 10px;
    border-radius: 30px;
    border:3px solid #fff;
    border-radius: 30px;
    -moz-border-radius: 30px; 
    -webkit-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    background:red;
    color:#fff;
    text-align:center;
    -moz-box-shadow:    1px 1px 3px 3px #ccc;
    -webkit-box-shadow: 1px 1px 3px 3px #ccc;
    box-shadow:         1px 1px 3px 3px #ccc;
}
Solution courtesy of: yeyene

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.