I am trying to make a div reload every second and to have it scrolled down in the beginning. Right know I put both in the same function, because scrolling script doesn't work when they are apart (because of the reloading). However, in this case it scrolls down every second. Is there a way to have the div scrolled down only in the beginning and reload it every second? Thanks!
<script>
function load(){
$('#screen').load('includes/update.php');
$("#screen").scrollTop($("#screen")[0].scrollHeight);
}
setInterval(function(){
load();
}, 1000);
</script>
You could have an outher variable that says if you have scrolled or not :
<script>
var scrolled = false;
function load(){
$('#screen').load('includes/update.php');
if(!scrolled){
$("#screen").scrollTop($("#screen")[0].scrollHeight);
scrolled = true;
}
}
setInterval(function(){
load();
}, 1000);
</script>
This way, load will be called every second, but since scrolled is in the outer scope, it will be the same variable for each call.
You have to use the complete callback function for .load() like this:
<script>
function load(){
$('#screen').load('includes/update.php', function(){
$("#screen").scrollTop($("#screen")[0].scrollHeight);
});
}
setInterval(function(){
load();
}, 1000);
</script>
And it means that when the content is loaded fully, then call the callback functions and scroll to the top.
For more reference you can use the jQuery .load() documentation