Merge pull request #3 from raphaelcrv/scroll-bottom

feat(scroll):automatically scroll down
dericeira · Dec 17, 2018 · 17cdcb5 · 17cdcb5
2 parents 371211d + 3c2aa36
commit 17cdcb5
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/assets/js.js b/assets/js.js
@@ -21,9 +21,11 @@ $(document).ready(function(){
         	var text = $("#textarea").val();
         	$("#textarea").val('');
         	var time = new Date();
-        	$(".chat").append('<li class="self"><div class="msg"><span>' + $("#nickname").val() + ':</span><p>' + text + '</p><time>' + time.getHours() + ':' + time.getMinutes() + '</time></div></li>');
-        	socket.emit("send", text);
-
+					$(".chat").append('<li class="self"><div class="msg"><span>' + $("#nickname").val() + ':</span><p>' + text + '</p><time>' + time.getHours() + ':' + time.getMinutes() + '</time></div></li>');
+
+					socket.emit("send", text);
+					// automatically scroll down
+					document.getElementById('bottom').scrollIntoView();
         }
     });
 
@@ -36,8 +38,9 @@ $(document).ready(function(){
 
     socket.on("chat", function(client,msg) {
     	if (ready) {
-	    	var time = new Date();
-	    	$(".chat").append('<li class="other"><div class="msg"><span>' + client + ':</span><p>' + msg + '</p><time>' + time.getHours() + ':' + time.getMinutes() + '</time></div></li>');
+				var time = new Date();
+				$(".chat").append('<li class="field"><div class="msg"><span>' + client + ':</span><p>' + msg + '</p><time>' + time.getHours() + ':' + time.getMinutes() + '</time></div></li>');
+
     	}
     });
 

diff --git a/index.html b/index.html
@@ -24,7 +24,7 @@
   <ol class="chat">
 
   </ol>
-
+  <div id='bottom'></div>
   <input class="textarea" type="text" placeholder="Type here!" id="textarea" />
 </div>
     <script src="node_modules/jquery/dist/jquery.min.js"></script>