Question

I have a header with few icons, i want to show a bubble count dynamically in a icon like badge icon with notification count. How can we do in jquery mobile? I searched in jquery mobile for bubble count but its currently available with listview, but i want to show the count in a icon right top corner like iOS notification count. Find the below reference url for badge icon that needs to implement in jquery mobile, url: http://en.wikipedia.org/wiki/Apple_Push_Notification_Service

Answer 1

This could be done with CSS.

HTML

<div class="icon">
    <span class="count">12</span>
</div>

CSS

.icon {
   width: 50px;
   Height: 50px;
   background: url(/images/icon.png)
}

.icon .count {
    background:#ff0000;
    position: absolute; 
    top: -8px;
    Right: -8px;
    min-width:14px;
    height: 14px;
    color:#ffffff;
    border-radius: 50%;
    padding: 2px;
    text-align: center;
    font-size: 12px;
}

Now all you have to do is figure out when to insert the number into the “bubble”

EDIT : “icon” class dot was missing.