Restore scroll position of a DIV over a postback

Discussion in 'ASP .Net Web Controls' started by JezB, Jul 5, 2004.

  1. JezB

    JezB Guest

    There are a few references on the net about how to restore a page's scroll
    position over a postback. This is a simple one which works for me:
    eg. http://www.devhood.com/messages/message_view-2.aspx?thread_id=104625

    My question is : can the same thing be done to restore the scroll position
    of a specific DIV within a page? I have a DIV section which scrolls
    independently to the page :
    <div style="vertical-align: top; height:200px; width:100%; overflow:auto;">
    <asp:DataGrid runat="server" ...>
    ...
    </asp:DataGrid>
    </div>
    On each postback it is scrolling back to the top. Very annoying to the user
    if it's a click within the scroll area that causes the postback.

    Could someone tell me how? My knowledge of javascript is almost zero.
     
    JezB, Jul 5, 2004
    #1
    1. Advertising

  2. JezB

    JezB Guest

    Never mind. I found a way. For the record:

    <body onload="javascript:scrollTo('scrollArea')" >
    <form id="Form1" method="post" runat="server">
    ...
    <div id="scrollArea onscroll="javascript:setScroll(this);"
    runat="server" style="vertical-align: top; height:200px; width:100%;
    overflow:auto;">
    <asp:DataGrid runat="server" ...>
    ...
    </asp:DataGrid>
    </div>
    <input type="hidden" id="scrollPos" name="scrollPos" value="0"
    runat="server">
    ...
    </form>
    <script language="javascript">
    function setScroll(val) {
    document.Form1.scrollPos.value = val.scrollTop;
    }
    function scrollTo(what) {
    document.getElementById(what).scrollTop =
    document.Form1.scrollPos.value;
    }
    </script>
    </body>




    "JezB" <> wrote in message
    news:...
    > There are a few references on the net about how to restore a page's scroll
    > position over a postback. This is a simple one which works for me:
    > eg. http://www.devhood.com/messages/message_view-2.aspx?thread_id=104625
    >
    > My question is : can the same thing be done to restore the scroll position
    > of a specific DIV within a page? I have a DIV section which scrolls
    > independently to the page :
    > <div style="vertical-align: top; height:200px; width:100%;

    overflow:auto;">
    > <asp:DataGrid runat="server" ...>
    > ...
    > </asp:DataGrid>
    > </div>
    > On each postback it is scrolling back to the top. Very annoying to the

    user
    > if it's a click within the scroll area that causes the postback.
    >
    > Could someone tell me how? My knowledge of javascript is almost zero.
    >
    >
     
    JezB, Jul 5, 2004
    #2
    1. Advertising

  3. JezB

    MA Guest

    Or you could use:

    Page.SmartNavigation = true;

    /Marre

    "JezB" <> wrote in message
    news:...
    > Never mind. I found a way. For the record:
    >
    > <body onload="javascript:scrollTo('scrollArea')" >
    > <form id="Form1" method="post" runat="server">
    > ...
    > <div id="scrollArea onscroll="javascript:setScroll(this);"
    > runat="server" style="vertical-align: top; height:200px; width:100%;
    > overflow:auto;">
    > <asp:DataGrid runat="server" ...>
    > ...
    > </asp:DataGrid>
    > </div>
    > <input type="hidden" id="scrollPos" name="scrollPos" value="0"
    > runat="server">
    > ...
    > </form>
    > <script language="javascript">
    > function setScroll(val) {
    > document.Form1.scrollPos.value = val.scrollTop;
    > }
    > function scrollTo(what) {
    > document.getElementById(what).scrollTop =
    > document.Form1.scrollPos.value;
    > }
    > </script>
    > </body>
    >
    >
    >
    >
    > "JezB" <> wrote in message
    > news:...
    > > There are a few references on the net about how to restore a page's

    scroll
    > > position over a postback. This is a simple one which works for me:
    > > eg. http://www.devhood.com/messages/message_view-2.aspx?thread_id=104625
    > >
    > > My question is : can the same thing be done to restore the scroll

    position
    > > of a specific DIV within a page? I have a DIV section which scrolls
    > > independently to the page :
    > > <div style="vertical-align: top; height:200px; width:100%;

    > overflow:auto;">
    > > <asp:DataGrid runat="server" ...>
    > > ...
    > > </asp:DataGrid>
    > > </div>
    > > On each postback it is scrolling back to the top. Very annoying to the

    > user
    > > if it's a click within the scroll area that causes the postback.
    > >
    > > Could someone tell me how? My knowledge of javascript is almost zero.
    > >
    > >

    >
    >
     
    MA, Jul 5, 2004
    #3
  4. JezB

    JezB Guest

    Well, I did try that first, obviously.
    But it didn't work.

    "MA" <> wrote in message
    news:...
    > Or you could use:
    >
    > Page.SmartNavigation = true;
    >
    > /Marre
    >
    > "JezB" <> wrote in message
    > news:...
    > > Never mind. I found a way. For the record:
    > >
    > > <body onload="javascript:scrollTo('scrollArea')" >
    > > <form id="Form1" method="post" runat="server">
    > > ...
    > > <div id="scrollArea onscroll="javascript:setScroll(this);"
    > > runat="server" style="vertical-align: top; height:200px; width:100%;
    > > overflow:auto;">
    > > <asp:DataGrid runat="server" ...>
    > > ...
    > > </asp:DataGrid>
    > > </div>
    > > <input type="hidden" id="scrollPos" name="scrollPos" value="0"
    > > runat="server">
    > > ...
    > > </form>
    > > <script language="javascript">
    > > function setScroll(val) {
    > > document.Form1.scrollPos.value = val.scrollTop;
    > > }
    > > function scrollTo(what) {
    > > document.getElementById(what).scrollTop =
    > > document.Form1.scrollPos.value;
    > > }
    > > </script>
    > > </body>
    > >
    > >
    > >
    > >
    > > "JezB" <> wrote in message
    > > news:...
    > > > There are a few references on the net about how to restore a page's

    > scroll
    > > > position over a postback. This is a simple one which works for me:
    > > > eg.

    http://www.devhood.com/messages/message_view-2.aspx?thread_id=104625
    > > >
    > > > My question is : can the same thing be done to restore the scroll

    > position
    > > > of a specific DIV within a page? I have a DIV section which scrolls
    > > > independently to the page :
    > > > <div style="vertical-align: top; height:200px; width:100%;

    > > overflow:auto;">
    > > > <asp:DataGrid runat="server" ...>
    > > > ...
    > > > </asp:DataGrid>
    > > > </div>
    > > > On each postback it is scrolling back to the top. Very annoying to the

    > > user
    > > > if it's a click within the scroll area that causes the postback.
    > > >
    > > > Could someone tell me how? My knowledge of javascript is almost zero.
    > > >
    > > >

    > >
    > >

    >
    >
     
    JezB, Jul 5, 2004
    #4
  5. JezB

    JezB Guest

    Well, it did work partly : if the control which causes the postback is in
    the scrollable DIV it does rescroll far enough to focus on it if I turn
    smart navigation on, but not EXACTLY to the same scroll position (so user
    sees it jump from middle to bottom, for example). Also, if the control which
    caused the postback was outside the scrollable area it always scrolled
    itself back to the top. Therefore I had to come up with a better solution.

    "JezB" <> wrote in message
    news:u$...
    > Well, I did try that first, obviously.
    > But it didn't work.
    >
    > "MA" <> wrote in message
    > news:...
    > > Or you could use:
    > >
    > > Page.SmartNavigation = true;
    > >
    > > /Marre
    > >
    > > "JezB" <> wrote in message
    > > news:...
    > > > Never mind. I found a way. For the record:
    > > >
    > > > <body onload="javascript:scrollTo('scrollArea')" >
    > > > <form id="Form1" method="post" runat="server">
    > > > ...
    > > > <div id="scrollArea onscroll="javascript:setScroll(this);"
    > > > runat="server" style="vertical-align: top; height:200px; width:100%;
    > > > overflow:auto;">
    > > > <asp:DataGrid runat="server" ...>
    > > > ...
    > > > </asp:DataGrid>
    > > > </div>
    > > > <input type="hidden" id="scrollPos" name="scrollPos" value="0"
    > > > runat="server">
    > > > ...
    > > > </form>
    > > > <script language="javascript">
    > > > function setScroll(val) {
    > > > document.Form1.scrollPos.value = val.scrollTop;
    > > > }
    > > > function scrollTo(what) {
    > > > document.getElementById(what).scrollTop =
    > > > document.Form1.scrollPos.value;
    > > > }
    > > > </script>
    > > > </body>
    > > >
    > > >
    > > >
    > > >
    > > > "JezB" <> wrote in message
    > > > news:...
    > > > > There are a few references on the net about how to restore a page's

    > > scroll
    > > > > position over a postback. This is a simple one which works for me:
    > > > > eg.

    > http://www.devhood.com/messages/message_view-2.aspx?thread_id=104625
    > > > >
    > > > > My question is : can the same thing be done to restore the scroll

    > > position
    > > > > of a specific DIV within a page? I have a DIV section which scrolls
    > > > > independently to the page :
    > > > > <div style="vertical-align: top; height:200px; width:100%;
    > > > overflow:auto;">
    > > > > <asp:DataGrid runat="server" ...>
    > > > > ...
    > > > > </asp:DataGrid>
    > > > > </div>
    > > > > On each postback it is scrolling back to the top. Very annoying to

    the
    > > > user
    > > > > if it's a click within the scroll area that causes the postback.
    > > > >
    > > > > Could someone tell me how? My knowledge of javascript is almost

    zero.
    > > > >
    > > > >
    > > >
    > > >

    > >
    > >

    >
    >
     
    JezB, Jul 5, 2004
    #5
  6. JezB

    Edward Guest

    try this one, http://www.strengthtechnologies.com/scroll/

    someone answered in this newsgroup, I tried it just now, it works very well,
    except a bit shake in the page.

    hope it's exciting for you.

    > Well, it did work partly : if the control which causes the postback is in
    > the scrollable DIV it does rescroll far enough to focus on it if I turn
    > smart navigation on, but not EXACTLY to the same scroll position (so user
    > sees it jump from middle to bottom, for example). Also, if the control

    which
    > caused the postback was outside the scrollable area it always scrolled
    > itself back to the top. Therefore I had to come up with a better solution.
    >
    > "JezB" <> wrote in message
    > news:u$...
    > > Well, I did try that first, obviously.
    > > But it didn't work.
    > >
    > > "MA" <> wrote in message
    > > news:...
    > > > Or you could use:
    > > >
    > > > Page.SmartNavigation = true;
    > > >
    > > > /Marre
    > > >
    > > > "JezB" <> wrote in message
    > > > news:...
    > > > > Never mind. I found a way. For the record:
    > > > >
    > > > > <body onload="javascript:scrollTo('scrollArea')" >
    > > > > <form id="Form1" method="post" runat="server">
    > > > > ...
    > > > > <div id="scrollArea onscroll="javascript:setScroll(this);"
    > > > > runat="server" style="vertical-align: top; height:200px; width:100%;
    > > > > overflow:auto;">
    > > > > <asp:DataGrid runat="server" ...>
    > > > > ...
    > > > > </asp:DataGrid>
    > > > > </div>
    > > > > <input type="hidden" id="scrollPos" name="scrollPos"

    value="0"
    > > > > runat="server">
    > > > > ...
    > > > > </form>
    > > > > <script language="javascript">
    > > > > function setScroll(val) {
    > > > > document.Form1.scrollPos.value = val.scrollTop;
    > > > > }
    > > > > function scrollTo(what) {
    > > > > document.getElementById(what).scrollTop =
    > > > > document.Form1.scrollPos.value;
    > > > > }
    > > > > </script>
    > > > > </body>
    > > > >
    > > > >
    > > > >
    > > > >
    > > > > "JezB" <> wrote in message
    > > > > news:...
    > > > > > There are a few references on the net about how to restore a

    page's
    > > > scroll
    > > > > > position over a postback. This is a simple one which works for me:
    > > > > > eg.

    > > http://www.devhood.com/messages/message_view-2.aspx?thread_id=104625
    > > > > >
    > > > > > My question is : can the same thing be done to restore the scroll
    > > > position
    > > > > > of a specific DIV within a page? I have a DIV section which

    scrolls
    > > > > > independently to the page :
    > > > > > <div style="vertical-align: top; height:200px; width:100%;
    > > > > overflow:auto;">
    > > > > > <asp:DataGrid runat="server" ...>
    > > > > > ...
    > > > > > </asp:DataGrid>
    > > > > > </div>
    > > > > > On each postback it is scrolling back to the top. Very annoying to

    > the
    > > > > user
    > > > > > if it's a click within the scroll area that causes the postback.
    > > > > >
    > > > > > Could someone tell me how? My knowledge of javascript is almost

    > zero.
    > > > > >
    > > > > >
    > > > >
    > > > >
    > > >
    > > >

    > >
    > >

    >
    >
     
    Edward, Jul 5, 2004
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. JezB
    Replies:
    1
    Views:
    775
    John Saunders
    Jul 2, 2004
  2. JezB
    Replies:
    5
    Views:
    25,464
    Edward
    Jul 5, 2004
  3. Ralf Müller
    Replies:
    2
    Views:
    536
    Ralf Müller
    Jan 3, 2005
  4. UJ
    Replies:
    1
    Views:
    607
    John Timney \(MVP\)
    Nov 1, 2006
  5. Mel
    Replies:
    3
    Views:
    12,274
    Alexey Smirnov
    Jun 23, 2009
Loading...

Share This Page