Whenever you are online on Facebook and if there are any notifications then you would have noticed the small blue box on the left bottom alerting you the notification live, this is what Facebook calls as the beeper.
In this tutorial I am going to teach you to create such a beeper found on Facebook.
If you are still wondering on what beeper I am talking about, then look at the below image to know what we are going to create at the end of this tutorial
Bepper Found In Facebook
Notification Box In Facebook
We are going to use CSS and jQuery to create the notification box.
Check out the live demo or download the source code if you are in a hurry ( it is heavily commented) or else check how the code works below.
|
DOWNLOAD |
LIVE DEMO |
Now Let Us Look at the Source Code:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Live Demo Of Creating Facebook like Beeper Tutorial | http://blog.geotitles.com</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery.facebookBeeper.js" type="text/javascript"></script>
</head>
<body>
<div align="center" class="main">
<p>This is the live demo of creating <strong><a href="http://blog.geotitles.com/2011/12/facebook-like-beeper-for-alerting-notifications-live">Facebook like Beeper Box</a></strong><a href="http://blog.geotitles.com/2011/12/facebook-like-beeper-for-alerting-notifications-live"> for Alerting Notification</a> on <strong><a href="http://blog.geotitles.com">Geo Web Station</a></strong><br /><br />
Click <strong><a href="http://blog.geotitles.com/2011/12/facebook-like-beeper-for-alerting-notifications-live">Here</a></strong> For The <strong><a href="http://blog.geotitles.com/2011/12/facebook-like-beeper-for-alerting-notifications-live">Tutorial Link</a></strong> To Have A Look At The <a href="http://blog.geotitles.com/2011/12/facebook-like-beeper-for-alerting-notifications-live">Tutorial </a>And Download The Source Code </p>
<p>
Click Below To Display Beeper
</p>
<a href="#" class="control" id="control">DISPLAY BEEPER</a>
</div>
<div id="BeeperBox" class="UIBeeper">
<div class="UIBeeper_Full">
<div class="Beeps">
<div class="UIBeep UIBeep_Top UIBeep_Bottom UIBeep_Selected" style="opacity: 1; ">
<!-- Below Is The Link To Which Bepper Will Point To (replace # with the required link) -->
<a class="UIBeep_NonIntentional" href="#">
<div class="UIBeep_Icon">
<i class="beeper_icon image2"></i>
</div>
<span class="beeper_x"> </span>
<div class="UIBeep_Title">
<span class="blueName">Praveen Gowda</span> likes your comment on <span class="blueName">Hitherto Web Labs</span>.
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
@charset "utf-8";
body{
/* body*/
font-size: 11px;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
color: #333;
line-height: 1.28;
text-align: left;
direction: ltr;
}
.main{
/* style for the div with control button*/
font-size:15px;
width:670px;
margin:30px auto;
height:80%;
padding:15px;
font-weight:normal;
/*border-radius*/
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
background:white;
border:1px solid #E5E5E5;
/*box-shadow*/
-webkit-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
-moz-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
}
.control{
color:#666;
width:150px;
font:bold 75% arial,sans-serif;
text-decoration:none;
padding:10px 10px 10px 10px;
display:inline-block;
text-align:center;
/*Background*/
background:#f3f3f3;
background:-webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
/*linear-gradient*/
background:-webkit-gradient(linear,left top,left bottom,from(from(#F5F5F5)),to(to(#F1F1F1)));
/*@@prefixmycss->No equivalent*/
background:-webkit-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background: -o-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background: linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
border:solid 1px #dcdcdc;
/*border-radius*/
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
margin:25px auto;
}
.control:hover{
color:#333;
border-color:#999;
/*box-shadow*/
-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.2) -webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 2px 0 rgba(0,0,0,0.2) -moz-box-shadow:0 2px 5px rgba(0,0,0,0.2);
box-shadow: 0 2px 0 rgba(0,0,0,0.2) box-shadow:0 2px 5px rgba(0,0,0,0.2);
}
.UIBeeper{
width:230px;
left:15px;
bottom:30px;
position:fixed;
z-index:99;
display:none;
}
.UIBeeper .UIBeeper_Full{
background-color:#E1E6EE;
border:1px solid #99A8C7;
/*border-radius*/
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:0;
padding:3px;
}
.UIBeeper .UIBeeper_Full:hover{
/* change background color on mouseover */
background-color:#CAD1DE;
}
.UIBeeper .UIBeep_Bottom{
border-bottom:none;
}
.UIBeeper .UIBeep_Selected{
background:#CAD1DE;
}
.UIBeeper .UIBeep_Top{
padding-top:0;
}
.UIBeeper .UIBeep_Bottom{
padding-bottom:0;
}
.UIBeep{
background:#E1E6EE;
border-bottom:1px solid #BFCADE;
overflow:hidden;
padding:3px 0;
clear:right;
}
a, a:hover{
cursor:pointer;
color:#3B5998;
text-decoration:none;
}
.UIBeep .UIBeep_NonIntentional .UIBeep_Icon{
float:left;
width:20px;
height:20px;
text-align:center;
margin:5px 5px;
}
.UIBeep_Selected .UIBeep_Icon{
margin-right:2px;
}
.image2{
/* icon within the beeper */
background-image:url(images/like.png);
background-repeat:no-repeat;
display:inline-block;
height:16px;
width:16px;
}
.UIBeeper .UIBeep .UIBeep_NonIntentional .beeper_x{
/* close button */
float:right;
height:16px;
width:16px;
margin-top:6px;
background:url(images/close.gif) no-repeat;
visibility:hidden;
}
.UIBeep .beeper_x:hover{
/* close button on mouseover */
background:url(images/closehover.gif) no-repeat !important;
}
.UIBeep_Selected .beeper_x{
display:block !important;
visibility:visible !important;
margin-left:4px;
}
.UIBeep .UIBeep_NonIntentional .UIBeep_Title{
margin:0 20px 0 30px;
}
.UIBeep .UIBeep_Title{
padding:5px 0;
}
JavaScript
We use jQuery to:
- display the beeper on clicking on the button
- hide the beeper after five seconds
- prevent the hiding of beeper on mouseover
- hide the beeper after five seconds of mouseout
$(document).ready(function () {
// set the time for the beeper to be displayed as 5000 milli seconds (5 seconds)
var timerId, delay = 5000;
var a = $("#BeeperBox"),
b = $("a.control");;
//function to destroy the timeout
function stopHide() {
clearTimeout(timerId);
}
//function to display the beeper and hide it after 5 seconds
function showTip() {
a.show();
timerId = setTimeout(function () {
a.hide();
}, delay);
}
//function to hide the beeper after five seconds
function startHide() {
timerId = setTimeout(function () {
a.hide();
}, delay);
}
//display the beeper on cliking the "show beeper" button
b.click(showTip);
//Clear timeout to hide beeper on mouseover
//start timeout to hide beeper on mouseout
a.mouseenter(stopHide).mouseleave(startHide);
$('.beeper_x').click(function () {
//hide the beeper when the close button on the beeper is clicked
$("#BeeperBox").hide();
});
});
I believe that the Facebook Beeper is one of the most effective way to grab the attention of visitors to your website, and everyone is free to use our script any of your projects. Do let us know in what way this tutorial has helped you by commenting below:
Next Week we will be back with another interesting tutorial in the meanwhile stay updated with all our tutorials by :
Subscribing to RSS feeds
Subscribing by email
Subscribing by SMS(currently limited to Indian Users)
Want to request a new tutorial, then please Contact me right-away or leave a comment below.
I promise to respond to everyone who asks for support or new tutorials.
Facebook like Beeper for Alerting Notifications Live,
Related posts:
#1 by kyrul on December 19, 2011 - 5:27 pm
such a great tuto . thank you !
[Translate]
#2 by Praveen Gowda I V on December 19, 2011 - 9:11 pm
Welcome
[Translate]
#3 by sara on February 14, 2013 - 3:59 am
test
[Translate]
#4 by Praveen Gowda I V on February 14, 2013 - 7:34 am
Hurray! the comment system works perfectly!
[Translate]
#5 by Adam on December 28, 2011 - 4:46 am
How would i have this auto display when someone is required to have a notification.
On my website i want this to display when someone receives a warning or private message.
Any idea on how i would go about this?
[Translate]
#6 by Praveen Gowda I V on December 28, 2011 - 8:37 am
Yes it is possible and it is the whole idea why we created this tutorial.
In the demo the notification box gets triggered when the “Display Beeper Button” is clicked, instead you can call the notification box to be triggered in any other situation.
//display the beeper on cliking the "show beeper" button b.click(showTip);For Example: You can poll the server continously for any notifications and when the notification has arrived you can call the bepper by using
showTip()function.You can also dynamically change the content to be shown in the beeper using jQuery.
This is how Facebook display their notifications.
We are always happy to help you, just let me know what actually you want to use this notification box and we will assist you with that.
So please let me know what really you are trying to do and we will help you with the code.
[Translate]
#7 by Adam on January 29, 2012 - 12:33 am
What i want it to actully do is when a user sends a private message to another user, when the user that is receiving the private message comes online it will be displayed showing that they have a message waiting for them.
[Translate]
#8 by Praveen Gowda I V on January 29, 2012 - 11:09 am
It is definitely possible through long polling.
If you have already tried and have some sample code on receiving the notification from the server, then we can help you on implementing it with the beeper.
[Translate]
#9 by Adam on January 29, 2012 - 6:24 pm
Thank you, i did however figure it out!
[Translate]
#10 by Praveen Gowda I V on January 29, 2012 - 7:21 pm
Great!
So subscribe to our feeds to stay updated with all our tutorials
[Translate]
#11 by Hisham Bakr on January 28, 2012 - 4:23 pm
wow,thanks for sharing,let me use it in my website
[Translate]
#12 by Praveen Gowda I V on January 28, 2012 - 7:17 pm
You are welcome to use it on any of the projects of yours.
Do subscribe to our Email feeds to get updates on new tutorials.
We have more Facebook and Google Plus tutorials upcoming.
[Translate]
#13 by Fabio on February 23, 2012 - 10:15 pm
Hi, this is awesome! I have one questions tho.. on facebook, when we receive multiple notifications, they’ll be put one on top of the other and each one will fade out in its appropriate time… would it be possible for you to show us how to do that to? Thanks a lot!
[Translate]
#14 by Praveen Gowda I V on February 24, 2012 - 4:56 pm
No problem at all.
Just a simple css edit will do.
I will prepare the code and let you know by email or through the comment within two days.
Subscribe to our email feeds so you don’t miss our future tutorials
[Translate]
#15 by Fabio on February 26, 2012 - 5:42 am
Thanks
Any luck with that?
[Translate]
#16 by Praveen Gowda I V on February 26, 2012 - 1:11 pm
I have finished the CSS
I should work with the javascript to display the beepers
I will get back to you in a few hours.
[Translate]
#17 by Praveen Gowda I V on February 26, 2012 - 2:35 pm
Hello Fabio,
Here is the finished script which displays two beepers instead of one.
Hope you find this useful.
Below is the link to the jsFiddle
http://jsfiddle.net/praveenvvstgy/Re842/5/embedded/result/
[Translate]
#18 by Fabio on February 26, 2012 - 11:35 pm
This is great stuff! I’ll keep following your tutorials, keep it up
Thanks a lot!
[Translate]
#19 by Praveen Gowda I V on February 26, 2012 - 11:41 pm
Thanks Fabio,
Words like these really help us to move forward.
If you find any use of our tutorials in commercial projects do consider giving us a small donation in order for us to sustain this blog.
Hope you made use of our tutorials, keep coming back for more.
Cheers,
Praveen Gowda I V
[Translate]
#20 by Sungeo on March 26, 2012 - 1:58 am
beautiful works. can you please make tutorial on the other notification that show red with numbers on the top bar of facebook?
[Translate]
#21 by Praveen Gowda I V on March 27, 2012 - 11:04 am
Sure, we will add it to our list of future tutorials.
[Translate]
#22 by Blake on March 31, 2012 - 10:24 am
I love this, really great job. I do however have one question though. In an earlier reply, you said “you can call the beeper by using showTip() function”. I’m not great with jquery, and I looked around and tried it out, buy was not successful. Can you look at my code below and tell me what is wrong?
$(document).ready(function(){
b.click(function(){
showTip();
});
Thanks in advance.
[Translate]
#23 by Praveen Gowda I V on April 12, 2012 - 7:59 pm
Here you go.
$(document).ready(function(){ b.on('click', function(){ showTip(); }); });[Translate]
#24 by Danison on April 12, 2012 - 7:32 pm
Cool post!
[Translate]
#25 by Dev on July 10, 2012 - 12:35 pm
Great Post
as you said “you can call the beeper by using showTip() function”
i’m try to make it in page load ,i’m sorry i have little experience in Jquery
this my code
$(document).ready(function(){
showTip();
});
thanks for your Care
[Translate]
#26 by Abiodun Sulaiman on August 11, 2012 - 5:29 am
Thanks for all your excellent tutorials. I need help with facebook beeper:
I am developing a Content Management System, in which a client meets The Service Personnel who will bill the client and enter the information in a mysql database. The client then go to pay to the cashier who gets the information who enters the payment into the mysql database. Then the service personnel receives the notification and offers the required service.
I have been able to handle the php/mysql for submitting and retrieving data, but I need your help to display notification on inserting or updating a row in a table in the database.
Please, I should add that I’m not particularly good in AJAX/Jquery/JavaScript.
I will appreciate your help in this as you have been a great resource for me.
Thanks.
[Translate]
#27 by Praveen Gowda I V on August 11, 2012 - 6:48 am
Contact me through our contact form and may be we can discuss further on this, I don’t think comment section is not an effective place to discuss such things.
I will help as much as I can on this.
[Translate]
#28 by Darren on August 14, 2012 - 11:36 am
Hello,
Where do I place this code to display automatically?
$(document).ready(function(){
b.on(‘click’, function(){
showTip();
});
});
Thanks and great job!
[Translate]
#29 by Praveen Gowda I V on August 14, 2012 - 12:50 pm
By displaying automatically, do you mean displaying when page loads ?
Then you can just put in anywhere within the page between the
<script>tag or in a separatejsfile, both will work fine[Translate]
#30 by Binish on October 11, 2012 - 4:19 am
Hi I want a notification like one user sends a message and the reciever need to notify. how to trigger that in the server?
[Translate]
#31 by Sagar Patel on October 11, 2012 - 6:24 am
Good Script….
i m trying to use this script in asp.net project….
you have any kind of code for online chatiing with client .?
thanks for sharing your script….
[Translate]
#32 by Mark Eugene Gamas Manuel on January 17, 2013 - 8:51 am
i am a noob how can i add it to my website
[Translate]
#33 by iyongbudiarso on February 4, 2013 - 6:23 am
Cool like like a facebook lol
[Translate]
#34 by Prabha on February 5, 2013 - 5:49 am
Hi I want to display multiple notification one on top of the other and each one will fade out in its appropriate time..and I want to make it a user control so I can use it through the application. Your positive response is required as early as possible. Thanks in advance!!
[Translate]
#35 by Praveen Gowda I V on February 5, 2013 - 6:52 am
The tutorial is just a guideline to achieve exactly that.
If you browse through the comments you can find a link to the demo with two notification boxes on top of each other.
What you need is definitely possible with this source code but you will need to do a quite a bit of modifications.
[Translate]
#36 by Prabha on February 6, 2013 - 12:02 am
I dont want notification on button clcik I want auto notifications..like we are doing asynchronous file downloading as downloading is complete it should show notification “Download complete”…Like this I want notifications on such type of events.
Thanks!!
[Translate]
#37 by aldo201 on February 9, 2013 - 11:35 pm
Great work. Please can you help me to make this to appear only once in a week. The same visitor might be disturbed to show it everytime…
[Translate]
#38 by Praveen Gowda I V on February 10, 2013 - 9:44 am
Use cookies to make sure that you display only once a week, contact me through email using the contact page if you need more help http://blog.geotitles.com/contact-me/
[Translate]
#39 by LANCE on February 26, 2013 - 3:52 am
Hi.. I’m so happy that i read this article… Thank you for this… I just have a little problem in my part… I need an instant notification like this once when there’s a change in my database data. For example, I received a message. I need a notification like this that shows that “I received one message” but without clicking any button or refreshing the page. I just can’t imagine how to do that. Hope you can help me… Thank you very much in advance.
*P.S. can I get your email? thanks…
[Translate]