Scrollup the div in updatepanel

Question

Hi

I need to scroll up the div as the new text comes in. My div is in Updatepanel and i am getting this error "get("divChatMessage") is null" Here is my code:-

<script type="text/javascript">
function ScrollToBottom() 
{
        $get('divChatMessage').scrollTop = $get('divChatMessage').scrollHeight;
}
</script>
<div id="divMessage" runat="server" style="float: left">
            <asp:UpdatePanel ID="upMessage" runat="server">
                <ContentTemplate>
                 <div id="divChatMessage" style="width:600px; overflow:auto; height:200px; border-style:solid;" runat="server">
                 </div>
</ContentTemplate>
            </asp:UpdatePanel>
        </div>

code behind:-

 divChatMessage.InnerHtml = divChatMessage.InnerHtml + "<br />" + message;
 ScriptManager.RegisterStartupScript(this,
                                     this.GetType(),
                                     Guid.NewGuid().ToString(),
                                     ";ScrollToBottom();",
                                     true);

Answer 1

You're running into issues with the naming container. Since your control is set to runat=server, it's name will be mangled on the client side. Provide the ClientID of the div as a parameter to the script from the code behind and that will solve your problem.

ScriptManager.RegisterStartupScript(this,
                                    this.GetType(),
                                    Guid.NewGuid().ToString(),
                                    ";ScrollToBottom('"
                                        + divChatMessage.ClientID
                                        + "');",
                                    true);

function ScrollToBottom(id) 
{
    var ctl = $get(id);
    ctl.scrollTop = ctl.scrollHeight;
}