Bootstrap Snippet Auto-refreshing badge number for notifications using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar navbar-expand-lg navbar-light bg-secondary">
  <a class="navbar-brand" href="#">LOGO</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#"><span class='fa fa-home'></span>·Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"><span class='fa fa-envelope'></span>·</span>Messages <span class='badge badge-info' id='badge'>0</span></span></a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0" id="searchform">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" id="searchbox"><span class="fa fa-search search"></span>  
    </form>
  </div>
</nav>
<div class="container">
    <div class="row">
        <h2>Auto-refreshing badge numbers on navbar</h2>
        
    </div>
    <div class="row">
        Just a simple little bootsnipp with jquery to auto-update notification badge.  You can combine this with ajax to get a count from a database every thirty seconds or so, i.e. facebook style.  For the purposes of this bootsnipp, I'm initializing with 0 and getting a random number between 1-100 from random.org to illustrate.
        <br><br>Really, you would use this with an SQL count check, i.e.: <code class='p-2'>select count(*) as count from table where column='criteria'</code>Make a function in whatever back-end language you are using (php, javascript, asp, whatever) then call that function with ajax, returning only a number to the page.  So, if you are recording messages in the database, you can get an accurate count every whatever-interval-you-set.  For the purposes of this demo I've got it set to 5 seconds.
        <br><br>Also in this snipp, a little css here with search on nav to include faded search icon from font awesome.
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
input[type=search] {  padding-left: 30px; }
span.search {
    margin-left: 8px;    
    position: absolute;
    float: right;
    opacity: .25;
}
.badge {
    /* you don't have to use any of this
    adds styling to badge */
    text-align: center;    
    vertical-align: super;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    color: white;
    font-size: 8px;
    /* uncomment below line to have show over envelope icon */
    /* margin-left: -100px; */
    border-radius: 50%;   
}  
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//sample ajax call -- make sure the datatype is text.  
//for purpose of this demo, using random number generator api 
var getCount=function(){
    $.ajax({
        url: "https://www.random.org/integers/?num=1&min=1&max=100&col=1&base=10&format=plain&rnd=new",
        type: "POST",
        dataType: "text",
        cache: false,
        success: (function(data) {
           result = data;
           $('#badge').text(result);
        })    
    });    
}
// set the count -- 1000/one second 
setInterval(function() {
    getCount();
}, 5000); 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Auto-refreshing badge number for notifications"
Bootstrap 4.1.1 Snippet by jstainbrook

Related: See More

Questions / Comments:

"Auto-refreshing badge number for notifications" Bootstrap 4.1.1 Snippet by jstainbrook

Related: See More

Questions / Comments:

"Auto-refreshing badge number for notifications"
Bootstrap 4.1.1 Snippet by jstainbrook