Default to bottom of chat?

help
1

Hi all,

I’m making a very simple chat app for a gaming community who want a simple alternative to WhatsApp (some members don’t want to give away their phone number, fair enough). I’ve got everything working like a charm, but by default the page loads at the top (which in turn loads the oldest messages first). Is there a way to set it so it defaults to the latest message?

Thanks in advance,

Tom.

1 Like
2

u probably want “sort” and “limit” for your collection cursors in helpers .

http://docs.meteor.com/#/full/sortspecifiers

3

Hi Shock, thanks for your reply.

I’ve already set a limit to the last 30 message and to be displayed in chronological order, if you scroll to the top then the 30 messages before that will appear and so on.

It’s all working as intended, I just need it to default to the bottom of the chat window on load is all!

Cheers,

Tom.

4

This is actually a problem that sounds easy, but html and css don’t really work that way, unless you want to position things manually or have text wrapping problems. Everything tends to want to stick to the top.

However! There is a funky solution, and that is to rotate the container 180 deg., then rotate all the messages 180 deg. again using transform:rotate(180).

ref: http://stackoverflow.com/a/18171538
https://jsfiddle.net/3hjhmn9w/

Hope it helps!

1 Like
5

Don’t have the code in front of me, but for a chat solution, I used a reverse sort (oldest messages first), and then run an observe changes on the collection that triggers a jQuery scrollTop that pops the scroll to the bottom of the container on additions to the collection…

6

That is also a decent solution that I have used myself, but it won’t do as OP asks and start at the bottom, like this

My chat application
 ________________
|                |
|                |
|                |
| First message  |
7

Thank you both! Both seem like they’re worth trying, so that’s what I’ll do. I think reversing the container may be the most effective solution, even though it does feel like a bit of a hack!

Cheers,

Tom.

8

Ah, my mistake – I misread the problem as the one that I encountered, rather than the more unique one that OP is facing!

9

@korus90. Just curious if you had any success with one of the solutions? Having similar needs.

10

Hi @miriam7,

I actually moved onto Framework7 which has built-in messages.

Saying that though, the jquery scrollTop method was the best for me in practice. It was easier to customize too, since you could have it smooth-scroll down to the bottom on load if you want and stuff, whereas the CSS option wouldn’t.

If you’re making and Android / iOS app though, I strongly recommend looking at Framework7. It’s been fantastic for me.

11

this thread is pretty funny. Solution seems to me like just scrolling to the bottom with JS (like korus90 just said), but some proposed solutions are to rotate the whole chat and rotate each message to counter? haha what the hell… incredible way to overkill a problem.

12

Have you seen that, by the way? http://info.meteor.com/blog/whatsapp-with-meteor-angular-and-ionic

13

Do you have a better solution or does this thread amuse you too much? Either contribute to a problem or don’t comment at all.

14

I hadn’t! But thanks a lot for sharing :smile: