Google Plus Style Notification Box Tutorial
I love its simple design and box animation with easing.
So I decided to create my own version.
Today we are going to do a script that will look like the Google+ notification box. I was able to achieve this using jQuery, jQuery easing plugin and PHP.
You should see the live demo before coding:
The database I used (notifications.sql) is included in the code download. Here are the files I used:
- css/style.css - stylesheet
- img/ajax-loader.gif - loader image to show while loading the actual notification
- js/jquery.easing.1.3.js - the plugin used for animation (easing)
- js/jquery-1.7.1.min.js - our favorite JavaScript library (you can also use the google hosted)
- config_open_db.php - connect to database
- index.php - load the notification list and show/hide the box
- item.php - load the actual notification
index.php code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Google plus style notification box</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id='bar'>
<!-- show_notifications when clicked, will show or hide the notification box with fade effect -->
<div id='show_notifications'>Notifications</div>
<div style='clear:both;'></div>
<!-- wrapper is the notification box -->
<div id="wrapper">
<!-- div1 will hold the notification list -->
<div class="full" id="div1">
<div id='box_header'>
<div id='noti_text'>Notifications</div>
<!-- ajax loader was shown when a notification item was clicked -->
<div id='loader'><img src='img/ajax-loader.gif' /></div>
<div id='site_link'>
<a href='https://www.codeofaninja.com/'>+Code of a Ninja</a> ►
</div>
</div>
<div id='noti_list'>
<?php
// php code will be here
?>
</div>
<div id='box_footer'>
<!-- Change link this to your notifications page -->
<a href='https://www.codeofaninja.com/2012/03/goole-plus-style-notification-box.html?your-link-to-all-notifications/'>View all notifications</a> ►
</div>
</div>
<!-- div2 will hold the actual notification -->
<div class="full" id="div2">
<div id='box_header'>
<div id='noti_text'>◄ <a href='#'><span id='back_to_noti'>Back to Notifications</span></a></div>
<div id='site_link'>
<a href='https://www.codeofaninja.com/'>+Code of a Ninja</a> ►
</div>
</div>
<div id='actual_notification'>
<!-- Here is where the actual notification will be loaded -->
</div>
<div id='box_footer'>
<!-- Change link this to your notifications page -->
<a href='http://yourdomain.com/your-link-to-all-notifications/'>View all notifications</a> ►
</div>
</div>
</div>
</div>
<div style='margin-top:20px;'>
Click the "Notifications" button to show or hide the box.
</div>
<div style='margin-top:300px;'>
<a href='https://www.codeofaninja.com/2012/03/goole-plus-style-notification-box.html'>Tutorial Link Here</a>
</div>
<!-- javascript code will be here -->
</body>
</html>
PHP Code
Replace "PHP code will be here" line above with the following code.
//this will load the notifications in the database
include 'config_open_db.php';
//selecting record, you can use the limit clause here
//$_GET['owner_id'] is just an example user id passed via url
//you should use session variable here
$sql = "select * from notifications where owner_id = '" . $mysqli->real_escape_string( $_GET['owner_id'] ) . "'";
//query the database
$result = $mysqli->query( $sql );
//count how many records found
$num_results = mysqli_num_rows( $result );
if($num_results>0){ //check if more than 0 record found
while( $row = $result->fetch_assoc() ){
extract($row);
//display the notification item
echo "<div class='noti_item'>";
//noti_id will identify what notification item was clicked
//which will be used to load the actual notification for the next screen
echo "<div class='noti_id'>{$id}</div>";
echo $notification;
echo "</div>";
}
}else{
echo "No notification found.";
}
JavaScript Code
Replace "javascript code will be here" line above with the following code.
<!-- include the jQuery library and jQuery easing plugin -->
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript' src="js/jquery.easing.1.3.js"></script>
<!-- this script will do the animations and loading actual notificaiton -->
<script type='text/javascript'>
$(window).load(function(){
//show or hide the notification box
$('#show_notifications').click(function(){
$('#wrapper').fadeToggle();
});
//prepare/show #div2 on load
$('#div2').css('left','440px').show();
$('.noti_item').click(function(){
//show the loader while waiting for the actual notificaiton to be loaded
$('#loader').show();
var noti_id = $(this).find('.noti_id').text();
//item.php will load the actual notification based on the notification id
$("#actual_notification").load("item.php?id=" + noti_id, function(){
//after loading the actual notification,
//hide the loader when the actual notification was loaded
$('#loader').hide();
//animate the box
//hide #div1 (notification list)
$('#div1').animate(
{ left: '-440px' },{
duration: '350',
easing: 'easeOutQuint'
});
//then show #div2(actual notification)
$('#div2').animate(
{ left: 0 }, {
duration: '350',
easing: 'easeOutQuint'
});
});
});
//going back to notification list
$('#back_to_noti').click(function(){
//hide #div2 (actual notification)
$('#div2').animate(
{ left: '440px' },{
duration: '350',
easing: 'easeOutQuint'
});
//then show #div1 (notification list)
$('#div1').animate(
{ left: 0 }, {
duration: '350',
easing: 'easeOutQuint'
});
return false;
});
});
</script>
item.php code
<?php
include 'config_open_db.php';
//selecting record
$sql = "select * from notifications where id = '" . $mysqli->real_escape_string( $_GET['id'] ) . "'";
//query the database
$result = $mysqli->query( $sql );
//count how many records found
$num_results = $result->num_rows;
if($num_results >0){ //check if more than 0 record found
while( $row = $result->fetch_assoc() ){
extract($row);
echo "<div class='noti_indi'>";
echo "<div class='noti_id'>{$id}</div>";
echo $notification;
echo "</div>";
}
}else{
echo "No notification found.";
}
?>
CSS code
body{
font-family:arial;
font-size:14px;
padding:0;
margin:0;
}
#bar{
background-color:#f1f1f1;
height:72px;
border-bottom:thin solid #c0c0c0;
width:100%;
}
#show_notifications{
padding:8px;
border:1px solid #c0c0c0;
background-color:#fff;
float:right;
margin:20px 10px 5px 0;
cursor:pointer;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
font-weight:bold;
}
#loader{
float:left;
margin-left:10px;
display:none;
}
#wrapper{
width:440px;
overflow:hidden;
position:relative;
height:300px;
float:right;
margin:0 10px 0 0;
display:none;
}
.full{
position:absolute;
width:100%;
}
#div1{
left:0px;
padding-bottom:35px;
}
#div2{
display:none;
background:#FFFF00;
left:0px;
padding-bottom:35px;
}
#box_header{
height:15px;
width:418px;
border:thin solid #c0c0c0;
line-height:15px;
background-color:#fff;
padding:10px;
}
#box_footer{
height:15px;
width:418px;
position:absolute;
bottom:4px;
border:thin solid #c0c0c0;
background-color:#fff;
padding:10px;
text-align:center;
color:#4067C9;
}
#box_footer a{
color:#4067C9;
text-decoration:none;
}
#box_footer a:hover{
text-decoration:underline;
}
#noti_text{
float:left;
font-weight:bold;
color:#4067C9;
}
#noti_text a{
color:#4067C9;
text-decoration:none;
}
#noti_text a:hover{
text-decoration:underline;
}
#site_link{
float:right;
color:#4067C9;
}
#site_link a{
color:#4067C9;
text-decoration:none;
}
#site_link a:hover{
text-decoration:underline;
}
.noti_item{
width:400px;
height:56px;
line-height:56px;
border-bottom:thin solid #c0c0c0;
border-left:thin solid #c0c0c0;
padding:10px;
}
.noti_indi{
width:418px;
border-bottom:thin solid #c0c0c0;
padding:10px;
}
.clear{
clear:both;
}
#noti_list{
height:232px;
overflow-y:visible;
overflow-x:hidden;
border-right:thin solid #c0c0c0;
background-color:#F0F0F0;
cursor:pointer;
}
#actual_notification{
height:232px;
overflow-y:visible;
overflow-x:hidden;
background-color:#F0F0F0;
border-left:thin solid #c0c0c0;
border-right:thin solid #c0c0c0;
}
.noti_id{
display:none;
}
Download Source Code
You can download all the code used in this tutorial for only $9.99 $5.55!
[purchase_link id="12297" text="Download Now" style="button" color="green"]
Related Tutorials
Thank you for learning from our post about Google Plus Style Notification Box Tutorial.

Hi! I'm Mike Dalisay, the co-founder of codeofaninja.com, a site that helps you build web applications with PHP and JavaScript. Need support? Comment below or contact [email protected]
I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on LinkedIn, Twitter, Facebook, and Instagram.