CODEWITHSUNDEEP
javascripthtmlajaxscroll
user2301881
user2301881

Reputation: 350

How can I keep scoll position on dynamic refresh div?

I'm searching a few hours ago for this, I can't finr anywhere.

I use simple Jquery script to refresh a div. I want to see my PHP output in that div. 

$script = " 

<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js\"></script>   
    <script type=\"text/javascript\">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug.  without it, IE will only load the first number and will never refresh
setInterval(function() {
$('#uziRefresh').load('http://mypage/refresh.php?a_a=".$kinek[1]."');
}, 6000); // the \"3000\" here refers to the time to refresh the div.  it is in milliseconds. 
});
// ]]></script>

";

My problem is. When it refreshing it go to top position of div scroll. I would like to keep the current position, becouse my users my would like to read all content of the div. I would like to make a simple chat application. But it's bad cos always go to top.

How can I solve this? Anyone has a solution?

Upvotes: 1

Views: 1966

Answers (2)

user2301881
user2301881

Reputation: 350

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
<script type="text/javascript">


$(document).ready(function() {

    $.ajaxSetup({
        cache: false
    });
setInterval(function() {
var div = document.getElementById("uzidoboz").scrollTop; 
$('#uziRefresh').load('/modulok/belso_levelezes/refresh.php?a_a=<?php print($kinek[1])?>', function(){ 
$("div.uzidoboz").scrollTop(div);
})
}, 6000);
});
</script>

This is my full solution. I'm sorry, I missed some div names, but with correct names the last solution not yet worked. This work fine. First I get the current scrolltop, reload the div, and set the scrolltop.

It runs in every 6000 millisecond. It's simple now and work. I have my divs. uzidoboz div have got overflow. My content is in that. But I load it all to the uziRefresh div...

Upvotes: 1

tusharmath
tusharmath

Reputation: 10992

Check this solution. I have removed your comments sorry!.

$(document).ready(function() {

    $.ajaxSetup({
        cache: false
    });

    var updateScrollPosition = function() {
        var div = $('#uziRefresh');
        div.scrollTop(div.height());
    };


    setInterval(function() {
        $('#uziRefresh').load('http://mypage/refresh.php?a_a=".$kinek[1]."', updateScrollPosition);
    }, 6000);
});

To be precise use this -

$script = " 

<script type=\"text/javascript\">// <![CDATA[

$(document).ready(function() {

$.ajaxSetup({
    cache: false
});

var updateScrollPosition = function() {
    var div = $('#uziRefresh');
    div.scrollTop(div.height());
};


setInterval(function() {
    $('#uziRefresh').load('http://mypage/refresh.php?a_a=".$kinek[1]."',

updateScrollPosition); }, 6000); // ]]>

";

Upvotes: 0

Related Questions