jQuery Facebook Notifications Display With Sound | Lessoncup Programming Blog

Friday, 27 December 2013

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

26 comments :

  1. Great tuff, Just I dont understand Why you are doing it in this way: first you are saving the details in the database, and the fetching the same from there.

    Tell me one thing, why I should just take the stuff from UI itself, and show it to user as the messagebox and then save to databox. your stuffs are like AUDIO, IMG and divs are static anyways.

    ReplyDelete
    Replies
    1. ya we can do first take data form UI and later we send to database but end of the day we should store in database... so we can go from UI to database or database to UI

      Delete
  2. hi bro these coding can we apply in blogger

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. using this can we send notification on other users website??.. like Facebook,
    Actually i have code on that multiple users can make multiple tasks and other users can accept that task. at same time if any XYZ user accept my task i will get notification your task accepted by XYZ user..

    ReplyDelete
  5. Notice: Undefined variable: alert in E:\xampp\htdocs\ajax_alert\index.php on line 66

    Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in E:\xampp\htdocs\ajax_alert\index.php on line 72

    ReplyDelete
  6. Thank you so much, you are awesome

    ReplyDelete
  7. your demo link is not working

    ReplyDelete

  8. Well Said, you have furnished the right information that will be useful to anyone at all time. Thanks for sharing your Ideas.

    web designing course in chennai

    ReplyDelete
  9. Where is .sql file?

    ReplyDelete
  10. Excellent informative blog, Thanks for sharing.
    Wedding Photographer

    ReplyDelete
  11. It is interesting to read your blog post and I am going to share it with my friends.aybabg

    ReplyDelete
  12. The ones I just mentioned have their names from the film sound world; they are simply jargon words. "Walla", for instance, means a crowd mumbling something that sounds like random conversation, but in which the words are indistinguishable. This type of sound is often used in the background of many movie scenes.river sounds

    ReplyDelete
  13. Hi, I find reading this article a joy. It is extremely helpful and interesting and very much looking forward to reading more of your work..
    Mason Soiza

    ReplyDelete
  14. facebook is the best thing people used for their website promotion.. here you can buy facebook likes and shares easily for more promotion..

    ReplyDelete
  15. it could even be based on supporting other people who are in a comparative life organize or have comparable conditions, for example, a solitary guardians gathering or an Autism Parents arrange or a gathering explicit to entrepreneurs. cheap marketing

    ReplyDelete
  16. hello
    what is the structure of the database

    ReplyDelete
  17. This is such a great resource that you are providing and you give it away for free. Latest naija songs

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons