Showkath Showkath - 5 months ago 8
jQuery Question

Scroll down div programmatically as contents added to it using JQuery

I have a div that shows progress to the user in JQuery dialog. I have scrollbars to it. What I want is that when I append text (In jQuery code), the div should automatically scroll down and user should able to see the progress. For example


  • Initialising,

  • Processing records,

  • Stock is updated,

  • Getting new orders information,

  • Processing Orders,

  • Orders processed.. on so on



Can someone please help me out how to do this in Jquery? Thank you.

My code where I append div

$.ajax({
type: "POST",
url: "../Services/OrderR.asmx/Process",
contentType: 'application/json',
dataType: "json",
data: JSON.stringify(params3),
success: function (p) {

if (p.d.Success == true) {
status = status + p.d.Message + '</br>';
$('#divProgressDialog').empty();
$('#divProgressDialog').append(status);
return;
}
else {
status = status + '<font color=#FF0000>Error - ' + p.d.Message + '</font></br>';
status = status + 'Please contact support team.';
$('#divProgressDialog').empty();
$('#divProgressDialog').append(status)
return;
}
}
});

Answer

Add this before BOTH(*) your return;

var myHeight = $('#divProgressDialog').scrollHeight
$('#divProgressDialog').scrollTop(myHeight);

EDIT : I would have tested this code if you provided a jsfiddle but I think this is all you are missing. Everytime you add content, it calculate the new height the the div and proceed to scroll to the bottom.

(*) = EDIT 2

Comments