jQuery play – fake chat pane

You need jQuery installed and loaded for this to work.

There is also a real working example along these lines here: /perl/code/ajax-chat.cgi.

The JavaScript/XHTML

<div style="border:1px solid black; padding:1ex;
    margin:1ex; overflow:hidden">
<div id="jQuery_play" style="height:12em;" class="sans">
</div>

<script type="text/javascript">//<![CDATA[
 $(document).ready(function()
{
  var counter = 0;
  var form = document.createElement("form");
  var textfield = document.createElement("input");
  $(textfield).attr("value", "<type in me!>");
  $(textfield).attr("maxlength", "70");
  $(textfield).bind("focus", function() {
    $(this).attr("value", "");
  });
  $(form).append(textfield);
  $(form).bind("submit", function() {
    var typed = $(form).find("input:eq(0)").attr("value");
    var line = document.createTextNode(typed);
    counter++;
    var count = document.createTextNode(counter + ". ");
    var div = document.createElement("div");
    $(div).css("margin", "0");
    $(div).css("padding", "2px 0");
    $(div).append(count);
    $(div).append(line);
    $(div).hide();
    $("#jQuery_play").prepend(div);
    $(div).slideDown("slow");
    $("#jQuery_play").find("div:gt(4)").slideUp("slow").remove();
    $(form).find("input:eq(0)").attr("value", "");
    return false;
  })
  $(form).insertAfter( $("#jQuery_play") );
}
);
//]]>
</script>
</div>