Answered by:
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>
Friday, April 25, 2014 11:06 PM
Answers
-
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
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
You can try the solution suggested in below links
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"> </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"> </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