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>

In reply to Free Nodelet Hack: AJAX-enabled Chatterbox by bellaire

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":



  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.