Question

The thing is, I can do both, but I can’t make them work immediately one after another, it does the first in the 1st clock, and the second in the 2nd clock. I’ve also tried with 1 div inside another but it’s the same. Here’s the code:

the script:

$(document).ready(function() {          

        $("#chatRoomSub").load("chatUpdate.php");
        refreshId = setInterval(function() {
            $("#chatRoomSub").load('chatUpdate.php');
            var object = document.getElementById('chatRoom');
            object.scrollTop = object.scrollHeight;             
        }, 5000);

        $.ajaxSetup({ cache: false });      

    });

the body:

<div class='chatRoom' id="chatRoom">
    <div class='chatRoomSub' id="chatRoomSub">
    ainda nada foi escrito...
    </div>
</div>

Answer 1

You need to use a callback function on the .load() which does the scrolling.

$("#chatRoomSub").load("chatUpdate.php", function() {
  // scroll down
});

This way, the scrolling will occur immediately after the content is loaded.