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>
digg stumbleupon del.icio.us reddit Fark Technorati Faves
Your information (required) Name*
Email*
Website

* Indicates required fields; email is used for validation and is not displayed on the site.

Your comment
Commenting on jQuery play – fake chat pane
Title

Body is limited to ≈1,000 words. Paragraphs—but not line breaks—are automatically inserted. Valid XHTML is required. These are the allowed tags–

<a href=""></a> <br/> <acronym title=""></acronym> <abbr title=""></abbr> <code></code> <pre></pre> <tt></tt> <ins></ins> <del></del> <hr/> <cite></cite> <b></b> <i></i> <sup></sup> <sub></sub> <strong></strong> <em></em> <h1></h1> <h2></h2> <h3></h3> <q></q> <blockquote></blockquote>