How to load shoutbox scroll to bottom after forced delay

[Matte]

I posted this as a reply in the Sidebar Redux thread, but I'm moving it here for a better chance at a solution and for easy location if someone needs this solution in the future.

I'm using the Sidebar Redux plugin and have my Shoutbox on the sidebar, which messes with the message box scroll position. I used the code to delay loading the scroll position, but it's written to load to the top when I need it to load to the bottom (I have new shouts at the bottom position). What would the solution here be?

The code I'm using to relocate and delay scroll load (scroll delay in bold):

$(document).ready(function() {
$('#move-shoutbox').append($('div.shoutbox.container.full'));
window.setTimeout(function() { $('.shoutbox_messages').scrollTop(0); }, 1000);
});

[Nscalerr]

Hi Matte

The following should do what you want, all I have done is change the scrolltop to scrollbottom.

This has not been tested.

$(document).ready(function() {
$('#move-shoutbox').append($('div.shoutbox.container.full'));
window.setTimeout(function() { $('.shoutbox_messages').scrollbottom(0); }, 1000);
});

[Matte]

Jun 13, 2021 1:56:31 GMT -8 Nscalerr said:

The following should do what you want, all I have done is change the scrolltop to scrollbottom.

That's one of the few things I did already try and it doesn't work, unfortunately.

[Nscalerr]

One of the other coders or the Staff may have an idea on how to fix it. Scripting is not my strong point.

[Matte]

I went on another search to see if I missed something in the Sidebar Redux thread, and it turns out that I did.

Brian supplied the following code for scrolling the Shoutbox to the bottom:
<script type="text/javascript">
$(document).ready(function() {
// Scroll to bottom of shoutbox messages
$('.shoutbox_messages').animate({"scrollTop": $('.shoutbox_messages')[0].scrollHeight}, "slow");
});
</script>
I combined this with the code to move the shoutbox into the side container that I already had in my global footer:
<script type="text/javascript">
$(document).ready(function() {
     $('#move-shoutbox').append($('div.shoutbox.container.full'));
});
</script>
And ended up with the following complete code, which seems to do the trick:
<script type="text/javascript">
$(document).ready(function() {
     $('#move-shoutbox').append($('div.shoutbox.container.full'));
$('.shoutbox_messages').animate({"scrollTop": $('.shoutbox_messages')[0].scrollHeight}, "slow");
});
</script>

My only question now is: the "scroll to top of Shoutbox" code had a specific time delay in it to delay the scroll until after the page load. The "scroll to bottom of Shoutbox" code doesn't seem to have that in it. Is there a reason for that?

[Nscalerr]

This may not be totally correct, but it is possible the delay was causing the problem.

[Matte]

Jun 13, 2021 21:06:29 GMT -8 Nscalerr said:

This may not be totally correct, but it is possible the delay was causing the problem.

The delay shouldn't have been causing any problems.

Moving the Shoutbox into the sidebar causes the Shoutbox scroll position to default to the middle. My original search for a solution landed on the "scroll to top" code, which incorporates the time delay because the Shoutbox needs to fully load before the script can scroll it to the top. So the time delay there was necessary.

My best guess for why there's no time delay written into the "scroll to bottom" code is that maybe the "animate" action can't execute until the Shoutbox is loaded anyway, so a forced time delay isn't necessary. I'm probably completely wrong on that. I know zero about javascript.