jquerymobile 1.4 Feed Bubble that shows count

by Varun Nath

HTML

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
     <div data-role="page" id="rankings" data-title="Rankings"> 

              <div data-role="header" data-position="fixed">

          <!--   <a href="#" id="open-panel" data-role="button" data-icon="grid" data-iconpos="notext"></a>
           -->
            <h1>Latest Rankings</h1>

               

              </div>

              <div data-role="content">

                <ol data-role="listview" data-inset="true" data-theme="a">
                </ol>

            </div>

             <div data-role="footer" data-position="fixed">
                  <div data-role="navbar">
                    <ul>
                        <li><a href="#rankings-week">Week</a></li>
                        <li><a href="#rankings-month">Month</a></li>
                        <li class="ui-badge-container">
                            <span id="badge" class="badge">3</span>
                            <a href="#rankings" class="ui-btn-active ui-state-persist">
                             Feed
                            </a>
                        </li>
    
                    </ul>

                </div>
             </div>
         
</div>

CSS

.ui-badge-container{
    position:relative;
}

.badge {
  background: #BA070F;
  color: #fff;
  padding: 1px 7px;
  position: absolute;
  right: 6px;
  top: -12px;
  z-index: 999;
  border-radius: .8em;
  border: 2px solid #fff;
}