当用户在不同的选项卡上或离开时，突出显示新的聊天ping <div>

Question

I recently created a custom ping box (chat). I have a auto refresh every 3 seconds to get the latest content.

If the user is busy anywhere other than the chat tab, I would like the latest chat pings to be highlighted in some different color.

This would allow the user to easily identify the latest pings that came in when they weren't on the tab. The color then fades automatically after 10 sec of coming into the chat tab.

Code to refresh new content:

    function loadNewPosts(){
        var id = $(".altbgcolor:first").attr("id");

        $.post('/updateping.php', { updateid: id }, function(data){
                                $(".newslist").prepend(data);
                                //alert(data);
                            }, 'html');
        }

     window.setInterval(loadNewPosts, 1000*3)   

Is it possible to code this using PHP and/or jQuery?

Answer 1

You need to use the blur event of the window to change the class of the divs created out of focus.

Like this:

$(window).blur(function() {
    //Toggle ALL newly created divs to have a unique CSS class
    //For this example lets call it "outOfFocus"
});

Then when the window comes back into focus use jqueryUI's highlight effect

 $(window).focus(function() {
     $(".outOfFocus").effect("highlight", {}, 10000);
     //Toggle all newly created divs to have the normal "inFocus" CSS class  

});