Mercurial > cosocket
changeset 82:4b3c051d60c3
Added a mouseover overlay that shows metadata about the selected message.
| author | Atul Varma <varmaa@toolness.com> |
|---|---|
| date | Thu, 30 Apr 2009 20:05:31 -0700 |
| parents | 2fc520114ed4 |
| children | a095f39117d9 |
| files | media/css/openwebchat.css media/js/openwebchat.js openwebchat.html |
| diffstat | 3 files changed, 33 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- a/media/css/openwebchat.css Thu Apr 30 19:07:22 2009 -0700 +++ b/media/css/openwebchat.css Thu Apr 30 20:05:31 2009 -0700 @@ -65,3 +65,17 @@ #data { display: none; } + +.overlay { + display: none; + padding-left: 1em; + position: absolute; + left: 0px; + top: 0px; + z-index: -1; + text-align: left; +} + +.highlighted { + background: #f5f5f5; +}
--- a/media/js/openwebchat.js Thu Apr 30 19:07:22 2009 -0700 +++ b/media/js/openwebchat.js Thu Apr 30 20:05:31 2009 -0700 @@ -206,6 +206,22 @@ else lastAuthor = msg.author; + msg = null; + + message.mouseenter( + function() { + $(this).addClass('highlighted'); + $('.overlay').css({top: $(this).position().top}); + $('.overlay .sent').text($('.timestamp', this).text()); + $('.overlay').show(); + }); + + message.mouseleave( + function() { + $(this).removeClass('highlighted'); + $('.overlay').hide(); + }); + container.append(message); }
--- a/openwebchat.html Thu Apr 30 19:07:22 2009 -0700 +++ b/openwebchat.html Thu Apr 30 20:05:31 2009 -0700 @@ -16,6 +16,9 @@ severed. We'll try reconnecting in <span class="seconds-left"></span> second<span class="plural">s</span>. </div> +<div class="overlay"> + <div>Sent <span class="sent"></span></div> +</div> <textarea id="outgoing-message"></textarea> <p>Your name is <input type="text" id="name"/>.</p> <div id="bottom"></div>