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!

Related Tutorials

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

Before you write a comment, please read this guide and our code of conduct.
2 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.