CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
techPackets
techPackets

Reputation: 4506

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

Upvotes: 1

Views: 3763

Answers (3)

sertsedat
sertsedat

Reputation: 3600

With jquery you can count the child elements which has notification text in them.

Like

var notification_count = $(".dropdown li:has(a)").length - 1

Doing so will give you the notification count. (-1 is for "View All" element).

For notification icon:

You do not need an image as notification count. Simply place a div or span or something other with pure html css:

.notification-count{
    height:30px;
    line-height:30px;
    padding:5px 7px;
    background-color:red;
    color:white;
    border-radius:4px;
}
<span class="notification-count">3</span>

You can position them according to their parents.

Upvotes: 1

CrazyDeveloper
CrazyDeveloper

Reputation: 105

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-microphone"></i> Notifications <span class="badge">5</span> </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>

Upvotes: 0

c-smile
c-smile

Reputation: 27460

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>

Upvotes: 3

Related Questions