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>
