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 can download this code or see the 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='http://www.codeofaninja.com/'>+Code of a Ninja</a> ► </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> ► </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='http://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> <!-- 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; }
The Code of a Ninja Resources
For FREE programming tutorials, click the red button below and subscribe! :)
website