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


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.