Google Plus Style Notification Box Tutorial

Last update: March 16, 2012
Date posted: March 16, 2012
Created by ninjazhai
banner-3

[adinserter block=”34″]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”]

Related Tutorials

[adinserter block=”1″]

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