Autoscroll, light fix, front end (#74, #75)

A few things were fixed in this commit.

Chat now autoscrolls with each message sent. The turn off the light
button now works properly and will work when clicking on the icon. Small
front end improvements were made including the removal of scroll bars
and a small border on the chat area.

css/style.css

@@ -153,6 +153,7 @@
      width: 500px;
      height: 300px;
      overflow: scroll;
+     border:1px solid gray;
  }
 
  .message-well {
@@ -182,6 +183,23 @@
      padding-right: 10em !important;
  }
 
+ .noscrollbar {
+  /* These rules create an artificially confined space, so we get
+     a scrollbar that we can hide. They are not part of the hiding itself. */
+
+  /* border: 1px dashed gray;
+  padding: .5em; */
+
+  /* white-space: pre-wrap; */
+  /* height: 5em; */
+  overflow-y: scroll;
+}
+
+.noscrollbar::-webkit-scrollbar {
+  /* This is the magic bit */
+  display: none;
+}
+
  .form-group {
      margin-bottom: 15px;
  }

index.html

@@ -146,8 +146,8 @@ <h2><span id="hostlabel" class="label label-default"><i class="fas fa-user"></i>
                         <button onclick="loveLive(roomnum)" style="margin-top:.5rem" class="btn btn-primary"><i class="far fa-heart"></i> Love live noises</button>
                         <!-- <br/> -->
                         <button id="hostbutton" onclick="changeHost(roomnum)" style="margin-top:.5rem" class="btn btn-primary"><i class="fas fa-users"></i> Make me the host!</button>
-
-                        <button style="margin-top:.5rem" class="btn btn-primary switch"><i class="fas fa-lightbulb"></i></button>
+                        <!-- Turn off the lights -->
+                        <button style="margin-top:.5rem" class="btn btn-primary switch"><i style="pointer-events:none;" class="fas fa-lightbulb"></i></button>
                     </div>
 
                     <!-- Div for lights off! -->
@@ -172,7 +172,7 @@ <h5 style="float:right; color: gray;">Online Users</h5>
 
                     <!-- <br/> -->
                     <div class="col-md-13">
-                        <div class="well online-users">
+                        <div class="well online-users noscrollbar">
                             <ul class="list-group" id="users"></ul>
                         </div>
 
@@ -214,7 +214,7 @@ <h4 class="modal-title">Invite a Friend</h4>
                         <br/>
                         <!-- <h2 style="color:gray">Chat</h2> -->
                         <div class="col-md-12">
-                            <div class="chat" id="chat"></div>
+                            <div class="chat noscrollbar" id="chat"></div>
                             <!-- Message Form (Enter Message) -->
                             <form id="messageForm">
                                 <div class="form-group">
@@ -379,6 +379,9 @@ <h2>About Vynchronize</h2>
                 else {
                     last_div.innerHTML = last_div.innerHTML + " <br> " + data.msg
                 }
+                // $chat.scrollTop = $chat.scrollHeight;
+                // Auto scroll on each message send!
+                $('div#chat').scrollTop($('div#chat')[0].scrollHeight)
             });
 
             // Submit user form