http://qs321.pair.com?node_id=750520

This code is still very new, but it seems to work acceptably for me in Firefox and Opera. Basically, it uses Ajax to update the contents of your chatterbox every 10 seconds. Also, postbacks using the "talk" button are sent through Ajax. It's similar in effect to the sidebar or one of the fullpage clients, except it works in-place and looks just like the vanilla CB. However, there are some caveats. Suggestions/demands for improvement are welcome: Change Log: 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.
+min.js"></script>
<script>

    // Configuration Options --------------------------
    var refreshDelay = 10;   // seconds between refreshes
    var inactiveDelay = 600; // inactive seconds before stop
    var fixedHeight = false; // force fixed height CB
    var CBHeight = '300px';  // fixed height to use
    //--------------------------------------------------

    var dateObj = new Date();
    var CBTimeout;
    var lastPresence;
    var CBUpdating = true;

    $(document).ready(function() {
        $("body").bind("focus resize scroll click mouseover keypress",
+function(){
            var nowObj = new Date();
            lastPresence = nowObj.getTime();
            $('#cb_timeout_warning').remove();
            if (!CBUpdating) {
               CBUpdating = true;
               updatecb();
            }
        });
        CBTimeout = setTimeout("updatecb()", 1000 * refreshDelay);
        lastPresence = dateObj.getTime();
        talkbind();
        CBwrap();
    });
    
    function send_talk(message,dont_clear) {
            $('#cb_timeout_warning').remove();
            dateObj = new Date();
            lastPresence = dateObj.getTime();
            clearTimeout(CBTimeout);
            var dataObj = {
                node_id: 431883,
                op: 'message',
                message: message,
            };
            getCheckboxes(dataObj);
            $.ajax({
            url: 'http://'+window.location.hostname+'/?',
                type: 'post',
                data: dataObj,
                success: function(data) {
                    if(!dont_clear)
                        $('`[name=message`]').val('');
                    updatecb();
                },
                error: function(x,t,e) {
                    //opera.postError(t+e);
                }
            });
            return false;    
    }

    function talkbind() {
        $('input`[name=message_send`]').click(function() { 
            return send_talk($('`[name=message`]').val(),false);
        });
    }
    
    function CBwrap() {
        if(fixedHeight)
            $('#Chatterbox form').children(':not(input:not(`[type=chec
+kbox`]))')
                .wrapAll('<div style="height:'+CBHeight+';overflow:aut
+o;"></div>');
    }

    function getCheckboxes(dataObj) {
            $('#Chatterbox input:checked').each(function() {
                if ($(this).attr('name').match(/^deletemsg_/))
                   dataObj`[$(this).attr('name')`] = 'yup';
            });
    }

    function updatecb() {
        $.ajax({
            url: 'http://'+window.location.hostname+'/?',
            data: {
                node: 'chatterbox sidebar upper',
            },
            success: function(data) {
                var dataObj = {};
                getCheckboxes(dataObj);
                var extravisible = $('.cbextra:visible').get(0);
                $('#tempdiv').html(data);
                $('#Chatterbox form').children(':not(input:not(`[type=
+checkbox`]))').remove();
                $('#Chatterbox form').prepend($('#Free_Nodelet form').
+contents());
                CBwrap();
                for (name in dataObj) {
                    $('input`[name=' + name + '`]').attr('checked', 'c
+hecked');
                }
                dateObj = new Date();
                if((dateObj.getTime() - lastPresence) > ((inactiveDela
+y - 60)*1000)) {
                    if(!$('#cb_timeout_warning').get(0)) {
                        $('#Chatterbox .nodelet_body').append(
                          '<div id="cb_timeout_warning" style="color:r
+ed">Updates will stop due to inactivity in < 1 minute.</div>'
                        );
                    }
                } 
                if ((dateObj.getTime() - lastPresence) > (inactiveDela
+y*1000)) {
            $('#cb_timeout_warning').css({fontWeight : 'bold'}).text('
+Updates stopped due to inactivity.');
                    CBUpdating = false;
                } else {
                    CBTimeout = setTimeout("updatecb()", 1000 * refres
+hDelay);
                    CBUpdating = true;
                }
            }
        });
    }
</script>
<div id='tempdiv' style='display:none'>
</div>

[download]

Back to Perl Monks Discussion