scrollimg

Question

User693597704 posted

Hello,

 

I have a chat application I am working on inside of an update panel with timers. The area that the chat is foing into is "ChatContent" however it always scrolls to the top when a new message is added. the section is not scrollable nor does it automatically load at the bottom of the chat box

How do I fix this? . ..............I have tried

vertical-align: top and

overflow-y: auto;

along with a few other suggestions found in forums here and by googling........

 

 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                                                    <ContentTemplate>
                                                       
                                                        <div id="ChatContent" runat="server" style="height: 365px; vertical-align: top; overflow-y: auto;
                                                            text-align: left; margin-left: 10px; width: 97%;">  
                                                                                                                                                                                
                                                        </div> 
                                                           
                                                    </ContentTemplate>
                                                     <Triggers>
                                                        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                                                    </Triggers>
                                                </asp:UpdatePanel>


                                                <asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick">
                                                </asp:Timer>
                                                <asp:Timer ID="Timer2" runat="server" Interval="5000" OnTick="Timer2_Tick">
                                                </asp:Timer>
                                                <asp:Timer ID="Timer3" runat="server" Interval="300000" OnTick="Timer3_Tick">
                                                </asp:Timer>

Answer 1

User2103319870 posted

You can try the solution suggested in below links

• Maintain scroll postion in updatepanel on postback
• Maintain Scroll Position after Asynchronous Postback

Answer 2

User693597704 posted

You can try the solution suggested in below links

• Maintain scroll postion in updatepanel on postback
• Maintain Scroll Position after Asynchronous Postback

tried both neither is working for me tried both

'<%=UpdatePanel1.ClientID%>' and '<%=ChatContent.ClientID%>'

    <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        
        <div>
          
            <div id="Screen">
            </div>
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="85%">
                        <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr>
                                <td height="31">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="11" height="31">
                                                <img src="img/bg_left_top.gif" width="11" height="31" /></td>
                                            <td width="160">
                                                <span class="s14 fcolor"><b><i>Chat Lobby</i></b></span></td>
                                            <td background="img/bg_back_top.gif">
                                                &nbsp;</td>
                                            <td width="31" height="31">
                                                <img src="img/bg_right_top.gif" width="31" height="31" /></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="1" background="img/bg_left_center.gif">
                                            </td>
                                            <td style="vertical-align: top; text-align: left;">

                                            <script type="text/javascript">
                                                var xPos, yPos;
                                                var prm = Sys.WebForms.PageRequestManager.getInstance();

                                                function BeginRequestHandler(sender, args) {
                                                   IF ($get('<%=UpdatePanel1.ClientID%>') != null 
                                                   {
                                                    xPos = $get('<%=UpdatePanel1.ClientID%>').scrollLeft;
                                                    yPos = $get('<%=UpdatePanel1.ClientID%>').scrollTop;
                                                    }
                                                }
                                                function EndRequestHandler(sender, args) {
                                                 IF ($get('<%=UpdatePanel1.ClientID%>') != null 
                                                 {
                                                    $get('<%=UpdatePanel1.ClientID%>').scrollLeft = xPos;
                                                    $get('<%=UpdatePanel1.ClientID%>').scrollTop = yPos;
                                                    }
                                                }
                                                prm.add_beginRequest(BeginRequestHandler);
                                                prm.add_endRequest(EndRequestHandler);

                                            </script>
                                                <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                                                    <ContentTemplate>
                                                       
                                                        <div id="ChatContent" runat="server" style="height: 365px; vertical-align: top; overflow-y: auto;
                                                            text-align: left; margin-left: 10px; width: 97%;">  
                                                                                                                                                                                
                                                        </div> 
                                                          
                                                    </ContentTemplate>
                                                     <Triggers>
                                                        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                                                    </Triggers>
                                                </asp:UpdatePanel>


                                                <asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick">
                                                </asp:Timer>

Answer 3

User693597704 posted

neither one worked for me, they both looked very similar and think I may have seen it during other searches as well

    <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        
        <div>
          
            <div id="Screen">
            </div>
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="85%">
                        <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr>
                                <td height="31">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="11" height="31">
                                                <img src="img/bg_left_top.gif" width="11" height="31" /></td>
                                            <td width="160">
                                                <span class="s14 fcolor"><b><i>Chat Lobby</i></b></span></td>
                                            <td background="img/bg_back_top.gif">
                                                &nbsp;</td>
                                            <td width="31" height="31">
                                                <img src="img/bg_right_top.gif" width="31" height="31" /></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="1" background="img/bg_left_center.gif">
                                            </td>
                                            <td style="vertical-align: top; text-align: left;">

                                            <script type="text/javascript">
                                                var xPos, yPos;
                                                var prm = Sys.WebForms.PageRequestManager.getInstance();

                                                function BeginRequestHandler(sender, args) {
                                                   IF ($get('<%=UpdatePanel1.ClientID%>') != null 
                                                   {
                                                    xPos = $get('<%=UpdatePanel1.ClientID%>').scrollLeft;
                                                    yPos = $get('<%=UpdatePanel1.ClientID%>').scrollTop;
                                                    }
                                                }
                                                function EndRequestHandler(sender, args) {
                                                 IF ($get('<%=UpdatePanel1.ClientID%>') != null 
                                                 {
                                                    $get('<%=UpdatePanel1.ClientID%>').scrollLeft = xPos;
                                                    $get('<%=UpdatePanel1.ClientID%>').scrollTop = yPos;
                                                    }
                                                }
                                                prm.add_beginRequest(BeginRequestHandler);
                                                prm.add_endRequest(EndRequestHandler);

                                            </script>
                                                <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                                                    <ContentTemplate>
                                                       
                                                        <div id="ChatContent" runat="server" style="height: 365px; vertical-align: top; overflow-y: auto;
                                                            text-align: left; margin-left: 10px; width: 97%;">  
                                                                                                                                                                                
                                                        </div> 
                                                          
                                                    </ContentTemplate>
                                                     <Triggers>
                                                        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                                                    </Triggers>
                                                </asp:UpdatePanel>


                                                <asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick">
                                                </asp:Timer>

Answer 4

User693597704 posted

 

Answer 5

User693597704 posted

Not sure what I was thinking ...... after playing a bit got around to the 1st option working for me

 

Thank you

Answer 6

User2103319870 posted

Glad to be of help :)

Answer 7

User693597704 posted

just got one more quick question..... That works great for maintaining position but if someone is already at the bottom, how does it increment so the last message received is scrolled to?

 

What part of the code do I need to change?

 <script type="text/javascript">
             // It is important to place this JavaScript code after ScriptManager1
             var xPos, yPos;
             var prm = Sys.WebForms.PageRequestManager.getInstance();

             function BeginRequestHandler(sender, args) {
                 if ($get('<%=ChatContent.ClientID%>') != null) {
                     // Get X and Y positions of scrollbar before the partial postback
                     xPos = $get('<%=ChatContent.ClientID%>').scrollLeft;
                     yPos = $get('<%=ChatContent.ClientID%>').scrollTop;
                 }
             }

             function EndRequestHandler(sender, args) {
                 if ($get('<%=ChatContent.ClientID%>') != null) {
                     // Set X and Y positions back to the scrollbar
                     // after partial postback
                     $get('<%=ChatContent.ClientID%>').scrollLeft = xPos;
                     $get('<%=ChatContent.ClientID%>').scrollTop = yPos;
                 }
             }

             prm.add_beginRequest(BeginRequestHandler);
             prm.add_endRequest(EndRequestHandler);
 </script>