Chat HTML page suggestion

Question

I'm still learning HTML/CSS, so please expect a naive question below. With that said, I'd like to create a webpage (not the pop-up chat boxes or mobile type chat interfaces) to mock a simple chat interface.

Q1: I'd like to know which HTML element to use to insert chat instances. If I put it all in a <div id='chats'>, everytime I add new instances (new incoming chats), the page will just get longer. I'd like to limit the window to show these chat instances in a frame, so the length of the webpage stay constant. Then the user can scroll up and down within that window to read the chats. How do I accomplish that? I think StackOverflow does it for recommending questions that may have answers to my question and it uses overflow-y: scroll. Is that the way to go?

Q2: Supposed I use overflow-y: scroll, how could I keep the lastest chat instance always be the one to show after reloading? I assume that if I add a new chat <div>, it will not gain focus unless I do something special to call the focus on it?

Q3: Is there open-source chat UI for webpages that anyone would recommend?

Thank you for all your answers!

Answer 1

There are two things you are missing before any questions can be answered: One, you don't mention javascript anywhere, and it will be a requirement for this project. Two, if you expect multiple people to be able to use this chat, you will need some sort of server technology to relay the messages.

A1: yep "overflow-y: scroll" is the way to go

<div id="chats" style="width: 400px; height: 400px; overflow-y: scroll;">

A2: Alright, maybe I'm not understanding this question. Do you just want to scroll to the bottom (newest message) of the chat on page reload?

if so then calling something like this on page load would do:

var chatDiv = document.getElementById("chats");
chatDiv.scrollTop = chatDiv.scrollHeight;

A3: Without knowing the server-side framework technology you will be using (Node.js, PHP, ASP.NET). It's impossible to point you to a specific open source solution, but this is not a very difficult thing to do so I would assume their are a variety for each server-side framework.

Here is a simple single user implementation. As stated above, to get it working with multiple users you would have to relay it through a server or at the very least use a server to send each chatters connection info.

https://jsfiddle.net/3yvzp93m/4/

function writeMessage(form){
    var now = new Date().toLocaleString()
    var user = form.username.value;
    var message = form.msg.value;
    document.getElementById("chat").innerHTML = document.getElementById("chat").innerHTML + now  + " | " + user + " said: " + message + "<br />";
}

<div id="chat" style="width: 100%; height: 150px; overflow-y: scroll;">
</div>
<form name="message" method="POST">
  <label for="username">Username</label>
  <input type="text" name="username" />
  <label for="msg">Message</label>
  <input type="text" name="msg" />
  <input type="button" name="button" value="Submit" onClick="writeMessage(this.form)" />
</form>

Answer 2

Q1: For chat instances if you are planning of spawning more than one on a same webpage consider using classes instead of ids, since ids are meant to be used to identify unique elements in the DOM.

For example:

<h1>Chat Box</h1>
<div id = "chatbox">
    <div class="message">
        <span class="user">User says:</span>
        <span>first message</span>
    </div>
    <div class="message">
        <span class="user">User says:</span>
        <span>first message</span>
    </div>
    <div id ="last" class="message">
        <span class="user">User says:</span>
        <span>last message</span>
    </div>
</div>

You can see how there's two unique elements, those elements are identified within the DOM using ids (#chatbox and #last). There's also not-unique elements, like messages, which are present throughout the DOM, this elements should be identified using classes (.message and .user).

And the Css code for that could be something like:

<style>
    #chatbox {
        height: 2em;
        overflow-y:scroll;
        border: 1px solid black;
    }
    #chatbox>.message{
        border: 1px dotted black;
    }
    #chatbox>.message>.user{
        font-weight: bold;
    }
</style>

If all you want is to prevent the webpage to growing bigger, then overflow-y:scroll is fine. Just be conscientious about the units you use to delimit the height of the chatbox, em, %, px, etc.

Q2: In a pure HTML/CSS world your options are limited, the simplest one IMHO is to use named anchors, using the pound sign you can specify which part of the webpage you want to go to. In the chatbox case, you can add the "last" id to your last message element, and then just call yourdomain.com\chatbox.html#last. This will render something like this.

Q3: I would recommend JQuery UI, extremely easy to use, and there's several plugins for chat boxes.

Notes: Since you are learning HTML/CSS I focused my answer in those to topics, If you have no time to setup a server to run this kind of app, exercise, I would recommend to take a look on Firebase This service will abstract the storage and asynchronous behavior for you. Learning JS is a must, JQuery being one of the most popular libraries could be a good place to start. Don't focus so much on learning Memorizing stuff from Jquery but more on learning the process behind it and how all these different parts HTML/CSS/JS work together.