Home jQuery

Google Plus Style Notification Box Tutorial

jquery-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
                    //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 = $result->num_rows;

                    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.";
                    }
                    ?>
                </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>

            <!-- 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>

<!-- include the jQuery library and jQuery easing plugin -->
<script type='text/javascript' src="js/jquery-1.7.1.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>

</body>
</html>

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!

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