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>





