Reputation: 2175
Using JavaScript how can I scroll a HTML div if height of another DIV changes?
In the below code if mychat's
height changes I need chat
DIV's scroll bar should come down. My JavaScript is wrong can anybody correct it please.
My code is
<style type="text/css">
#chat
{
height:250px;
width:200px;
overflow:auto;
background-color:Aqua;
padding:5px;
}
</style>
<script type="text/javascript">
function show() {
var MyDiv = document.getElementById('mychat');
var MyDiv2 = document.getElementById('chat');
var sval;
if(MyDiv.clientHeight != sval)
{
MyDiv2.scrollTop = MyDiv2.scrollHeight;
}
sval = MyDiv.clientHeight;
}
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
</asp:ScriptManager>
<div id="chat">
<asp:Timer ID="Timer1" runat="server" Interval="200" ontick="Timer1_Tick">
</asp:Timer>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="mychat" runat="server">
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
</div>
I am sorry I don't have enough knowledge in coding a JavaScript.
Upvotes: 2
Views: 2558
Reputation: 6361
This fiddle seems to be what you want - if not, it at least hopefully steers you in the right direction.
Adapted from code I've used from How do I scroll a row of a table into view (element.scrollintoView) using jQuery?
Upvotes: 1
Reputation: 63802
Using JavaScript, you're looking for the scrollTop
property of your div.
a scrollTop of 0 means the scrollbar is at the top of the page.
Try: myDiv.scrollTop = myDiv.clientHeight
or some similar metric.
Upvotes: 0