css - Notication bars like Facebook -


i'm looking notification bar of facebook; ones how many "friend requests", "notification" or "messages" have. there fancy implemented bootstrap, foundation or... can use? or need use css and.. create own?

thanks

bootstrap have concept built in, calls them badges:

seems has has idea before library called cakephp , can't see easy way pull information out:

i found nice example snippet here, notification badge on left rather in top right:

which has markup this:

<div class="navbar" style="position: static;">   <div class="navbar-inner">     <div class="container">       <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">         <span class="icon-bar"></span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>       </a>       <a class="brand" href="#">title</a>       <div class="nav-collapse collapse">         <ul class="nav">           <li class="active"><a href="#">home</a></li>           <li>               <a href="#"                   data-html="true"                  data-placement="bottom"                  data-toggle="popover"                  data-content="notification 1<br/>notification 2"                  data-original-title="notifications">                   <span class="badge badge-success">2</span> notifications               </a>           </li>           <li><a href="#">link</a></li>         </ul>       </div><!-- /.nav-collapse -->     </div>   </div><!-- /navbar-inner --> </div> 

and startup function this:

$(function() {     $('[data-toggle=popover]').popover(); }) 

it uses popover show notifications. still going have write more code turn feature though being able push notifications client while page loaded, mark them processed when user opens notification menu, , pass info data store.


Comments

Popular posts from this blog

html5 - What is breaking my page when printing? -

c# - must be a non-abstract type with a public parameterless constructor in redis -

ajax - PHP/JSON Login script (Twitter style) not setting sessions -