Posted By

claudiowebdesign on 10/02/11

Tagged

Versions (?)

Last Edited at 10/02/11 05:20am

Statistics

Viewed 812 times

Favorited by 0 user(s)

Related snippets

Facebook like notifications with jQuery

/ Published in: jQuery

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

/*
 *  Facebook notifications with jQuery [v1.0]
 *  Distributed under the Do-wathever-the-hell-you-want-with-it License
 *
 *  Web site:   http://claudiobonifazi.com
 *  Blog:       http://claudiobonifazi.com/?p=4
 *  Email:      [email protected]
 *  Twitter:    @ClaudioBonifazi
 */
(function($){
        $.fn.setPopup = 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('div').find('a:first').live('click',function(e){
                        $(e.target).parent('div').remove()
                        return false
                })
                return el
        }
        $.fn.callPopup = function callPopup(msg){
                var el = $(this)
                msg = (typeof msg != 'object') ? new Array(msg) : msg;
                $.each(msg,function(i,m){
                        el.prepend('<div><a href="#" title="close">X</a>'+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)
/*
*  EXAMPLE:
*  jQuery(document).ready(function($){
*               popup = $('#tips')
*               popup.setPopup()
*               $('a').click(function(){
*                       popup.callPopup('You\'ve got a new <a href="#" title="notifications  panel">notification</a>.')
*               return false
*       })
* })
*/