Hi, I was reading this tutorial rdickert meteor/-chat-tutorial, specifically for the used scrollToBottom function, seen here: Part 5 of this tutorial.
In the beginning I had this console error that said scrollToBottom is not defined - but I had so many failed attempts to fix it that I can’t recreate it. It’s not showing up anymore. However, the latest error I got was:
ReferenceError: duration is not defined
at Blaze.TemplateInstance.<anonymous> (chat.js:150)
at blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3398
at Function.Template._withTemplateInstanceFunc (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3769)
at fireCallbacks (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3394)
at Blaze.View.<anonymous> (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:3487)
at blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:1845
at Object.Blaze._withCurrentView (blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:2271)
at blaze.js?hash=51f4a3bdae106610ee48d8eff291f3628713d847:1844
at Object.Tracker._runFlush (tracker.js:511)
at onGlobalMessage (meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:515)
It occurs on the ‘receiving end’, means, the tab that is not sending the message.
Everything worked fine so far - when I wrote a message inside the chatbox it scrolled down. However, after I tested it with 2 tabs open it just scrolled down from the tab I sent the message from. The other tab didn’t scroll down the chat-window.
I implemented it like so:
I pasted the function inside imports/api/chat/chat.js where I also export the messages-collection and other stuff:
var autoScrollingIsActive = false;
scrollToBottom = function scrollToBottom (duration) {
var messageWindow = $(".chatWindow");
var scrollHeight = messageWindow.prop("scrollHeight");
messageWindow.stop().animate({scrollTop: scrollHeight}, duration || 0);
};
Then, in imports/components/chat/chat.js I put the function inside the event that would send the message:
'keypress #text'(event) {
if (event.keyCode == 13) {
event.preventDefault();
const text = document.getElementById('text').value;
const room = document.getElementById('room').value;
const character = document.getElementById('char').value;
Meteor.call('chat.start', text, character, room, fs, whisperTo, (error) => {
if (error) { alert(error.error); }
else {
// scroll-trigger from function => api/chat.js
document.getElementById('text').value='';
if (autoScrollingIsActive) {scrollToBottom(200);};
}
});
}
},
In this state the function works, well, I would say just client-side. I also tried to put it on the onRendered-template of the message-template. But it was the same outcome. I tried to contact rdickert on github but sadly he didn’t respond.
I would appreciate it if someone could tell me why this scrollToBottom function is not working for those that didn’t send the message. Thank you!