locked
scrollimg RRS feed

  • 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>

    Friday, April 25, 2014 11:06 PM

Answers

All replies

  • User2103319870 posted

    You can try the solution suggested in below links

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 25, 2014 11:13 PM
  • User693597704 posted

    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>

    Saturday, April 26, 2014 12:30 AM
  • 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>

    Saturday, April 26, 2014 12:31 AM
  • User693597704 posted


     

    Saturday, April 26, 2014 7:08 PM
  • User693597704 posted

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

     

    Thank you

    Saturday, April 26, 2014 10:42 PM
  • User2103319870 posted

    Glad to be of help :)

    Sunday, April 27, 2014 10:26 AM
  • 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>

    Sunday, April 27, 2014 10:30 AM