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?
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!
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).
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…
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!
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.
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.