F5 not fully refreshing my page - javascript

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

Related

Refresh browser when div contents changed

within the <div> I embedded an <img>, sometimes I have the problem that the browser didn't reload when new img came. So I refresh the browser within a specific time intervall. But how can I force the browser automatically refresh, when <div> contents changed? I use Internet Explorer and don't want to use Ajax or Jquery. It would be great if we find a solution in Javascript or Html only.
<body onload="JavaScript:AutoRefresh(5000);">
then in <script> section I set to window.location.reload(1)
For this solution is not user-friendly.
Hope you find a better solution.
Try on change of Image?
<img src="./img.src" onchange="javascript:window.location.reload();"
Looks like this means you are changing the image on the webserver, and want the browser to automatically reload. But the problem is that the browser would not know when the image has changed, unless you reload.
You can use a http request to poll the server.
It is not clear what way the image is updated, but I'd do this:
any time the image is changed put the hash or last update timestamp under a URL on my server
use XMLHttpRequest (e.g.: https://stackoverflow.com/a/4033310/ ) to poll the hash/timestamp from the server every x seconds or minutes
compare the received data with the last known value
reload the page if it is different
This way the page would only reload, when the image has changed.

pushState on navigating off page and back

I am trying out popstate and pushState and I am wondering how to handle off page navigation.
Lets say I have an index page which generates a 'new page' when clicking something and it's loaded in with ajax. With popstate I change the url. In the page loaded are links that go outside of the current 'index' page. When somebody presses back they get a dumped state object.
How to prevent it so it actually loads the url that was given during the pushState?
Thanks in advance.
It seems you're doing something that causes the browser to replace its cached version of your index page with something else. Make sure your server sets the
Vary: Accept
header when returning the index page and later requests. See this Chromium issue for more information.
Have the link also use an anchor so the browser has a reference to fall back on.
Throw one of these at the beginning of each of the pages with a unique name attribute.
So your links would be:
Load the first page
and the page HTML would have this at the top somewhere:
<a name="first"></a>
Funny you made this post cuz I've got the exact same problem right now with this site I just started making yesterday: http://asims.fleeceitout.com - had to put arrows everywhere to keep people from gettin lost haha. I'll end up taking my own advice here but I'm too lazy for now. Plus I'm trying to see how much of the site I can make without a single <a></a> used.

Url change with animation

I found on a google website, that they realized a url-change without reloading of the whole page.
Example:
you are on www.googleio.com/first
click a button
url changes to www.googleio.com/first/second
the content "first" disappears with an transition to the left, and the content of "second" appears with another transition. the page isnt reloading.
how is this done?
someone told me, that you use the Javascript function 'Header("Location: ../second")', which is aborted after the browser types the url into the adressbar, but before he reloads. the you just let the new content appear with some other javascript. is this true? i couldnt find anything about this.
or is there another solution?
thx a lot!
This does not seem like an actual page reload, however an use of AJAX with a pushState router.
What is actually happening is that your browser is making an AJAX call to fetch the next page, and then displaying it when it has received it.
It is using the HTML5 pushState feature to update the URL.
pushState (which you can read more about here) is an HTML5 feature which is similar to the hashes (#) that sites used to use.

Breakpoint on DOM load

I am trying to use a really old page on a website I do not have control over (so I can't edit it's resources).
The problem is that it is redirecting the page via javascript (to a 'we don't support this browser' rubbish), via setting document.location before I can set any breakpoints to then debug/workaround.
Is it possible to break as soon as the DOM loads, preferably in chrome?
Disabling javascript stops the redirect, but chrome does not allow me to view any scripts to then place break points.
FireBug has a "Break On Next" feature. I'm not sure if it will work in your case, but it might be worth giving it a quick try: https://getfirebug.com/doc/breakpoints/demo.html#suspend
It seems like Chrome likes to do something to prevent you from seeing the code when you click the stop button before the page finishes loading. It'll say something like window.script123456738391=1;. That makes it so you can't set a breakpoint at the right spot inside the code, especially if there's a redirect on the page before you get a chance to pause it.
What I found you can do is set a breakpoint on that first line. Next time you load the page it will break on the very first line, regardless of what it is. Then you can see all the code the page would load and set breakpoints wherever you want :)

Recreate lifehacker ajax article page refresh, right menu is always visible, url & article changes

On lifehacker.com when a user clicks a article on the right menu sidebar, the article & the page url changes, but the #rightcontainer always stays visible and , you never see it blink on the change of the page url, and when the article is ajaxed in (this is easy),
How would you change the page URL with a DIV staying visible on the page the whole time.
How is this possible? Javascript of some sort? (I think its freezing the browser then doing something, getting the data ready? )
I always thought you couldn't change the page url with javascript because of security issues.
I think you are looking for State Handling :)
It used to be done by adding # at the end of the URL, but now HTML5's State Handling features allow us to change the URL completely (ofc, within our domain)
The answer you need is located here:
https://github.com/browserstate/History.js/
Each url can include the same source as right container it won't refresh/blink as in browser cache.
you couldn't change the page url with javascript because of security
issues
A link can be followed via JavaScript if you require, its not regarded as bad practice (afaik). But there is no need to use javascript it could just be normal anchor/href.

Categories