CODEWITHSUNDEEP
c#javascriptasp.nethtmlscrollbar
hmk
hmk

Reputation: 969

How to set the down to the vertical scroll bar in div tag using asp.net timer control when page is refreshing

I am developing a chat application using asp.net, in that application using div tag with in div tag add the asp.net Literal message box and one timer control , now my problem is when the page will refresh or click the button (any time) the div scrollbar is always top but I would like it to stay at the bottom, how to adjust my code?

<div id="divMessages" style="background-color: White; border-color:Black;border-width:1px;border-style:solid;height:300px;width:592px;overflow-y:scroll; font-size: 11px; padding: 4px 4px 4px 4px;" onresize="SetScrollPosition()">
  <asp:Literal Id="litMessages" runat="server" />
</div>
<asp:TextBox Id="txtMessage" onkeyup="ReplaceChars()" onfocus="SetToEnd(this)" runat="server" MaxLength="100" Width="500px" ClientIDMode="Static" />
<asp:Button Id="btnSend" runat="server" Text="Send" OnClientClick="SetScrollPosition()" OnClick="BtnSend_Click" ClientIDMode="Static"/>

and javascript function is

function SetScrollPosition()
{
  var div = document.getElementById('divMessages');            
  div.scrollIntoView(false);
  //(or) 
  div.scrollTop = 10000;
  //(both are checking)
}

please give me any suggestion about that

I checked this example it is working with out update panel but i have update panel and timer control also, i need to using those controls to maintain the div scroll bar in bottom please give me any suggestion ................

Upvotes: 1

Views: 12422

Answers (2)

user1194280
user1194280

Reputation:

Check this code See this Example

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"
            ScriptMode="Release" />
        <script type="text/javascript">
            var xPos, yPos;
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            function BeginRequestHandler(sender, args) {
                if ($get('<%=divMessages.ClientID%>') != null) {
                    xPos = $get('<%=divMessages.ClientID%>').scrollLeft;
                    yPos = $get('<%=divMessages.ClientID%>').scrollTop;
                }
            }
            function EndRequestHandler(sender, args) {
                if ($get('<%=divMessages.ClientID%>') != null) {
                    xPos = $get('<%=divMessages.ClientID%>').scrollLeft = xPos;
                    yPos = $get('<%=divMessages.ClientID%>').scrollTop = yPos;
                }
            }
            prm.add_beginRequest(BeginRequestHandler);
            prm.add_endRequest(EndRequestHandler);
        </script>

Upvotes: 1

zhengchun
zhengchun

Reputation: 1291

i may have a simple solution,but i not sure whether is you want.

in traditional,we can set an anchor for the url and let page scroll to special location when access this page.similar to this : http://www.example.com/#message.

so,you can write a little of js to control this anchor.

<div id="divMessages" onresize="SetScrollPosition()">
    <asp:Literal Id="litMessages" runat="server" />
</div>
<div id="msg-local" />//add new element is to auto scroll to here.

function SetScrollPosition()
{
     ......
     //set the url with anchor
     window.location.hash = "go-msg-local"; 
     //set this value can disable browser auto scroll
 }

//then page load event

 function page_load {
    if (window.location.hash) {
      window.location.hash = "msg-local"; 
    }
 }

Upvotes: 0

Related Questions