0

When adding new messages on the chat, chat content refreshes adding the new message and moving the scrollbar to the top. I am trying to make it stay bottom but can't figure it out alone.

This is in my html page:

<script type="text/javascript">
<!--
var iChat_cfg = ["300", "15"];

var iChat_lang = ["Edit messages", "Write a new message", "iChat error", "Write your message.", "Your message text is too long.", "Agree", "Save Settings", "Clear DB", "Check for updates"];

function reFreshiChat()
{
iChatRefresh('site');
return false;
};

setInterval(reFreshiChat , iChat_cfg[1]*1000);
//-->

</script>
<div id="iChat-style">
   <div id="iChat-messages" align="left">
   <div class="chat">Message 1</div>
   <div class="chat">Message 2</div>
   <div class="chat">Message 3</div>
   <div class="chat">Message 4</div>
   <div class="chat">Message 5</div>
</div>
</div>

This is in my js file:

    function iChatRefresh(place)
{

    $.post(dle_root + "engine/modules/iChat/ajax/refresh.php", { action: "refresh", place: place }, function(data){

if(data != 'no need refresh'){

        $("#iChat-messages").html(data);

};


    });

    return false;
};

and css:

#iChat-style {
    width:100%;
    height:300px;
    overflow:auto;
}
Beso
  • 41
  • 2
  • 8

1 Answers1

1

It's simple using jQuery.

$("#iChat-messages").scrollTop($("#iChat-messages")[0].scrollHeight);

With pure js it looks like: 

var objDiv = document.getElementById("#iChat-messages");
objDiv.scrollTop = objDiv.scrollHeight;

Put it in the method where the div content is reloaded.

user3568791
  • 676
  • 1
  • 7
  • 22
  • Where do i need to add this exactly? When i add it to my .js file, it only goes bottom when page refresh, not div content refresh. – Beso Sep 11 '16 at 14:04
  • After the $("#iChat-messages").html(data); in the if statement. – user3568791 Sep 11 '16 at 14:15
  • Did this before i even start the question here. For the logged in users, it keeps the scroll where it is. simply doesn't go up but doesn't go down neither. And for guest users, it fails chat because when i add this jQuery or Javascript it doesn't read the Name field. – Beso Sep 11 '16 at 14:33
  • Just add it everywhere the content is reloaded. – user3568791 Sep 11 '16 at 14:35