Solved

Remember vertical scroll position after redirect

Posted on 2006-10-31
19
1,199 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
  • 8
  • 6
  • 3
  • +2
19 Comments
 
LVL 4

Expert Comment

by:carlmahon
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 1

Author Comment

by:webmasterbiz
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Note--I don't know if the history.go(0) scheme will work in FF, never tried it.
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
Comment Utility
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
Comment Utility
What code do you have for that link, maybe the syntax is slightly off
0
 
LVL 1

Author Comment

by:webmasterbiz
Comment Utility
<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
Comment Utility
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
Comment Utility
Will need to put apostrophes around <%=rsmenu("pidRoot")%> in the link if its a string...
0
 
LVL 1

Author Comment

by:webmasterbiz
Comment Utility
... 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
Comment Utility
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 500 total points
Comment Utility
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
Comment Utility
Works a treat.

Thanks !!
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Have you ever needed to get an ASP script to wait for a while? I have, just to let something else happen. Or in my case, to allow other stuff to happen while I was murdering my MySQL database with an update. The Original Issue This was written…
This demonstration started out as a follow up to some recently posted questions on the subject of logging in: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28634665.html and http://www.experts-exchange.com/Programming/…
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.

743 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now