14 ตุลาคม 2552

Auto refresh webpage but maintain scroll position รีเฟรช โดยที่สกอร์อยู่ที่เดิม

Auto refresh webpage but maintain scroll position

 
Sample 01
< html>
< title>< /title>
< head>
< script language="javascript">
 
// function saves scroll position
function fScroll(val)
{
    var hidScroll = document.getElementById('hidScroll');
    hidScroll.value = val.scrollTop;
}
 
// function moves scroll position to saved value
function fScrollMove(what)
{
    var hidScroll = document.getElementById('hidScroll');
    document.getElementById(what).scrollTop = hidScroll.value;
}
< /script>
< /head>
 
< body onload="fScrollMove('div_scroll');" onunload="document.forms(0).submit()";>
< form>
< input type="text" id="hidScroll" name="a">< /br>
< div id="div_scroll" onscroll="fScroll(this);" 
style="overflow:auto;height:100px;width:100px;">
 
.. VERY LONG TEXT GOES HERE
   
< /div>
< /form>
< /body>
< /html>

 

Edited By Tanakorn inuse

                <script language="JavaScript">

                        /*Maintaining Page Scroll Position

                        By Tanakorn Kulhong

                        Amptron

                        */

            setTimeout ("refreshPage()", 1000);        

            var scrollX = 0;

            var scrollY = 0; 

            function refreshPage() {

                        //var page = window.frames['mainFrame'];            

                        var page = window.parent.frames['mainFrame'];

                        scrollX = page.document.body.scrollLeft;

                        scrollY = page.document.body.scrollTop;

                        page.document.location = "realtimedata.php";

                        setTimeout("doScroll()", 50);//Time to maintain scroll millsec

            }

 

            function doScroll() {

                        //var page = window.frames['mainFrame'];

                        var page = window.parent.frames['mainFrame'];

                        page.document.body.scrollLeft = scrollX;

                        page.document.body.scrollTop = scrollY;

                        setTimeout ("refreshPage()", 1000);

            }

</script>

 

 

 

Sample 3

 

Here is the complete PHP example:

<HTML>

<HEAD>

<TITLE>Test</TITLE>

<script>

function SaveScrollXY() {

document.Form1.ScrollX.value = document.body.scrollLeft;

document.Form1.ScrollY.value = document.body.scrollTop;

}

function ResetScrollPosition() {

var hidx, hidy;

hidx = document.Form1.ScrollX;

hidy = document.Form1.ScrollY;

if (typeof hidx != 'undefined' && typeof hidy != 'undefined') {

window.scrollTo(hidx.value, hidy.value);

}

}

</script>

</HEAD>

<BODY onload="ResetScrollPosition()">

<form name="Form1″ id="Form1″ method="post"

onsubmit="SaveScrollXY()" action="index.php">

<input name="ScrollX" id="ScrollX" type="hidden"

value="<?php echo $_REQUEST['ScrollX'] ?>" />

<input name="ScrollY" id="ScrollY" type="hidden"

value="<?php echo $_REQUEST['ScrollY'] ?>" />

<p>This is just a paragraph to make a very long page.</p>

…

<P>This is just a paragraph to make a very long page.</P>

<P>

<input name="TextBox1″ type="text"

value="<?php $v = $_REQUEST['TextBox1']; echo $v ? $v + 1 : 1 ?>"

readonly="readonly" id="TextBox1″ /></P>

<P>

<input type="submit" name="Button1″ value="Post Form"

id="Button1″ /></P>

</form>

</BODY>

</HTML>

 

เขียนโดย ที่ ไม่มีความคิดเห็น:
สมัครสมาชิก: บทความ (Atom)