Simple Live Notifications With jQuery

Posted under :
Download the script Check the demo

A notification plugin would be usefull and a good feature for your web application, i introduce today a simple live notification plugin working with some line of jQuery and HTML including a popup box in the bottom of the page, a live dynamique counter in the name tab of your website and live counter within a dedicated icon similar with the one on Facebook

I will explain to you, step by step how to install the plugin, for now take a look of how it wotk or just download the project:

First of all, we include the jQuery library and the CSS file
In this case i just call jQuery from the google host, we can download it and call from our server directory and the css file is just to make the example to look in a good way :)

<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

How it works!

By default the notification counter is set on zero “0”,
By clicking on the “notify me” button :
Pick up the count notification number which is 0 (zero) by default in this example, convert it to integer number and increment it with (+1)

var countNotif = parseInt($('.counter').text());
var newcountNotif = ++countNotif;

Then change the class of the div containing the notif icon with a new white notification icon by removing the current icon and add the new css class and showing the counter after having at least (1) notification

$('#msg-icon').removeClass('msg-icon').addClass('msg-iconh');
$('.counter').text(newcountNotif).show();

Then to change the tab title, we just update the time with the counter by taken the default one, adding the counter then set the new title containing the new notification number.

var thetitle = $('title').text();
$('title').text('('+newcountNotif+') '+thetitle);

To create and show the popup div box in the bottom of the page we use the code bellow with class of the box, the text appearing in the screen and the delay of the fadeout (5000 = 5sec)

jQuery('<div/>', {
    id: 'notif-bot',
    class : 'notif-bot alert alert-info',
    text: 'You just got a notification!'
    }).appendTo('.notif-bot-cnt')
      .delay(5000)
      .fadeOut();
});

Just one more thing, by clicking in the notification icon, we set counter to the “0” and we set everything for the default etat

$('#msg-icon').click(function(){
    $('this').removeClass('msg-iconh').addClass('msg-icon');
    $('.counter').text('0').hide();
    $('.notif-bot').hide();
    $('title').text(thetitle);
})

In result we will get :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>The Title</title>
        <link type="text/css" rel="stylesheet" href="css/style.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>
 
    <body>
    
     <script>
     	$(function(){ 
            var thetitle = $('title').text();
     		$('.notif').click(function(){

     			var countNotif = parseInt($('.counter').text());	
     			var newcountNotif = ++countNotif;
     			$('#msg-icon').removeClass('msg-icon').addClass('msg-iconh');
     			$('.counter').text(newcountNotif).show();
     			$('title').text('('+newcountNotif+') '+thetitle);

                 jQuery('<div/>', {
                    id: 'notif-bot',
                    class : 'notif-bot alert alert-info',
                    text: 'You just got a notification!'
                    }).appendTo('.notif-bot-cnt')
                        .delay(5000)
                        .fadeOut();
     		});

            $('#msg-icon').click(function(){
                $('this').removeClass('msg-iconh').addClass('msg-icon');
                $('.counter').text('0').hide();
                $('.notif-bot').hide();
                $('title').text(thetitle);
            })
     	});
     </script>

     <div class="fb-bar">
     	<div id="msg-icon" class="msg-icon">
     		<id class="counter" style="display:none">0</id>
     	</div>

     </div>
     	
	<div class="notif">notify me</div>
    <div class="notif-bot-cnt"></div>

</body>
</html>


Be notified for new scripts