Scrolling Chat-Stream to bottom

[Pasley70]

It would be useful to scroll the chat-stream to the buttom of the div, so you can see the latest chat-message. Maybe with a jQuery-Function like

     $(".elgg-chat-messages.pbm").each(function(){
        var t=$(this);
        t.animate({scrollTop:t[0].scrollHeight}, 1000);
     });

[Pasley70]

This ist also fixed with the latest git-version.

[juho-jaakkola]

Are you sure this has been fixed? I don't remember working on anything like this.

[Pasley70]

nah - this is not my day. You are totally right. My own fix was still in the browser cache while testing your latest Version. I reopen the issue.

[Pasley70]

Sorry that i commented on this closed issue again. but I still have a complement for automatic scrolling.

Your latest implementation works fine, when you have new messages. But when you open a chat without new messages to write a new message, you still have to scroll down.

So what we need is an initial scrolling of the chat, like:

define(function(require) {
    var $ = require('jquery');
    var elgg = require('elgg');
    /* this is a repetition of your scroll-function */
    var list = $(".elgg-chat-messages");
    list.animate({scrollTop: list[0].scrollHeight}, 1000);
    [...]

What do you think?

[juho-jaakkola]

When I use it, I always see all messages immediately. Maybe my messages are just very short? Apparently this happens only if there are very long messages that span multiple rows?

[Pasley70]

yes - sometimes we have up to 20 messages and we see max. 5 Messages. The div ".elgg-chat-messages.pbm" have a height of 400px. Here is a Screenshot:

[juho-jaakkola]

The facts:

• We want to keep the list of messages short, so it's easy to access the form
• It's not possible to know beforehand, how much vertical space the list need

So yes, it seems the best way is to trigger the automatic scrolling also when the page loads the first time.

[Pasley70]

Yep, I'm totally with you.

[juho-jaakkola]

Now I'm in fact wondering whether it should work like this:

• Scroll to oldest unread message on page load
• When new message arrives, do not scroll to bottom, but instead add a notification "You have new messages"

[juho-jaakkola]

I've added a new branch: https://github.com/juho-jaakkola/elgg-chat/tree/messaging_ui

Could you try it out and tell what you think?

[Pasley70]

This is very interesting! I have not taken into account the logic that the chat-page could be opened for longer time.

Yes, that makes sense! And works great for me! (Tested the branch "messaging_ui" successfully)

(Hmm - Now we might think about to not only receive, but also send messages via ajax :-)

[juho-jaakkola]

Please do your best for the messaging_ui branch to:

• Find bugs
• Suggest improvements
• Break it completely ;)

I'll merge it to master branch once I'm sure it won't introduce any bugs and the approach is good UX in every way.

(See #8 for the ajax sending.)

[Pasley70]

Actually i let my colleagues test the functionality (potentially 50 Persons). I think, we need some days - I'll send you infos asap.

[Pasley70]

Everything works fine until no. Only one thing is striking: When i opened the Chat-Page and see new incoming messages, the chat-message-notifications (E-Mail) make no sense. Of course, on leaving Elgg the notifications make sense again!

[juho-jaakkola]

I'm not sure what you mean by the notifications. Perhaps it's best if you open a new issue for it?

[Pasley70]

See #9

[juho-jaakkola]

I've merged the messaging_ui branch.