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:

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> ►
                    </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"]

Google Plus Style Notification Box Tutorial

index.php code

PHP Code

JavaScript Code

item.php code

CSS code

Download Source Code

Related Tutorials

PHP & MySQL Tutorial Series

Trending

JavaScript and REST API Tutorial series

Tools

Social media API tutorial series

index.php code

PHP Code

JavaScript Code

item.php code

CSS code

Download Source Code

Related Tutorials

Share our tutorial

PHP & MySQL Tutorial Series

Trending

JavaScript and REST API Tutorial series

Tools

Social media API tutorial series