• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1307
  • Last Modified:

Remember vertical scroll position after redirect

I'm developing a dynamic photo gallery.

The admin section features a listings page featuring a table listing rows and rows of thumbnails. Next to these thumbnails, there are icons for editing, deleting and sorting each image.

The icons are basically page links that forward the picture's Id number to other asp pages.

In this example, there is a button next to the thumbnail that moves the image's sorting position up by one.

<a href="move_up.asp?id=<%=rs("id")%>"><img src="images/arrow_up.gif" border="0"></a>

When I click the UP button, I'm taken to move_up.asp where after the script it executed I'm redirected back to the image listings page.

The problem is that there might be at least 50 thumbnails in a list making the page very long and if I want to keep moving a particular image up that is near the bottom, I have to scroll down for ages in order to find it each time.

I need a way to capture the page's vertical scroll position and either save it as a cookie, session variable or preferably send it as a parameter along with the querystring to the move_up.asp page, bring it back again when I'm redirected back to the listing page to be used to take me back to the position of the page I was at before.

I'm using classic ASP so I don't have the luxury of SmartNavigation.

Thanks in advance.
Nico

.
0
webmasterbiz
Asked:
webmasterbiz
  • 8
  • 6
  • 3
  • +2
1 Solution
 
carlmahonCommented:
You could try anchors. When Move_Up.asp is called, pass an extra value that is the current image location.

<a name="<%= SomeCounterValue – 1 %>"></a>
<a href="move_up.asp?id=<%=rs("id")%>&loc=<%= SomeCounterValue %>"><img src="images/arrow_up.gif" border="0"></a>

SomeCounterValue is any value that can be unique and populated while building the display page.

When move_up.asp returns the user to the original page include the loc

Somepage.asp#locValue

~Carl
0
 
webmasterbizAuthor Commented:
I have that system already but my client doesn't like it.

He doesn't like the way that the page doesn't return to the same position.
I even returned the anchor counter to the listings page minus 5 so that the image wasn't right at the top of the page, more closer to the middle, but that still wasn't good enough.

He's insistent.

I need the javascript version.

I know I posted this in the ASP section, but I need a solution that is ASP/VBscript friendly.

Thanks anyway Carl.
0
 
jmundsackCommented:
I would recommend that you execute the move_up.asp page into a hidden iframe, trap the onreadystatechange event for the iframe to see when the page is complete, and then execute a history.go(0) statement on the current page.  The history.go(0) will hold the scroll position after reloading the page.

For instance (sample, untested):

<a name="<%= SomeCounterValue – 1 %>"></a>
<a target="somehiddeniframe" href="move_up.asp?id=<%=rs("id")%>&loc=<%= SomeCounterValue %>"><img src="images/arrow_up.gif" border="0"></a>

Then in move_up.asp, don't redirect back to the main page, simply output an empty HTML page so that the onreadystatechange event fires.  Then you'll have Javascript code like this:

document.onreadystatechange=fnStartInit;
function fnStartInit()
{
   if (document.readyState=="complete")
   {
      history.go(0);
   }
}

Hope I'm not making you spin your wheels, but I *think* this will work.  :)
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
webmasterbizAuthor Commented:
I think I got the gist of that, but before I give it a shot, I need to confirm a few things.

1. how do you hide an iframe? - do I just give it zero dimensions?
2. do I place the javascript code in the listings page or the move_up.asp page?
3. I'm assuming you added the anchor and the loc parameter because I said it was like that before.  I've since removed them, do I need to put them back?

It does sound promising though.

Nico


.
0
 
nschaferCommented:
Hi webmasterbiz,

I had a similar requirement some time ago.  Here's a link to the question I asked at the time.  This is not 100% the same as what you are doing, but a similar method should work for you.  If this looks like something you might like to work with, just let me know and I'd be happy to work out the changes with you.

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21747437.html

Neal.
0
 
GaryCommented:
Grab the position prior posting the page and hold in a hidden field or append to the querystring...


function getPos(){
    document.getElementById("scrollpos").value = document.body.scrollTop;
}


Then in the body onload event call this function

function moveposition(){
     window.scrollBy(0,<%=request("scrollpos")%>);
}


Hope thats clear enough
0
 
jmundsackCommented:
1. how do you hide an iframe? - do I just give it zero dimensions?

<iframe ... style="display: none;">

2. do I place the javascript code in the listings page or the move_up.asp page?

The Javascript code would go in the header of the listings page.  Other than your ASP code to update the ordinal positions of the images, move_up.asp should only output a basic, empty HTML page (it may not even need that)--the idea is you just want to know when it's done with the ASP stuff.

3. I'm assuming you added the anchor and the loc parameter because I said it was like that before.  I've since removed them, do I need to put them back?

In the solution I gave, there is no need for the anchors.

Hope it works!
0
 
webmasterbizAuthor Commented:
Gary

How would I grab the vertical position and append it to my querystring?

This has to work in FF and IE.

Thanks

Nico.
0
 
jmundsackCommented:
Note--I don't know if the history.go(0) scheme will work in FF, never tried it.
0
 
GaryCommented:
On your link

<a href="javascript:location.href='move_up.asp?id=<%=rs("id")%>&scrollpos=' + document.body.scrollTop"><img src="images/arrow_up.gif" border="0"></a>


Then your body tag like this

<body onload="javascript:window.scrollBy(0,<%=request("scrollpos")%>)">
0
 
webmasterbizAuthor Commented:
jmundsack :

I tried your method.

FF - It worked fine except it wouldn't refresh.  If I manually refreshed, the asp action completed correctly and the page position stayed put.

EE - When I loaded the page, it was caught in a page refresh loop.

Shame, I liked where that one was going.

=================

GaryC123 :

I couldn't get the link to work in either FF or IE.
Good news is if I manually bolt the querystring "?scrollpos=350" into the URL box, it takes me to the correct position in the page.



nearly there!

0
 
GaryCommented:
What code do you have for that link, maybe the syntax is slightly off
0
 
webmasterbizAuthor Commented:
<a href="javascript:location.href='page_up.asp?id=<%=menuid%>&r=<%=rsmenu("pidRoot")%>&scrollpos=' + document.body.scrollTop" title="Move Up"><img src="images/up.gif" width="20" height="20" border="0" title="Move Up" alt="Move Up">
0
 
GaryCommented:
Working fine my end.  Is there nothing getting in the scrollpos value at all?  Try this variation, add in the js routine and amend the link tag

<a href="javascript:domove(<%=menuid%>,<%=rsmenu("pidRoot")%>)" title="Move Up"><img src="images/up.gif" width="20" height="20" border="0" title="Move Up" alt="Move Up">

<script language=javascript>
function domove(menuid,pidRoot){
alert(document.body.scrollTop);
location.href="page_up.asp?id=" + menuid + "&r=" + pidRoot + "&scrollpos=" + document.body.scrollTop;
}
</script>
0
 
GaryCommented:
Will need to put apostrophes around <%=rsmenu("pidRoot")%> in the link if its a string...
0
 
webmasterbizAuthor Commented:
... and shouldn't we use "window.pageYOffset" for FF?

I found the following cross browser function here  http://www.howtocreate.co.uk/tutorials/javascript/browserwindow that grabs your scroll position, maybe we could use some of that to make a function.

function getScrollXY() {
  var scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
  }
  return [ scrOfY ];
}
0
 
webmasterbizAuthor Commented:
no Gary, the alert's returning a zero in both FF and IE.

I switched off the response.redirect in page_up.asp so I could see the querystring in the URL.

it says &scrollpos=0

btw, I scrolled with both the mouse wheel and by dragging the scroll bar.
0
 
GaryCommented:
Ok, keep the link as in my previous post and use this js routine
<script language=javascript>
function domove(menuid,pidRoot) {
  var scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
  }
  alert(scrOfY);
location.href="page_up.asp?id=" + menuid + "&r=" + pidRoot + "&scrollpos=" + scrOfY;


}

</script>
0
 
webmasterbizAuthor Commented:
Works a treat.

Thanks !!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 8
  • 6
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now