Mercurial > cosocket
changeset 42:f560e6f01c22
misc changes, including now scrolling to the bottom when new messages arrive.
author | Atul Varma <varmaa@toolness.com> |
---|---|
date | Mon, 27 Apr 2009 23:41:13 -0700 |
parents | c9ba9a45f1dd |
children | 728f162add5d |
files | openwebchat.css openwebchat.html openwebchat.js |
diffstat | 3 files changed, 21 insertions(+), 9 deletions(-) [+] |
line wrap: on
line diff
--- a/openwebchat.css Mon Apr 27 22:49:48 2009 -0700 +++ b/openwebchat.css Mon Apr 27 23:41:13 2009 -0700 @@ -6,6 +6,7 @@ } textarea { + margin-top: 1em; width: 40em; } @@ -16,7 +17,6 @@ #content { width: 40em; - text-align: left; margin: 2em auto; } @@ -45,3 +45,7 @@ padding-top: 1em; font-variant: small-caps; } + +#templates { + display: none; +}
--- a/openwebchat.html Mon Apr 27 22:49:48 2009 -0700 +++ b/openwebchat.html Mon Apr 27 23:41:13 2009 -0700 @@ -8,13 +8,20 @@ <title>Open Web Chat</title> </head> <body> -<content> +<div id="content"> +<h1>This is a conversation.</h1> <div id="incoming-messages"></div> <textarea id="outgoing-message"></textarea> <p>Your name is <input type="text" id="name"/>.</p> -</content> -</body> +</div> +<div id="templates"> + <div class="message"> + <div class="author"></div> + <div class="content"></div> + </div> +</div> <script src="jquery.js"></script> <script src="json2.js"></script> <script src="openwebchat.js"></script> +</body> </html>
--- a/openwebchat.js Mon Apr 27 22:49:48 2009 -0700 +++ b/openwebchat.js Mon Apr 27 23:41:13 2009 -0700 @@ -47,8 +47,7 @@ OpenWebChat.startMessageListener( function(msg) { - var block = $('<div class="message"><div class="author"></div>' + - '<div class="content"></div></div>'); + var block = $('#templates .message').clone(); // Try to dynamically determine if the message is HTML or not. var parser = new DOMParser(); @@ -60,13 +59,15 @@ $('.content', block).html(msg.content); var author = msg.author ? msg.author : 'Anonymous'; - if (author != $('.author:last').text()) + if (author != $('#content .author:last').text()) $('.author', block).text(author); else $('.author', block).remove(); - + block.hide(); $('#incoming-messages').append(block); - block.slideDown(); + block.slideDown(function() { + window.scrollTo(0, $(window).height()); + }); }); });