jQuery Facebook Notifications Display With Sound

Hi, today i am going to tell you about how to display the notification box appear with sound effect like Facebook, we have seen in Facebook at right side we got some posting notifications appear if some one posts, i have did same using jquery, ajax and php with same notification sound, it is very simple logic just need to use some sort of time and it is just few lines of code, lets see how to do this..

HTML

here take the text area box to enter some text, and take one button also, later take one DIV and give it ID name like #alertbox to prepend multiple notifications VIA Ajax

<div class="lessoncup">

<textarea id="box" class="box"></textarea>

<input value="POST" id="btn" class="btn" type="button" />

<div id="loader"></div>

</div>

<div id="alertbox"></div>

JAVASCRIPT

write the click function to #btn  button as selector, store the text box value in one variable like var post = $('#box').val(); now using ajax request send the post variable to alerts.php file inside the ajax success function prepend the returned message from alerts.php file to #alertbox as a selector using prepend() method, later use the hide the #alerts notification after some time delay using delay() method like this $('#alerts').delay(5000).fadeOut('slow');

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 
 $('#btn').click(function(){
  
  var post = $('#box').val();
  
  if(post==""){
   
   alert('enter please');
   
   
  }else{
  
  $('#loader').fadeIn(400).html('<img src="loader.gif" align="absmiddle">&nbsp;<span class="loading">sending</span>');
  
  var datasend = "alert="+post;
  
  $.ajax({
   
   type:'POST',
   url:'alerts.php',
   data:datasend,
   cache:false,
   success:function(msg){
    
    $('#box').val('');
    $('#loader').hide();
    $('#alertbox').fadeIn('slow').prepend(msg);
    
    $('#alerts').delay(5000).fadeOut('slow');
    
   }
   
  });
  
  }
  
 })
     
});


</script>

alerts.php

in this file just write the query to insert the records and write one more query to fetch the latest record later take a DIV and give a ID name like #alerts inside the div take a AUDIO tag with sound file and put it into autoplay true

<?php
include('db.php');
extract($_REQUEST);

$h_name=htmlentities($alert);
$in_name = mysql_real_escape_string($h_name);

mysql_query("insert into alerts(message) values('$in_name')");

$alerts = mysql_query("select * from alerts order by alertId desc");
$full=mysql_fetch_array($alerts);
?>
<div id="alerts">

<audio id="audioplayer" autoplay=true>
    <source src="sound/ping.mp3" type="audio/mpeg">
   <source src="sound/ping.ogg" type="audio/ogg">
  Your browser does not support the audio element. </audio>
<li>

<img src="icons/i.jpg" align="top" style="float:left; margin-right:2px;" />

<div><?php echo substr($full['message'],0,100)?></div>
</li>
</div>

Live Demo   Download Script