Remember scrolled position
| From: | Lars Espelid | Date: | Tue, 04 Mar 2003 14:10:01 +0000 |
| Subject: | Remember scrolled position | ||
| Groups: | php.general | ||
| Request: | Send a blank email to php-general+get-138109@lists.php.net to get a copy of this message | ||
I'm trying to implement the following functionality into the file test.php:
When I scroll down the page and then hit a button, the page should remember
the scrolled position, refresh the page and then scroll down to the
remembered position. If I knew how many form-schemas there would be on the
page, this would be easy. But I don't so then I need a way to give each form
a unike name and this name I need to use in the function hentKoordinat().
But when hentKoordinat is executed the variable containing the form-name is
not yet set.
When someone hits a button in one of the form-schemas the following
happens:
1) hentKoordinat() is executed. The form-schemas hidden field named yKoord
gets the value: the amunt of pixels scrolled in y-direction. This doesn't
work because $teller is not yet set (needed to specify which form is
submitted).
2)the page is refreshed and $teller is set to a number whisch says which
form is submitted and $yKoord is set to "the amunt of pixels scrolled in
y-direction".
3)onload in body calls the function mScroll which scrolls the page to where
it was when someone clicked the button.
Hoping someone can help, maybe I need to do this a totally different way?
Thanks!
Lars
Tried to explain the code in test.php:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript">
<!--
function getPageScroll(){
//this function returns scrollX and scrollY as probertys of
getPageScroll. ScrollX and scrollY
//contains the amount of pixels the page has been scrolled in x and y
direction.
var X, Y;
if(typeof window.pageXOffset == 'number'){
X = window.pageXOffset;
Y = window.pageYOffset;
}else{
if((window.document.compatMode)&&
(window.document.compatMode == 'CSS1Compat')){
X = window.document.documentElement.scrollLeft;
Y = window.document.documentElement.scrollTop;
}else{
X = window.document.body.scrollLeft;
Y = window.document.body.scrollTop;
}
}
return {scrollX:X,scrollY:Y};
}
function hentKoordinat() {
// this function uses getPageScroll() to find pixels scrolled in y-direction
and inserts this value into the "hidden-form-value" named yKoord in the form
schema which holds the button clicked (form<?php echo $teller; ?>).
//*****Here the problem arises. The first time you click a button, $teller
is not set. This method is executed before the page is refreshed. The value
$teller is set when the page is refreshed.*****
document.form<?php echo $teller; ?>.yKoord.value = getPageScroll().scrollY
}
function mScroll() {
//this function scrolls the page so many pixels that $yKoord holds in the
y-direction.
//to avoid error messages I set $yKoord like 0 if it is empty (scrolls
nothing).
<?php if(!isset($yKoord)) $yKoord=0; ?>
<?php if($yKoord=='') $yKoord=0; ?>
self.scrollTo(0,<?php echo $yKoord; ?>)
}
//-->
</script>
</head>
<body onLoad="mScroll()">
<?php echo "<p> Ykoordinat: " . $yKoord . "<p>";
echo "Teller: " . $teller;
for($i=0; $i<150; $i++) {
//prints 150 line breaks so that the page gets scrollable (the content does
not fit the monitor-area)
echo '<br>';
}
for($teller=0; $teller<2; $teller++) {
//prints two form-schemas. Later on I will print a varying amount of
form-schemas (depends on the amunt of
//data in a MySQL-table)
//The form name includes $teller so that each form-schema gets a unike name
and I know which
//$yKoord to update in hentKoordinat(). $teller and $yKoord is passed on as
variables when the page refreshes,
//so that I know which form's button1 is submitted and how many pixels there
are to scroll when onload="mScroll()"
// in body is called (uses $yKoord).
?>
<form action="test.php" name="form<?php echo $teller; ?>"
onsubmit="return
hentKoordinat()">
<input type="hidden" name="teller" value="<?php echo $teller;
?>">
<input type="hidden" name="yKoord">
<input name="button1" type="submit" value="Send input">
</form>
<?php $teller++; ?>
<?php
} //for($teller=0; $i<2; $i++) {
?>
</body>
</html>