underdog underdog - 4 months ago 59
jQuery Question

Jquery bootstrap facebook style notification

I am writing a notification system just like Facebook using bootstrap 3.
I am using a bootstrap ul element with dropdown-menu class

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-microphone"></i> Notifications</a>
<ul class="dropdown-menu">
<li><a href="#"><span class="label label-primary">7:00 AM</span> Hi :)</a></li>
<li role="presentation" class="divider"></li>
<li><a href="#"><span class="label label-primary">8:00 AM</span> How are you?</a></li>
<li role="presentation" class="divider"></li>
<li><a href="#"><span class="label label-primary">9:00 AM</span> What are you doing?</a></li>
<li class="divider"></li>
<li><a href="#" class="text-center">View All</a></li>
</ul>
</li>


Right now the li values are just hardcoded.

enter image description here

I need to display on the UI the number of notifications a user has, just like facebook does. Please see the below sample image, I need to display number of notifications just like 2 & 12 are displayed. I am not a deft javascript coder I am more of a backend java programmer. Can anyone guide me in the right direction as to how to achieve that? Is there any bootstrap plugin or something to achieve this? I did my research on web but did not find much. Any help would be appreciated.

enter image description here

Answer

I would do it as :

$("#icon1 > var").text("8");
.icon {
  width:64px;
  height:64px;
  position:relative;
  background:yellow;
}

.icon > var {
  position:absolute;
  top:0;
  right:0;
  padding:2px 8px;
  background: red; color: white;
  border-radius:3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=icon id="icon1">
  <var></var>  
</div>

Comments