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

<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. </div> </div>
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%; }
//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);

Related: See More


Questions / Comments: