Home jQuery

Google Plus Style Notification Box Tutorial

Hi guys! I like the Google+ notification box and lately I wondered how to code a notification box that look like something like that.

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> &#9658;
					</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> &#9658;
				</div>
			</div>

			<!-- div2 will hold the actual notification -->
			<div class="full" id="div2">
				<div id='box_header'>
					<div id='noti_text'>&#9668; <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> &#9658;
					</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> &#9658;
				</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!

THANK YOU!

has been added to your cart!

Powered by Easy Digital Downloads

Thank you!

have been added to your cart!

Powered by Easy Digital Downloads

Related Tutorials

Thank you for learning from our post about Google Plus Style Notification Box Tutorial.

Past Month Traffic Details By Google Analytics

Hi guys! Earlier, I (accidentally) checked out our website’s Google Analytics account. I was surprised and happy about what I saw. 
The Stats
For the past month, we got almost 12 thousand unique visitors, more than 14 thousand visits and more than 22 thousand page views. For me these statistics are very encouraging. I realized that I can help other people by writing something about programming. I feel like today, I’m realizing my dream of being a teacher in the future.

Click to enlarge. This link could help us undertand these data.

The Sources

Most of the traffic we got are from search engines, so I thank Google, Bing, Yahoo Search and the like for bringing more people to our website. Second source of traffic are from referral links, so I thank those people who liked, tweeted, shared and linked our posts to Facebook, Twitter, Stackoverflow, DZone, Hacker News and other websites that are linked to our place. Third source of traffic is the direct traffic, thanks for bookmarking, subscribing and returning here guys! 
Click to enlarge.
The New Perspective
Since I’m encouraged and inspired by your positive feedbacks, I will blog more high quality contents (Hmm, maybe as often as every week?) that can be useful for different level of programmers and not just short code snippets or quick tips. I will still reply to your comments depending on my available time. Yes, I’m also aware of negative feedbacks on this site but I prefer to look at it in a positive way. For me, negative feedbacks are great opportunities to learn something. 
Regarding code snippets or quick tips or fast posts, I’d still love to blog about it. I believe they are helpful too. Little code blocks with a little story or experience. I’ll blog these things on a different website or sub domain, something like php.codeofaninja.com, jquery.codeofaninja.com or android.codeofaninja.com. I just want to put more high quality posts as much as possible on our main website codeofaninja.com 
Again, thanks guys! See you!