locked
Auto Scroll div down? RRS feed

  • Question

  • User1324715958 posted

    How do I auto scroll a div down on a postback?

    getting this error:

    JavaScript runtime error: Unable to get property 'scrollHeight' of undefined or null reference

    function WebChatGoToBottom() 
    {
        var divChat = document.getElementById('divChat');
        divChat.scrollTop = divChat.scrollHeight; 
    }

    Saturday, July 30, 2016 9:35 PM

Answers

  • User475983607 posted

    Yes I did but it was return the div as a NULL. I found  work around but I'd still like to figure out why this was passing in the div as a NULL.

    You added the runat="server" to the div.  Therefore, you must reference the ASP generated ID like so 

    var divChat = document.getElementById('<%=div_Chat.ClientID%>');

    or set the clientidmode attribute to static.

    <div id="div_Chat" style="width: 95%; height: 300px; overflow: scroll" runat="server" clientidmode="Static">test</div>

    ASP server control IDs are auto generated by default.

    The ClientID value is generated by concatenating the ID values of each parent naming container with the ID value of the control. In data-binding scenarios where multiple instances of a control are rendered, an incrementing value is inserted in front of the control's ID value. Each segment is separated by an underscore character (_). This algorithm was used in versions of ASP.NET earlier than ASP.NET 4.

    Developer Tools (F12) that come with all modern browser shows the element IDs (as well as many other useful tools) in the markup. You need to learn how to use Developer Tools for troubleshooting on the client. 

    https://developers.google.com/web/tools/chrome-devtools/?hl=en

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 4, 2016 1:43 PM

All replies

  • User1324715958 posted

    tried this as well and still failing

    function WebChatAutoScroll() 
            {
    
                var d = document.getElementById('divWeb_Chat');
    
               // d.scrollTop = d.scrollHeight;
               // d.scrollTop = d.scrollIntoView();
    
                //if (d.scrollHeight > d.clientHeight) 
                //{
                //    d.scrollTop = d.scrollHeight - d.clientHeight;
               // }
            }

    Saturday, July 30, 2016 11:47 PM
  • User1324715958 posted

    Here is my page code, its still not working. How do I import jquery lib?

    <%@ Page Title="General Chat" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master"
        CodeBehind="General_Chat.aspx.vb" Inherits="Holmes_Abel.General_Chat_1" %>
         <script type="text/javascript" src="/JavaHelper.js"></script>
        <script type="text/javascript">
            function WebChatAutoScroll() {
    
                var d = document.getElementsByid('div_Chat');
    
                //d.scrollTop = d.scrollHeight - d.clientHeight;
    
                //d.scrollTop = d.scrollHeight;
                //d.scrollTop = d.scrollIntoView();
    
                if (d.scrollHeight > d.clientHeight) {
                    d.scrollTop = d.scrollHeight - d.clientHeight;
                }
            }
        </script>
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">   
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <div id="divMain"> 
           <!-- <div id="divWeb_Chat" style="margin-left: 20px; height: 400px;" align="left"> -->
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
                <br />
                <asp:UpdatePanel ID="pnlChat" runat="server" style="height: 400px;">
                    <ContentTemplate>
                        <asp:Timer ID="tmrChat" runat="server" Interval="500">
                        </asp:Timer>
                        <div id="div_Chat" style="width: 95%; height: 300px; overflow: scroll" runat="server">
                        </div>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="tmrChat" EventName="Tick" />
                    </Triggers>
                </asp:UpdatePanel>
                <br />
           <!-- </div>-->
            <div id="divChat_Message" align="left" style="font-family: 'Times New Roman', Times, serif;
                font-size: 12px; font-weight: normal; font-style: normal; font-variant: normal;
                text-transform: none; color: #000000; margin-left: 20px">
                <asp:TextBox ID="tbMessage" runat="server" BorderStyle="Solid" BorderWidth="2px"
                    Font-Names="Times New Roman" Font-Size="12pt" ForeColor="Black" MaxLength="1200"
                    TextMode="MultiLine" Width="95%" Height="37px"></asp:TextBox>
            </div>
            <div id="divChat_Controls" align="right" style="margin-right: 5%">
                <asp:Button ID="btn_EnterMessage" runat="server" BackColor="#00144F" BorderColor="Black"
                    BorderStyle="None" BorderWidth="1px" Font-Names="Times New Roman" Font-Size="12pt"
                    ForeColor="White" Text="Enter Message" />
            </div>
        </div>
    </asp:Content>

    Sunday, July 31, 2016 12:26 AM
  • User61956409 posted

    Hi UOKSoftware,

    Firstly, please debug your code to check the value of variable d and make sure if it retuens null.

    Secondly, you define function WebChatAutoScroll, but we could not find where you call this function. If you call this function on button control client-side click event, it will post data to server and reload (render) the webpage after you click the button, the scroll bar position will be reset. If you’d like to display scroll bar at bottom of container <div>, you could call function WebChatAutoScroll on onload event.

    <body onload="WebChatAutoScroll();">

    Best Regards,

    Fei Han

    Monday, August 1, 2016 11:56 AM
  • User1324715958 posted

    sorry here is vb code. I commented some of it out as I was troubleshooting it but you can un comment it out and it will runt he javascript

    Protected Sub tmrChat_Tick(sender As Object, e As EventArgs) Handles tmrChat.Tick
            Try
                If div_Chat.InnerText = String.Empty Then BuildWelcome()
    
                Dim dt As DataTable = DataFunctions.GetWebChatMessages(ChatRoomID)
    
                div_Chat.InnerText = Nothing
    
                For Each row As DataRow In dt.Rows
                    Dim Chat As String = row.Item("Chat")
    
                    div_Chat.InnerHtml = div_Chat.InnerHtml + " <br/>" + Chat + " <br/>"
                    ' Autoscroll()
                Next
    
                ' Autoscroll()
            Catch ex As Exception
    
            End Try
        End Sub
    
        Private Sub Autoscroll()
            Try
                ClientScript.RegisterStartupScript(Me.GetType(), "WebChatAutoScroll", "WebChatAutoScroll();", True)
            Catch ex As Exception
    
            End Try
        End Sub

    Monday, August 1, 2016 1:53 PM
  • User61956409 posted

    Hi UOKSoftware,

    ClientScript.RegisterStartupScript(Me.GetType(), "WebChatAutoScroll", "WebChatAutoScroll();", True)

    It seems that you call JavaScript function WebChatAutoScroll from code behind by using ClientScript.RegisterStartupScript method, this code snippet seems ok, the function WebChatAutoScroll should be called. As I said in my previous reply, do you debug the code to trace value&changes of JavaScript variables?

    Best Regards,

    Fei Han

    Thursday, August 4, 2016 10:51 AM
  • User1324715958 posted

    Yes I did but it was return the div as a NULL. I found  work around but I'd still like to figure out why this was passing in the div as a NULL.

    Thursday, August 4, 2016 12:49 PM
  • User475983607 posted

    Yes I did but it was return the div as a NULL. I found  work around but I'd still like to figure out why this was passing in the div as a NULL.

    You added the runat="server" to the div.  Therefore, you must reference the ASP generated ID like so 

    var divChat = document.getElementById('<%=div_Chat.ClientID%>');

    or set the clientidmode attribute to static.

    <div id="div_Chat" style="width: 95%; height: 300px; overflow: scroll" runat="server" clientidmode="Static">test</div>

    ASP server control IDs are auto generated by default.

    The ClientID value is generated by concatenating the ID values of each parent naming container with the ID value of the control. In data-binding scenarios where multiple instances of a control are rendered, an incrementing value is inserted in front of the control's ID value. Each segment is separated by an underscore character (_). This algorithm was used in versions of ASP.NET earlier than ASP.NET 4.

    Developer Tools (F12) that come with all modern browser shows the element IDs (as well as many other useful tools) in the markup. You need to learn how to use Developer Tools for troubleshooting on the client. 

    https://developers.google.com/web/tools/chrome-devtools/?hl=en

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 4, 2016 1:43 PM