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

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.

By Mike Dalisay

I'm Mike Dalisay, a pro web developer since 2010. I love web development. Improving our tutorials and source codes makes me happy. Do you want to suggest an edit to our tutorial? Got something to ask about our source codes? You may use our comments section below or email our team at [email protected]

2 comments

  1. Very technical and important points and codes you have share and there is no doubt that google plus is one of the greatest source of social media to get good figure of traffic as well as promote any brand or business on web.

Leave a comment

Your email address will not be published.

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

Back to top