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.  * Twitter: @ClaudioBonifazi
  8.  */
  9. (function($){
  10. $.fn.setPopup = function( time ){
  11. var el = $(this)
  12. time = (time===undefined) ? 5000 : time;
  13. el .data('hover',false)
  14. .data('time',time)
  15. .find('div')
  16. .live('mouseover',function(){
  17. el.data('hover',true)
  18. $(this).show()
  19. clearTimeout( $(this).data('timeout') )
  20. }).live('mouseout', function(){
  21. el.data('hover',false)
  22. var a = setTimeout(function(){
  23. $(this).animate({'opacity':'hide','height':'hide'},'fast',
  24. function(){
  25. el.find('div:hidden').remove()
  26. })
  27. },el.data('time'))
  28. $(this).data('timeout',a)
  29. })
  30. el.find('div').find('a:first').live('click',function(e){
  31. $(e.target).parent('div').remove()
  32. return false
  33. })
  34. return el
  35. }
  36. $.fn.callPopup = function callPopup(msg){
  37. var el = $(this)
  38. msg = (typeof msg != 'object') ? new Array(msg) : msg;
  39. $.each(msg,function(i,m){
  40. el.prepend('<div><a href="#" title="close">X</a>'+m+'</div>')
  41. .find('div:first').css({'position':'relative','display':'none'})
  42. .animate({'opacity':'show','height':'show'},'slow')
  43. var a = setTimeout(function(){
  44. if(!el.data('hover'))
  45. el.find('div:first').animate({'opacity':'hide','height':'hide'},'fast',
  46. function(){
  47. el.find('div:hidden').remove()
  48. })
  49. },el.data('time'))
  50. $(this).data('timeout',a)
  51. })
  52. return el
  53. }
  54. })(jQuery)
  55. /*
  56. * EXAMPLE:
  57. * jQuery(document).ready(function($){
  58. * popup = $('#tips')
  59. * popup.setPopup()
  60. * $('a').click(function(){
  61. * popup.callPopup('You\'ve got a new <a href="#" title="notifications panel">notification</a>.')
  62. * return false
  63. * })
  64. * })
  65. */

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.