top_menu

Sunday, 20 May 2012

How to create a facebook beeper using jquery and css

.

Flashing something with a little animation attracts users attention. Facebook used this to the optimum by displaying a notification whenever there is a update for user. The facebook developers call it a beeper.

We can achieve this  using jquery and some css coding.





The Basic Setup


1. The HTML

<div align="center" class="main">
  <a href="#" class="notify" id="notify">Display Notification</a>
</div>
<div id="beeperContainer"></div>

2. The Javascript which triggers the beeper

jQuery(document).ready(function($){
Beeper = $('#tips')
Beeper.setBeeper()
$('.notify').click(function(){
Beeper.callBeeper('<div id="NotificationBox" class="UINotification"><div class="UINotification_Full"><div class="Notis"><div class="UINoti UINoti_Top UINoti_Bottom UINoti_Selected" style="opacity: 1; "><a class="UINoti_NonIntentional" href="#"><div class="UINoti_Icon"><i class="Notification_icon image2"></i></div><span class="Notification_x">&nbsp;</span><div class="UINoti_Title"><span class="NotiContent">Ipsita Sahoo</span> added a new photo to the album <span class="NotiContent">Chilling Out</span>.</div></a></div></div></div></div>');
return false;
});
});
(function($){
$.fn.setBeeper = function( time ){
var el = $(this)
time = (time===undefined) ? 5000 : time;
el  .data('hover',false)
.data('time',time)
.find('div')
.live('mouseover',function(){
el.data('hover',true)
$(this).show()
clearTimeout( $(this).data('timeout') )
}).live('mouseout', function(){
el.data('hover',false)
var a = setTimeout(function(){
$(this).animate({'opacity':'hide','height':'hide'},'fast',
        function(){
        el.find('div:hidden').remove()
        })
},el.data('time'))
$(this).data('timeout',a)
})
el.find('span.Notification_x').live('click',function(e){
$(e.target).parent().parent().parent().parent().remove()
return false
})
return el
}
$.fn.callBeeper = function callBeeper(msg){
var el = $(this)
msg = (typeof msg != 'object') ? new Array(msg) : msg;
$.each(msg,function(i,m){

el.prepend('<div>'+m+'</div>')
.find('div:first').css({'position':'relative','display':'none'})
.animate({'opacity':'show','height':'show'},'slow')
var a = setTimeout(function(){
if(!el.data('hover'))
el.find('div:first').animate({'opacity':'hide','height':'hide'},'fast',
        function(){
        el.find('div:hidden').remove()
        })
},el.data('time'))
$(this).data('timeout',a)
})
return el
}       
})(jQuery);

3. The CSS for adding the exact look like Facebook

@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;
}
.top{
/* style for the div with notify button*/
font-size:15px;
background-color:#f2f2f2;
margin:3px auto;
height:80%;
padding:15px;
font-weight:normal;
/*border-radius*/
-webkit-border-radius:15px;
   -moz-border-radius:15px;
        border-radius:15px;

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;
}
.main{
/* style for the div with notify 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;
}
.notify{
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;
}
.notify: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);
}
.image2{
/* icon within the Notification */
background-image:url(images/like.png);
background-repeat:no-repeat;
display:inline-block;
height:16px;
width:16px;
}
.UINotification{
width:230px;
left:15px;
bottom:30px;
z-index:99;
}
.UINoti{
background:#E1E6EE;
border-bottom:1px solid #BFCADE;
overflow:hidden;
padding:3px 0;
clear:right;
}
.UINotification .UINotification_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;
}
.UINotification .UINotification_Full:hover{
/* change background color on mouseover */
background-color:#CAD1DE;
}
.UINotification .UINoti_Bottom{
border-bottom:none;
}
.UINotification .UINoti_Selected{
background:#CAD1DE;
}
.UINotification .UINoti_Top{
padding-top:0;
}
.UINotification .UINoti_Bottom{
padding-bottom:0;
}

a, a:hover{
cursor:pointer;
color:#3B5998;
text-decoration:none;
}
.UINoti .UINoti_NonIntentional .UINoti_Icon{
float:left;
width:20px;
height:20px;
text-align:center;
margin:5px 5px;
}
.UINoti_Selected .UINoti_Icon{
margin-right:2px;
}

.UINotification .UINoti .UINoti_NonIntentional .Notification_x{
/* close button */
float:right;
height:16px;
width:16px;
margin-top:6px;
background:url(images/close.gif) no-repeat;
/*visibility:hidden;*/
}
.UINoti .Notification_x:hover{
/* close button on mouseover */
background:url(images/closehover.gif) no-repeat !important;
}
.UINoti_Selected .Notification_x{
display:block !important;
visibility:visible !important;
margin-left:4px;
}
.UINoti .UINoti_NonIntentional .UINoti_Title{
margin:0 20px 0 30px;
}
.UINoti .UINoti_Title{
padding:5px 0;
}

Features

  • In Facebook Whenever there is a update entry in the updates table, it triggers the alert notification plugin using jQuery. In our case we will trigger it manually.
  • Automatically hides the facebook beeper after five seconds.
  • Onmouseover, the script prevents the hiding of facebook beeper.
  • Again after 5 seconds of mouseout, the facebook beeper hides automatically.
  • There is a close button at the top-right corner to close a particular facebook beeper.
  • It almost simulates the facebook beeper (Update notification system).

11 comments:

  1. [...] 2. How to create a facebook style activity notification plugin using jQuery and PHP – facebook be... [...]

    ReplyDelete
  2. [...] 2. How to create a facebook style activity notification plugin using jQuery and PHP – facebook be... [...]

    ReplyDelete
  3. how do i make it my read my updates table automatically or send it a request to show

    ReplyDelete
    Replies
    1. Every 10 seconds a jSON object may be called using javascript / jQuery which will check for any changes in database table

      Delete
    2. http://aitamelearning.blogspot.in/2012/11/taking-snapshots-using-jquery.html

      take snapshots using web cam

      Delete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Hi, i want to take data from sql.. and show it in the same way. but it doesnt show me the notifications? what is the problem. where i need to put the php script?

    ReplyDelete
  6. hi gr8 fantastic i need complete code for display top 3 symbols- friend request, messages, notifications.... can you give me at realworker99@gmail.com or realworker99atgmaildotcom....

    thanks....

    ReplyDelete
  7. The web site is lovingly serviced and saved as much as date. So it should be, thanks for sharing this with us.
    buy facebook photo likes australia

    ReplyDelete
  8. The information you have posted is very useful. The sites you have referred was good. Thanks for sharing..
    http://buyfblikescheap.com/buy-cheap-facebook-likes/

    ReplyDelete