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).

9 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