Solved

Auto refresh webpage but maintain scroll position

Posted on 2008-10-16
9
3,971 Views
Last Modified: 2008-10-29
I need to automatically refresh webpage every 10 seconds, however i want to maintain scroll position. Unfortunately when using meta refresh or javascript location.reload, page returns to top.

Does anyone know how to do this with javascript or asp

James
0
Comment
Question by:jambor68
  • 4
  • 2
9 Comments
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 250 total points
ID: 22728681
jambor68,

ASP won't be any help for this.  It can't directly cause a refresh.  It can write html or Javascript but not directly work with the browser because ASP is a server language.

Does the whole page need to be refreshed?  If not then you have options like AJAX or frames/iframes.  These can be very easy to implement.

If the whole page then you can't really do it, at least not easily.  You would have to grab the scroll position, which can be with different script depending on the browser and then need to use a cookie to store the value.  It would be the only way to have the new, refreshed page know where the previous was.  Having script set this on the reload is often jerky.

Let me know if you have any questions or need more information.  Hopefully you won't need all of the content refreshed.

b0lsc0tt
0
 

Author Comment

by:jambor68
ID: 22728721
b0lsc0tt,

Unfortunately i need to refresh the whole page.

James
0
 
LVL 8

Assisted Solution

by:MatthiasVance
MatthiasVance earned 250 total points
ID: 22733662
You could host the page that you need refreshed in a parent page (by using an iframe).
I included some example code.

Another option would be to load the entire contents in PHP and then get the information you need, or you could dynamically load the page into a DIV for example using XmlHttpRequest.

Kind regards,

Matthias Vance
<!-- refresh_scroll_page.php just contains a lot of lines -->

<iframe id="page" src="refresh_scroll_page.php">

</iframe>

<script language="JavaScript">

	setTimeout ("refreshPage()", 3000);

	

	var scrollX = 0;

	var scrollY = 0;

	

	function refreshPage() {

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

		scrollX = page.document.body.scrollLeft;

		scrollY = page.document.body.scrollTop;

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

		setTimeout("doScroll()", 1000);

	}
 

	function doScroll() {

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

		page.document.body.scrollLeft = scrollX;

		page.document.body.scrollTop = scrollY;

		setTimeout ("refreshPage()", 3000);

	}

</script>

Open in new window

0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 22735268
Why the delete?  What was misunderstood?  It seems from your other response that I understood it correctly and you need the whole page refreshed.  In that case I provide the short answer ("You can't") and even described a way to "fake it" including the issues and limits to trying/doing it.  If this is right then I provided the answer.  Let me know if you have a follow up on it or if I have misread something but otherwise it seems my comment is the answer.
bol
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 22735293
MatthiasVance,
It seems like your suggestions build off what I already suggested (an iframe or AJAX).  In that case you should make sure you give credit to the expert when you use their suggestion, even if you are adding to it.
bol
0
 
LVL 8

Expert Comment

by:MatthiasVance
ID: 22735443
Sorry for forgetting to mention you in my post, b0lsc0tt. You are right.

Kind regards,

Matthias Vance
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 22833713
Thanks for the fun question.
bol
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now