We Keep Coding

Automatic HTML page refresh preserving scroll position, working with anchors

I have a web service generating a html and I need it to be automatically refreshed in the browser every 10 seconds. I've done it simply with <meta http-equiv="refresh" content="10"> and it worked fine, preserving the scroll position (at least in Firefox).
Then I added some internal linking within the page, using e.g. Foo to link to <a name="foo"/>. After clicking such a link, I jump to the appropriate section and #foo is appended to the URL in the address bar, as expected. But if the automatic refresh happens now, #foo disappears from the address bar and the page scrolls to the top after refresh.
Is there some way to keep automatically refreshing the page, keeping the scroll position and being able to use internal linking without breaking it all?
UPDATE
I've tried to change the meta to <meta http-equiv="refresh" content="10;url=page.html#foo"> (without Javascript for now, just directly this value to see if it works). I open the page as page.html, it refreshes once as page.html#foo and then it stops. Why doesn't it keep refreshing?

It's unfortunate that the whole page needs to be reloaded, and you're not able to just do an AJAX call to get the data.
Since your page needs to be refreshed every time, you could consider storing the scroll position in local storage and reading it when the page loads again. That code might look something like this:
document.addEventListener("DOMContentLoaded", function(event) {
var scrollpos = localStorage.getItem('scrollpos');
if (scrollpos) window.scrollTo(0, scrollpos);
});
window.onbeforeunload = function(e) {
localStorage.setItem('scrollpos', window.scrollY);
};
If you would like to refresh the page and keep the anchor link, you can use JavaScript instead of a meta refresh tag:
setTimeout(function() {
location.reload();
},10000);

You could try client side routing.
Eg youresite.com/path#section2
"#section2" refers to an id of your DOM element.
When ever you refresh this URL it should land you to id section2 of your DOM.
In your document.ready you could first parse the url using window.location.href and scroll to the found id.
I think this may solve your issue. :)

Obtain scroll position remembered by browser with JavaScript before loading the complete page

I want to know the visible vertical section of a webpage as early as possible while loading the page. Often, this goes from 0 to $(window).height(). But if the user has already scrolled, and then reloads the page or comes back to it, many browsers will display the page at the previous scroll position.
Is there a way to determine the scroll position remembered by the browser before the complete page is loaded? $(window).scrollTop() does only work after loading the complete page (tested in Firefox20.0).
I would be happy with a solution that works at least in the common and good browsers.

You need to set cookies.Create cookie with variable name of ur choice.Before loading the page set the cookie value.While loading the page take value from the cookie and give it as a parameter to scrooltop function.

Javascript refresh page automatically

I have an HTML page. Everytime I add new content to the page, the user needs to refresh the page in order to see the new content.
What I want to do is to refresh the page automatically for them regardless of browser.
I tried putting the following but the screen flickers so many times that it does not prove to be useful:
<script type="text/javascript">
location.reload();
</script>

The JavaScript you show there does indeed reload the page. Every single time the page loads, as soon as it reaches that JavaScript. The flickering you're seeing is probably the fact that it in an infinite cycle of reloading. What you need to do is perform an AJAX request to the server to find out if there is new content, and then reload the page if there is. Or, alternatively, use the AJAX to actually update the new content on the page.

Getting different browser behavior when reloading from browser reload button and reloading from javascript

I'm having a performance issue on my web application when the user hits the "refresh" button on my webpages. The behavior is shown below:
$("#reloadbutton").click(function(){
location.reload();
});
It reloads all of the CSS, JS, and image files that the page needs, as it should. The only problem is that it does this for every other page request, such as clicking on a link to go to another page.
If I just hit the F5 button, it'll reload all of the CSS, JS, and image files, and then if I go to another page, it won't try and reload those files once I go to that other page. But if I hit the reload button on the page itself, it'll reload all of those files on every page request, and I don't want it to do that.
So I have a two part question:
How can I refresh without having the browser fetch all of the CSS, JS, and image files (because I want to minimize the time it takes to refresh each page)?
Why am I getting different behavior when using location.reload() as opposed to using the browser's own reload button?
Note: I'm currently using the latest version of Firefox

use the
$("#reloadbutton").live("click",function(){
location.reload();
});
and you can do this by making ajax call after every some second

$("#reloadbutton").click(function(){
location.reload(false);
});
As per the Mozilla developer network, location.reload(); can take a parameter. When it is true, location.reload(true);, it causes the page to always be reloaded from the server. If it is false, location.reload(false);, or not specified, the browser may reload the page from its cache.

F5 not fully refreshing my page

I've got a pretty complex webpage which uses alot of Ajax and Javascript. My problem is that this Javascript manipulates the background-picture in a div (scrolling it to the sides). When I hit F5 (mostly in FF) this only causes a "halfway" refresh. The content refreshes, but the background in the div stays in the same position. This causes problems because the offset is calculated wrong (the script thinks the background is at starting-position, but actually, it's moved).
Is there any way of forcing a full refresh to get rid of this problem? I am using jQuery for my Javascript. A workaround would be to check the offset at load, but this would be a pain in the ass to implement at this point.
Any ideas?
EDIT: The picture causing this problem is not loaded using javascript or ajax. It's pure, static html.

Try to use "Ctrl + F5", it will force your browser to reload every content in the page.

Why don't you just reset the state of the background to it's default when the page loads?
Is there a reason why that wouldn't work?
$(document).ready(function(){
// Set whatever value you're changing to make the background move to it's default
$('.changing-background').css({
'left' : ?px,
'background-position' : ?px ?px
// Whatever you're using
})
})

Add a unique string to the end of your javascript file path e.g. test.js?nocache=99999999. This will make the browser think it's a non-cached file and download a new copy every time.
It's meaning more data transfer, but unless you want to implement a client side fix I don't think there's much choice here.

If you just pressed F5 it will load the contents from the cache.So use " Ctrl+F5 " .It refreshes the browser cache also at the time of reload.

In Mozilla Firefox, Ctrl+Shift+P starts private browsing and nothing gets cached. or you can set cache:false to your ajax requests like
$.ajaxSetup({
cache:false
});
add no-cache
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
further information can be found here