php – E-notações

This is a recipe to make a PHP/HTML/JavaScript page stay still after submitting a form (pushing a submit button). The page is not actually still, but on load, it is automatically scrolled to the previous position.

I tried to explain step-by-step what is being done, but if you simply copy and paste each step in the order displayed, it will work.

After you copied/pasted the recipe to index.php, scroll down to find your go! button. Click it and you’ll see “Hello world!” and the page will not have moved. Neat, huh?

1. Put this JavaScript function on the top of the PHP page. This function writes the variables ScrollX and ScrollY to each form when called on a onsubmit action (Step 5):

<script>
function SaveScrollXY(formname) {
    formname.ScrollX.value = document.body.scrollLeft;
    formname.ScrollY.value = document.body.scrollTop;
}
</script>

2. Call a PHP function (defined in Step 8 ) that will write a JavaScript function on page load, containing ScrollX and ScrollY coordinates:

<?
enable_scrolling();
?>

3. Call a JavaScript function (defined in Step 8 by a PHP function) that will do the actual scrolling when the page is loaded, making it look like it was still:

<body onload="scroll()">

4. Print a lot of line breaks just so you can see the “stay still” effect:

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br>

5. Write a form that i. calls the JavaScript function in Step 1 to write ScrollX and ScrollY to PHP variables, ii. posts ScrollX and ScrollY, iii. redirects to the same .php file

<?
$pos=1;
echo '
<form name="SavePosition'.$pos.'" id="SavePosition'.$pos.'"
method="post" onsubmit="SaveScrollXY(SavePosition'.$pos.');" action="index.php">
 <input name="ScrollX" id="ScrollX" type="hidden" value="'.$_REQUEST['ScrollX'].'" >
 <input name="ScrollY" id="ScrollY" type="hidden" value="'.$_REQUEST['ScrollY'].'" >
 <input type="submit" title="tool tip" name="submit" value="go!">
</form>
';
?>

6. Write a hello world function that will respond to clicking go!:

<?
if( isset($_POST['submit']) ){
   echo "Hello world!";
}
?>

7. Write some extra line breaks in the bottom so you can see Hello world under the button:

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

8. Finally, write a PHP function (called in Step 2) that will i. get ScrollX and ScrollY positions through POST after form submission, ii. write a JavaScript function with these coordinates. The JavaScript function will be called by body onload (Step 3):

<?
function enable_scrolling(){
 $scrollx=$_POST['ScrollX'];
 $scrolly=$_POST['ScrollY'];
 if( !isset($scrollx) || "$scrollx" == ""){ $scrollx=0; }
 if( !isset($scrolly) || "$scrolly" == ""){ $scrolly=0; }
 echo '
<script>
function scroll(){
 window.scrollTo('.$scrollx.', '.$scrolly.');
}
</script>
';
}
?>

9. Close <body>:

</body>

E-notações

MySQL/PHP inserting escaped character

Autoscroll to a position in an HTML page using PHP/JavaScript