Retain scroll position after postback

Reply

None

0 Points

Retain scroll position after postback

Sep 11, 2003 12:44 PM|kexik_white|LINK

On the http://www.asp.net/Forums/ShowPost.aspx?tabindex=1&PostID=258568 topic I developed easy method to retain scroll position in DataGrid and other form controls in long scrollable page after postback. Simple put hidden input into your form and small javascript will change his value to body.scrollTop or document.documentElement.scrollTop (depends on browser and on doctype). This hidden input is run at server - it holds scroll position value in view_state. On window.load event is scroll position restored from hidden input. For enhancing the scroll effect is good use page-transition (blendtrans). Put before end your form (before </form> tag):

<input id="__SAVESCROLL" name="__SAVESCROLL" value="0" type="hidden" runat="server" /> <script type="text/javascript" src="SaveScroll.js"></script>

To the SaveScroll.js file put:

function saveScroll() { var sScroll; if (document.documentElement && document.documentElement.scrollTop) sScroll = document.documentElement.scrollTop; else if (document.body) sScroll = document.body.scrollTop; else
 { sScroll = 0; } document.getElementById('__SAVESCROLL').value = sScroll; } function restoreScroll() { var sScroll = document.getElementById('__SAVESCROLL').value; if (sScroll > 0) { if (document.documentElement && document.documentElement.scrollTop) document.documentElement.scrollTop
 = sScroll; else if (document.body) { if (window.navigator.appName == 'Netscape') window.scroll(0, sScroll); else document.body.scrollTop = sScroll; } else { window.scroll(0, sScroll); } // here is setting absolute positioning panel, if you need, set correct
 ID and uncomment follow 2 lines (and add needed lines/setting for all your panels) //if (document.getElementById('pnlNewItem') != null ) //document.getElementById('pnlNewItem').style.top = sScroll + 'px'; } } window.onload = restoreScroll; window.onscroll
 = saveScroll; window.onresize = saveScroll;

To the head section of page put this conditionally comment meta-tag for quick page transition(in IE6+ will create very smooth postback, in other will be ignored because they dont support transition or dont support 0.1 time to play transition) This easy script work in IE4+, NN6+,Mozilla and maybe last version of Opera (others I didnt try). Try it, enjoy it or send me bug report :)

Pavel Ružicka, MCPD
Prague - Czech Republic
http://pavel-ruzicka.net/

Reply

kexik_white

None

0 Points

48 Posts

Re: Retain scroll position after postback

Sep 22, 2003 09:17 AM|kexik_white|LINK

New version - hold vertical and horizontal scroll position, now as User Control: Create file SaveScroll.ascx:

<script language="C#" runat="server"> void Page_Load(object sender, System.EventArgs e) { ltrSF.Text = __SAVESCROLLY.ClientID; ltrSFX.Text = __SAVESCROLLX.ClientID; ltrRF.Text = __SAVESCROLLY.ClientID; ltrRFX.Text = __SAVESCROLLX.ClientID; } </script>
 <input id="__SAVESCROLLY" value="0" type="hidden" runat="server" /> <input id="__SAVESCROLLX" value="0" type="hidden" runat="server" /> <script type="text/javascript"> </script>

Into your page register this control: Before end your form put: To the head section of page put this conditionally comment meta-tag for quick page transition(in IE6+ will create very smooth postback, in other will be ignored because they dont support transition with 0.1 second to play transition) This easy script work in IE4+, NN6+,Mozilla and maybe last version of Opera (others I didnt try). Try it, enjoy it or send me bug report :)

Pavel Ružicka, MCPD
Prague - Czech Republic
http://pavel-ruzicka.net/

Reply

lindie2003

None

0 Points

14 Posts

Re: Retain scroll position after postback

Sep 25, 2003 10:11 AM|lindie2003|LINK

I copied you code but it doesn't work on mine. Is it "pnlNewItem" a datagrid name? Can you help me with me? Thanks

Reply

kexik_white

None

0 Points

48 Posts

Re: Retain scroll position after postback

Sep 27, 2003 05:38 AM|kexik_white|LINK

In my DataGrid I use Panel for adding a new row - position this panel is absolute and controlled by my javascript. You can comment two rows handling this panel position:

// if (document.getElementById('pnlNewItem') != null ) // document.getElementById('pnlNewItem').style.top = sScroll + 'px';

Did you get some error message?

Pavel Ružicka, MCPD
Prague - Czech Republic
http://pavel-ruzicka.net/

Reply

lindie2003

None

0 Points

14 Posts

Re: Retain scroll position after postback

Sep 29, 2003 08:11 AM|lindie2003|LINK

Thank you for your response! I don't get any error but I don't use Panel. I use Div so what I suppose to change to make it working. If I have to use Panel what is the code for it? Because I never using Panel.

Reply

lindie2003

None

0 Points

14 Posts

Re: Retain scroll position after postback

Sep 29, 2003 08:38 AM|lindie2003|LINK

I use Panel now but It still doesn't work.

Reply

dauger

Member

30 Points

99 Posts

Re: Retain scroll position after postback

Oct 30, 2003 12:30 PM|dauger|LINK

Strange. I can get this control working with IE and Netscape 7.0, but it doesn't work with either Mozilla 1.4 or Firebird .7 . Any ideas?

Reply

gpanou

None

0 Points

3 Posts

Re: Retain scroll position after postback

Nov 27, 2003 09:02 AM|gpanou|LINK

Thanks a lot about the code it is the best of all i searched in the net, but i noticed something strange and i donot know how to resolve it. When i use To make the post back effect more smooth the page is not refreshed completely, i have to scroll the page manually for some cntrols to be refreshed (like the drop down list box box). The value is in the drop down list box but it is invinsible. I think you know what i mean. Please tell me what to do...... Thanks again ....

Reply

baek4cho

None

0 Points

1 Post

Re: Retain scroll position after postback

Nov 28, 2003 09:58 PM|baek4cho|LINK

THANK YOU!!!!!!!!!!!!!!!!!!!!!!!

Reply

kexik_white

None

0 Points

48 Posts

Re: Retain scroll position after postback

Nov 29, 2003 04:05 PM|kexik_white|LINK

You probably have some problem with your CSS definition, try to deactivate your CSS or step by step remove styles - then you will find, where the problem is.

Pavel Ružicka, MCPD
Prague - Czech Republic
http://pavel-ruzicka.net/

Reply

gpanou

None

0 Points

3 Posts

How can i deactivate my CSS definition?

Dec 02, 2003 04:46 AM|gpanou|LINK

Because i am not currently using any css to change the look of my app i think i can deactivate my CSS definitions. Can you tell me how to do this? Thanks again for the help

Reply

eron19

None

0 Points

294 Posts

Re: How can i deactivate my CSS definition?

Mar 17, 2004 02:12 AM|eron19|LINK

Doesnt work for me........unless i put this Response.Write("
") in the page load method, but that messes up my css. do u know why? btw i made minor changes to ur code to convert it to VB. i will send it to u if u want

"Only when we are no longer afraid do we begin to live" -D. Thompson // f bush.

-----------

"No man succeeds without a good woman behind him. Wife or mother, if it is both, he is twice blessed indeed." -Harold MacMillan

Reply

bt429

Member

41 Points

275 Posts

Re: Retain scroll position after postback

Apr 05, 2004 09:04 AM|bt429|LINK

kexik_white (or anyone for that matter), Can you tell me if this would work for a panel with a DataList inside? I have a scrolling panel with a DataList inside and haven't been able to get this to work. I have SmartNavigation on the page and I think that's all that is saving my scroll position at this time. I am also using Andy Smith's ScrollingPanel (http://metabuilders.com/Tools/ScrollingPanel.aspx) but that wasn't working for me. When a user clicks on an item in the panel's DataList, the scroll position is saved, but when a person clicks a button outside the panel the scroll position is lost. I'm using IE 6. Any ideas??? Thanks.

Reply

bt429

Member

41 Points

275 Posts

Re: Retain scroll position after postback

Apr 08, 2004 11:20 AM|bt429|LINK

I decided to go with this solution: http://authors.aspalliance.com/JimRoss/Articles/MaintainScrollPos.aspx. I used a div instead of the MetaBuilders Scrolling Panel (which is also a good solution if you have 1.1, but I am on 1.0 still....). Unfortunately the solution I'm going with only works with IE. I imagine your solution would work across browsers - I'll see if I can find a way to get it to work...

Reply

JimRoss [MVP...

Member

46 Points

1987 Posts

Re: Retain scroll position after postback

Apr 08, 2004 11:23 AM|JimRoss [MVP]|LINK

I think I mentioned in the article that it was an IE-specific solution. As I recall, I was using an htc (DHTML Behavior). I'm sure the method could be adapted to a more generic javascript technique.

Jim
MS MVP ASP.NET [VC++/MFC emeritus]
Old Dog Learns New Tricks
Preferred programming language: cuneiform on clay tablets

Reply

bt429

Member

41 Points

275 Posts

Re: Retain scroll position after postback

Apr 08, 2004 12:20 PM|bt429|LINK

Jim, Thanks for the quick response - I'll look into that further. I'm not too familiar with DHTML but this gets me in the right direction. I certainly didn't mean that your solution was not good, as it is the one I went with!

Reply

JimRoss [MVP...

Member

46 Points

1987 Posts

Re: Retain scroll position after postback

Apr 08, 2004 01:20 PM|JimRoss [MVP]|LINK

No problem at all, I didn't take it that way. I was mainly speaking to the "lurkers" on the thread.

Jim
MS MVP ASP.NET [VC++/MFC emeritus]
Old Dog Learns New Tricks
Preferred programming language: cuneiform on clay tablets

Reply

sampriti

None

0 Points

9 Posts

Re: Retain scroll position after postback

Apr 14, 2004 05:29 PM|sampriti|LINK

Thank you!!!!!! I used this in my application and it works great.

Reply

ruben_quinon...

None

0 Points

1 Post

Re: Retain scroll position after postback

Jun 03, 2006 06:57 PM|ruben_quinones|LINK

It's better to use SmartNavigation="true"...

<%@ Page Language="vb" SmartNavigation="true" %>

[:D]

Reply

abjung7245

None

0 Points

1 Post

Re: Retain scroll position after postback

Aug 03, 2006 09:55 AM|abjung7245|LINK

When I ran your user control code, I received java script error for object not found and it appears to be of the 'ltr.Text' objects as below. Are these text boxes we need to put on page? Thank you.

ltrSF.Text = __SAVESCROLLY.ClientID;

   ltrSFX.Text = __SAVESCROLLX.ClientID;

   ltrRF.Text = __SAVESCROLLY.ClientID;

   ltrRFX.Text = __SAVESCROLLX.ClientID;

Reply

cjLopez

Member

3 Points

32 Posts

Re: Retain scroll position after postback

Sep 04, 2007 05:58 PM|cjLopez|LINK

Yo dude, pretty nice trick, i was looking how to avoid that the post back messed around with my page scroll and this did the trick, and pretty simple to implement, thank dude

Reply

Kiran_2007

None

0 Points

1 Post

Re: Retain scroll position after postback

Dec 19, 2007 10:27 AM|Kiran_2007|LINK

It works great !! but after I included the savescroll.js file on my asp.net page, menu on the page is not working please advise.

JS Code for to build the menu on the page

*************************************************************************************************************

function StartUp()

{

StartList();

ContentSize();

}

//From http://www.alistapart.com [Suckerfish menu]

StartList = function() {if (document.all&&document.getElementById) {

navRoot = document.getElementById("nav");

for (i=0; i<navRoot.childNodes.length; i++) {

node = navRoot.childNodes[i];

if (node.nodeName=="LI") {

node.onmouseover=function() {this.className+=" over";

}

node.onmouseout=function() {

this.className=this.className.replace(" over", "");

}

//From: http://www.howtocreate.co.uk/tutorials/index.php?tut=0&part=16

function ContentSize()

{

var myWidth = 0, myHeight = 0;if( typeof( window.innerWidth ) == 'number' )

{

//Non-IE

myWidth = window.innerWidth;

myHeight = window.innerHeight;

} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {

//IE 6+ in 'standards compliant mode'

myWidth = document.documentElement.clientWidth;

myHeight = document.documentElement.clientHeight;

} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {

//IE 4 compatible

myWidth = document.body.clientWidth;

myHeight = document.body.clientHeight;

} else {

//Everything else

myWidth = document.body.clientWidth;

myHeight = document.body.clientHeight;

}

var mySizeH = 0;

var mySizeW = 0;

var minSizeH = 99;

var minSizeW = 10;

if ( (myHeight - minSizeH) <= 0 )

{

mySizeH = 1;

document.getElementById('content').style.display = 'none';

} else {

mySizeH = ( myHeight - minSizeH );

document.getElementById('content').style.display = 'block';

}

if ( (myWidth - minSizeW) <= 0 )

{

mySizeW = 1;

document.getElementById('content').style.display = 'none';

} else {

mySizeW = ( myWidth - minSizeW );

document.getElementById('content').style.display = 'block';

}

document.getElementById('content').style.height = mySizeH;

//document.getElementById('content').style.width = mySizeW;

}

window.onresize = ContentSize;

window.onload=StartUp;

*************************************************************************************************************

Thank you,

K

Reply

jeeshenlee

Member

4 Points

26 Posts

Re: Retain scroll position after postback

Jun 01, 2009 09:43 PM|jeeshenlee|LINK

Hi All,

I used a simple trick in my DataGrid_SelectedIndexChanged to maintain the visibility of the selected item after postback. Here the trick (Setting the focus of the selected record/row)

Protected Sub gvNew_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles gvNew.SelectedIndexChanged
        Dim selectedIndex As Integer
        selectedIndex = gvNew.SelectedIndex
        gvNew.Rows(selectedIndex).Focus()


        dvRoom.PageIndex = selectedIndex
        dvRoom.DataBind()
    End Sub

It's not as neat as the javascript solution, but well, it works on all browser. :)

Thanks.

Regards,

JeeShen Lee

Reply

Naom

All-Star

22057 Points

7780 Posts

Re: Retain scroll position after postback

Jun 12, 2009 03:21 PM|Naom|LINK

The last solution is for Grids, I think (haven't checked too thoroughly) the original problem was in general about how to maintain the position.

I actually had the same issue myself - don't remember right now the thread.

Beware of bugs in the above code; I have only proved it correct, not tried it.
(Donald Knuth)

Visit my blog

Microsoft Community Contributor 2011-12