Google Plus Style Notification Box Tutorial

Last update: •Date posted:
COMMENTS•2 Comments/in /Posted by MIKE DALISAY

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:

LIVE DEMO

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!
[purchase_link id="12297" text="Download Now" style="button" color="green"]

Related Tutorials

We listed all our high quality full-stack web development tutorials here: Click here.

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.