A poor man's realtime chat application.. kinda

chat.haml

#timeline.timeline-container
  - @conversation.messages.each do |message|
    %article.timeline-entry
      %p= message.body

= form_for [@conversation, @form], html: { style: 'overflow: hidden' } do |f|
  = f.text_area :body, placeholder: "Type your message here ...", rows: 5
  = f.button "Send", type: :submit

chat_css.css

#timeline {
  height: 450px;
  overflow-y: scroll
}

poor_mans_chat.js

 $(function() {
    var objDiv = document.getElementById("timeline");
    objDiv.scrollTop = objDiv.scrollHeight;

    var myTextarea = document.getElementById("message_body");
    myTextarea.focus();
    myTextarea.addEventListener('keydown', function(e) {
      if(e.keyCode == 13 && e.metaKey) {
        this.form.submit();
      }
    });
  })

what_i_do.md

• always scroll to bottom of the div
• focus the new message form
• allow cmd+enter to submit the form