?
Solved

Remember vertical scroll position after redirect

Posted on 2006-10-31
19
Medium Priority
?
1,270 Views
Last Modified: 2010-05-18
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
Comment
Question by:webmasterbiz
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 6
  • 3
  • +2
19 Comments
 
LVL 4

Expert Comment

by:carlmahon
ID: 17843505
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
 
LVL 1

Author Comment

by:webmasterbiz
ID: 17843712
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
 
LVL 13

Expert Comment

by:jmundsack
ID: 17843794
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 1

Author Comment

by:webmasterbiz
ID: 17843917
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
 
LVL 19

Expert Comment

by:nschafer
ID: 17843920
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
 
LVL 58

Expert Comment

by:Gary
ID: 17843937
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
 
LVL 13

Expert Comment

by:jmundsack
ID: 17843967
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
 
LVL 1

Author Comment

by:webmasterbiz
ID: 17843977
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
 
LVL 13

Expert Comment

by:jmundsack
ID: 17843985
Note--I don't know if the history.go(0) scheme will work in FF, never tried it.
0
 
LVL 58

Expert Comment

by:Gary
ID: 17844060
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
 
LVL 1

Author Comment

by:webmasterbiz
ID: 17845350
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
 
LVL 58

Expert Comment

by:Gary
ID: 17845416
What code do you have for that link, maybe the syntax is slightly off
0
 
LVL 1

Author Comment

by:webmasterbiz
ID: 17845442
<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
 
LVL 58

Expert Comment

by:Gary
ID: 17845538
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
 
LVL 58

Expert Comment

by:Gary
ID: 17845566
Will need to put apostrophes around <%=rsmenu("pidRoot")%> in the link if its a string...
0
 
LVL 1

Author Comment

by:webmasterbiz
ID: 17845583
... 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
 
LVL 1

Author Comment

by:webmasterbiz
ID: 17845655
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
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 17845716
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
 
LVL 1

Author Comment

by:webmasterbiz
ID: 17845817
Works a treat.

Thanks !!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I recently decide that I needed a way to make my pages scream on the net.   While searching around how I can accomplish this I stumbled across a great article that stated "minimize the server requests." I got to thinking, hey, I use more than one…
I was asked about the differences between classic ASP and ASP.NET, so let me put them down here, for reference: Let's make the introductions... Classic ASP was launched by Microsoft in 1998 and dynamically generate web pages upon user interact…
Monitoring a network: how to monitor network services and why? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the philosophy behind service monitoring and why a handshake validation is critical in network monitoring. Software utilized …
Sometimes it takes a new vantage point, apart from our everyday security practices, to truly see our Active Directory (AD) vulnerabilities. We get used to implementing the same techniques and checking the same areas for a breach. This pattern can re…
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question