Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
How can I save my screen position on reload?
Keeping State
In this FAQ, you will see references to a value called 'sortVal'. The only reason I'm including this is to try to make this FAQ more "real world" and put it into context. I don't do anything with the value, and only include it for the aforementioned reason. Don't get confused or bogged down in it. It's secondary to our purposes here -- which is why I comment out where you might (or might not) want to use it.
So let's draw a quick picture... you have an ASP page which displays some information in a table, and that table is sortable by clicking on any of the header cells in that table.
Problem is, when a user clicks to sort, and your page reloads itself, the page loads back up at a scroll position of 0 (the top of the page), and the continuity of your application is sort of lost right there because the user has to scroll back down and find what they were looking at. Isn't it funny what little things can just ruin a nice application?
Well, luckily, there is a property which you can use to alleviate this problem and set the page right back where you started:
and it's a client side property.
Now, for this example, I'm going to make an assumption:
The functionality of your page is built using a recursive form (one that submits to itself) and is using a "method" of post. For instance, the page in question is called 'display.asp', then your form tag would look like this:
<form name=theForm method=post action=display.asp>
One more side note before we get started... document.body.scrolltop is a strange bird. It is both a property and a method (command and query), which makes it easy to work with, but sort of confusing at the same time. No worries, though. Here's how we'll work it.
This process uses three pieces:
(1) - a hidden form variable to store and send the value
(2) - a server side ASP variable to grab the stored value
(3) - a piece of client side code (javascript) to set the value, if your server side variable has a value
So, the first thing you need to do to your page to set this up is to add this hidden form variable to the end of your form, and it looks like this:
That's the form element that will be set in order to send the value along to the next load of the page -- which you will use to move the page to the desired location.
Now, I'm going to assume again here that in order to submit your form, you're using a javascript function that is called when a user clicks something (presumably your header table cell), which sets some values and then submits your form. Here's an example:
and then your javascript is going to look like this:
Ok, next, you'll need to write some ASP that will retrieve the value from your form object like this:
And finally, if there's a value in your ASP variable, you'll need to write this bit of code that will actually do the work of moving your page to its location. Put it right before your closing body tag (</body>)
So that it won't get written to the screen unless there is a value in your ASP variable.
Now don't forget that javascript is a case sensitive language, and scrollTop is written in camelCase. It won't work any other way and you'll be cursing me if you don't get the case right!
Was that chopped up enough for you? Here's the whole thing again in a working example that you can play with -- minus the narration so you can see how the whole thing flows:
Well, I hope this is useful to someone.
happy coding everyone!
Paul Prewett
So let's draw a quick picture... you have an ASP page which displays some information in a table, and that table is sortable by clicking on any of the header cells in that table.
Problem is, when a user clicks to sort, and your page reloads itself, the page loads back up at a scroll position of 0 (the top of the page), and the continuity of your application is sort of lost right there because the user has to scroll back down and find what they were looking at. Isn't it funny what little things can just ruin a nice application?
Well, luckily, there is a property which you can use to alleviate this problem and set the page right back where you started:
Code:
document.body.scrolltopNow, for this example, I'm going to make an assumption:
The functionality of your page is built using a recursive form (one that submits to itself) and is using a "method" of post. For instance, the page in question is called 'display.asp', then your form tag would look like this:
<form name=theForm method=post action=display.asp>
One more side note before we get started... document.body.scrolltop is a strange bird. It is both a property and a method (command and query), which makes it easy to work with, but sort of confusing at the same time. No worries, though. Here's how we'll work it.
This process uses three pieces:
(1) - a hidden form variable to store and send the value
(2) - a server side ASP variable to grab the stored value
(3) - a piece of client side code (javascript) to set the value, if your server side variable has a value
So, the first thing you need to do to your page to set this up is to add this hidden form variable to the end of your form, and it looks like this:
Code:
<input type=hidden name=thePosition>Now, I'm going to assume again here that in order to submit your form, you're using a javascript function that is called when a user clicks something (presumably your header table cell), which sets some values and then submits your form. Here's an example:
Code:
<td style="cursor:hand" onClick="sortTable('sortValue');">
Code:
<script language=javascript>
function sortTable(sortVal){
//do what you need to do with the sortVal, and then
// you will set the value of your hidden element like
// this
document.theForm.thePosition.value = document.body.scrollTop;
//now, you need to submit your form:
document.theForm.submit();
}
</script>
Code:
<%
dim thePosition
thePosition = request.form("thePosition")
%>
Code:
<%
if thePosition <> "" then%>
<script language=javascript>
document.body.scrollTop = <%=thePosition%>;
</script>
<%
end if%>Now don't forget that javascript is a case sensitive language, and scrollTop is written in camelCase. It won't work any other way and you'll be cursing me if you don't get the case right!
Was that chopped up enough for you? Here's the whole thing again in a working example that you can play with -- minus the narration so you can see how the whole thing flows:
Code:
<%@language=vbscript%>
<%option explicit%>
<%
dim thePosition
thePosition = request.form("thePosition")
'Here's where you might want to grab the 'sortVal' --
' assuming you assigned it to some other hidden form
' variable, you could grab it here and tack it onto the
' end of your SQL Statement that you use to grab your
' data from the db. Put it in your ORDER BY clause to
' resort your data by the desired criteria. And if you
' really want to get fancy, keep a sort direction stored
' too -- so that if they click the same cell, it sorts in
' the opposite direction. But I digress.
%>
<HTML>
<HEAD>
<title>display.asp</title>
<script language=javascript>
function sortTable(sortVal){
//do your thing with sortVal
// this will differ depending on the app
document.theForm.thePosition.value = document.body.scrollTop;
document.theForm.submit();
}
</script>
</HEAD>
<BODY>
<form name=theForm method=post action=display.asp>
<table cellpadding=10 border=1>
<tr>
<td style="cursor:hand" onClick="sortTable('sortValue1');" nowrap bgcolor=lightblue>
Header 1
</td>
</tr><tr>
<td>
Position 1
</td>
</tr><tr>
<td style="cursor:hand" onClick="sortTable('sortValue2');" nowrap bgcolor=lightblue>
Header 2
</td>
</tr><tr>
<td>
Position 2
</td>
</tr><tr>
<td style="cursor:hand" onClick="sortTable('sortValue3');" nowrap bgcolor=lightblue>
Header 3
</td>
</tr><tr>
<td>
Position 3
</td>
</tr><tr>
<td style="cursor:hand" onClick="sortTable('sortValue4');" nowrap bgcolor=lightblue>
Header 4
</td>
</tr><tr>
<td>
Position 4
</td>
</tr><tr>
<td style="cursor:hand" onClick="sortTable('sortValue5');" nowrap bgcolor=lightblue>
Header 5
</td>
</tr><tr>
<td>
Position 5
</td>
</tr><tr>
<td style="cursor:hand" onClick="sortTable('sortValue6');" nowrap bgcolor=lightblue>
Header 6
</td>
</tr><tr>
<td>
Position 6
</td>
</tr><tr>
<td style="cursor:hand" onClick="sortTable('sortValue7');" nowrap bgcolor=lightblue>
Header 7
</td>
</tr><tr>
<td>
Position 7
</td>
</tr><tr>
<td style="cursor:hand" onClick="sortTable('sortValue8');" nowrap bgcolor=lightblue>
Header 8
</td>
</tr><tr>
<td>
Position 8
</td>
</tr><tr>
<td style="cursor:hand" onClick="sortTable('sortValue9');" nowrap bgcolor=lightblue>
Header 9
</td>
</tr><tr>
<td>
Position 9
</td>
</tr><tr>
<td style="cursor:hand" onClick="sortTable('sortValue10');" nowrap bgcolor=lightblue>
Header 10
</td>
</tr><tr>
<td>
Position 10
</td>
</tr>
</table>
<input type=hidden name=thePosition>
</form>
<%
if thePosition <> "" then%>
<script language=javascript>
document.body.scrollTop = <%=thePosition%>;
</script>
<%
end if%>
</BODY>
</HTML>happy coding everyone!
Paul Prewett