Advanced Search

Facebook like notifications with jQuery

/ Published in: jQuery
Save to your folder(s)
I tried to create a little jQuery method to notify events to the user just as in facebook.

EXAMPLE: http://claudiobonifazi.com/snippets/fb_like_notifications/

1- Link this little plugin to your page (or paste it into your files as you wish)

2- add to your page an empty element (a div or similar) and on page load call $('thatdiv').setPopup()

3- Set that element to position:fixed and position it where you like (in this page it has left:50px and bottom:50px)

4- Whenever an event requires the appearing of one of those little popups, do $('thatdiv').callPopup('html content to place inside it')

5- For styling read the demo page's source as a guideline

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*
  2.  *  Facebook notifications with jQuery [v1.0]
  3.  *  Distributed under the Do-wathever-the-hell-you-want-with-it License
  4.  *
  5.  *  Web site:   http://claudiobonifazi.com
  6.  *  Blog:       http://claudiobonifazi.com/?p=4
  7.  *  Email:      claudio.bonifazi@gmail.com
  8.  *  Twitter:    @ClaudioBonifazi
  9.  */
  10. (function($){
  11.         $.fn.setPopup = function( time ){
  12.                 var el = $(this)
  13.                 time = (time===undefined) ? 5000 : time;
  14.                 el  .data('hover',false)
  15.                         .data('time',time)
  16.                 .find('div')
  17.                         .live('mouseover',function(){
  18.                                 el.data('hover',true)
  19.                                 $(this).show()
  20.                                 clearTimeout( $(this).data('timeout') )
  21.                         }).live('mouseout', function(){
  22.                                 el.data('hover',false)
  23.                                 var a = setTimeout(function(){
  24.                                         $(this).animate({'opacity':'hide','height':'hide'},'fast',
  25.                                                 function(){
  26.                                                         el.find('div:hidden').remove()
  27.                                                 })
  28.                                 },el.data('time'))
  29.                                 $(this).data('timeout',a)
  30.                         })
  31.                 el.find('div').find('a:first').live('click',function(e){
  32.                         $(e.target).parent('div').remove()
  33.                         return false
  34.                 })
  35.                 return el
  36.         }
  37.         $.fn.callPopup = function callPopup(msg){
  38.                 var el = $(this)
  39.                 msg = (typeof msg != 'object') ? new Array(msg) : msg;
  40.                 $.each(msg,function(i,m){
  41.                         el.prepend('<div><a href="#" title="close">X</a>'+m+'</div>')
  42.                         .find('div:first').css({'position':'relative','display':'none'})
  43.                         .animate({'opacity':'show','height':'show'},'slow')
  44.                         var a = setTimeout(function(){
  45.                                 if(!el.data('hover'))
  46.                                         el.find('div:first').animate({'opacity':'hide','height':'hide'},'fast',
  47.                                                 function(){
  48.                                                         el.find('div:hidden').remove()
  49.                                                 })
  50.                         },el.data('time'))
  51.                         $(this).data('timeout',a)
  52.                 })
  53.                 return el
  54.         }       
  55. })(jQuery)
  56. /*
  57. *  EXAMPLE:
  58. *  jQuery(document).ready(function($){
  59. *               popup = $('#tips')
  60. *               popup.setPopup()
  61. *               $('a').click(function(){
  62. *                       popup.callPopup('You\'ve got a new <a href="#" title="notifications  panel">notification</a>.')
  63. *               return false
  64. *       })
  65. * })
  66. */

URL: http://claudiobonifazi.com/snippets/fb_like_notifications

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.