Develop Reference

How to refresh a page in javascript without changing scroll location, even for a milisecond

I am using this setTimeout("document.location.reload();", 10000); to refresh the page every 10 seconds. And after reloading fully, it gets back to the original location. But for like 0.1 second, the top of the page is shown. You can see this in the video:
https://drive.google.com/file/d/1LKDyqhFnKRapUY_fEugIS5Te-2tawlmk/view?usp=sharing

As i see it, your images didn't load yet that is why it looks like it jumps up and than down. That is why your top row is visible at the very beginning. Scroll seems to stay at the bottom. Scroll isn't the problem here (as i see it).
I don't know how images are shown (are you using any data in the background to generate output). But solution to prevent top row to be seen would be in CSS. Presetting width and height of 'img' tag.
If you can see i posted two images of the issue.
There can be few ways to fix it. One way I can think of is using 'window.onload'.
I guess you could show page when HTML is fully loaded with all images to stop 'jumping' after each load. It could help.
Maybe this post will help: window.onload vs document.onload
Let me know if this was helpful for you finding solution for a problem.

Detect event refresh in javascript, save the value of x-scroll in a cookie, if cookie exist when reload, put the value of x-scroll to this value

Webpage messes up and fixes when refreshing

Im working on a website, and I've currently ran into a problem thats got me mind boggled.
It happens on more than one page, but when I refresh the page, the navbar, search bar, and other things mess up all over the place.
When I click on a new link or refresh (sometimes) its back to normal. Then I refresh again the page looks messed up again.
my page is www.ram-bay.com if you want to have a look.
Sometimes when you refresh its okay. refresh a few times on any page it seems to mess up.
Can anyone seem to spot the problem?
Also before you ask me to link code... there is a lot of it

Your page is looking just fine in Chrome/Safari. What browser are you using?
I see that you're using bootstrap and jQuery over CDN, so maybe you have issues with your network connection. Try to get all file stored on your server and see if it fix the problem.

waitForKeyElements(); - Stop a script firing on a popup in Chrome Extension?

This question is a follow-on to another question which needed asking and warranted a new post, so excuse me if I refer to things which may not be clear without reading the other question.
When using the utility waitForKeyElements() I'm facing an issue in which a div is included inside a small popup contained within the same URL. My extension is currently running on the Twitter site, and my intention is that a div contained on the profile pages (e.g. http://twitter.com/todayshow) gets moved above another div on the page. I'm doing this via waitForKeyElements() because of some loading issues which are resolved by using this utility.
However, on a profile page you can click a link to another users name which pops up a small window (inside the same window/tab, on the same URL) showing some info about them and a few previous tweets. The issue here is that the same div appears on this popup and is then moved to the main page behind the popup window, where it shouldn't be. On a profile page, this can be stopped by plugging in the false parameter to waitForKeyElements(), however on a non-profile page it is still possible to activate this popup which is then moving onto the main page, as the div I wish to move it above on a profile page still exists here, causing clear issues.
I'm wondering if there's a way around this, as bugs in Chrome have stopped me from excluding these pages. So far (just brainstorming) I'm thinking:
on a page where the div doesn't exist to begin with, create an empty one meaning false will handle the issue.
somehow stop the script from firing on a given URL, although due to the way Twitter works this would have to monitor OnClick() and the page URL (I think) which I'm unsure how to do.
stop running when the popup appears, but I have almost no idea where to start with that.
Any help is appreciated. Any necessary code related to this question can be found in the first two links, and the issue I'm facing can be seen by a quick visit to Twitter.
EDIT: When plugging in the false param it works when going directly to profiles via the URL bar, if you're on a profile and use a link to get to a profile, the script isn't inserted and my extension fails. So this would need resolving too, or an alternative method altogether.

I had a brainwave that I could use insertAfter() to insert the <div> I was originally moving in front of, after the <div> I was originally moving. This <div> is not present on the popup, which means that nothing is moved onto the back page when it shouldn't be.
In regards to the previous question, my code is now simply:
waitForKeyElements (
"jQuery selector for div(s) you want to move", // Opposite to what it was.
moveSelectDivs
);
function moveSelectDivs (jNode) {
jNode.insertAfter ("APPROPRIATE JQUERY SELECTOR"); // Again, the opposite.
}
This solves the issue I was having and my extension is now working just fine, however I will leave this question posted in case anybody comes back to it in future.

Prevent browser from snapping to previous scroll position when pushing back button

I need to prevent browser from snapping to previous scroll position when the user pushed a back button like this:
<a href="javascript:history.go(-1)"
onClick="javascript:history.go(-1)" title="< GO BACK"></a>
after pushing that button the browser will return to the previous scroll position on this page
i want to stop that behavior and just load the top of the page.
Hope someone know a proper solution.
-exemple-
open a page scroll down go to a new page and hit the back button the page will auto scroll down to the place you scrolled before!

I'm fairly certain the behavior you're describing is is best classified as one of those things considered to be a user preference. (One of those things that you're not meant to tamper with)
#mrtsherman came up with a hack/workaround for this, but unless it's seriously breaking your webapp's usability, I think you should let the browser behave as the user would normally expect it to behave (and scroll to the position they were in when they left the page). Be sure to upvote mrtsherman for his sweet nugget of js if you use it.

I have the same problem and I haven't find yet the correct solution,
but I can give you a very good workaround for this problem.
Just scroll to the top before load the next page.
When the user click back, the browser will scroll to the top.
Example:
First Page:Next
Second Page:Back
Note that href="page1.htm" loads only if user select open in new window/tab
Excuse my English. I hope this helps.

I found a better solution!
Put the following code on every page:
<script>
setTimeout('window.scrollTo(0, 0);', 1);
</script>

How to get rid of Internet Explorer 7 reloading on fragment change

I have an anchor General somewhere in my page. Clicking this in any browser but IE7 (haven't tried IE6) causes no page reload, as expected. However, under IE7 it reloads the page as soon as it's clicked. The strangest thing is that I have the exact same anchor elsewhere in the page and it causes no reload. The only difference I can see between these is a slight difference in style, and the fact that the faulty anchor is deeply nested in divs, where the other is closer to the top.
My questions:
Is this a known bug with IE7?
If so, is there any work around?
If not, any clue as to what might be
going wrong?
Edit:
If you want to see this yourself, go to http://filouguestbook.appspot.com/#!main sign-in with a google account and click on the Settings link in the the top bar. Switch between the General and Accounts pages, the app will reload. From the Accounts page, click on Settings in the top bar, this will switch tab but not reload!

We run in the same problem. There's an issue for this and some workarounds mentioned.

I've had a similar issue, it seems if there is no '#' in the location already, adding it dynamically will cause IE to reload the page. If there is already a '#' in the current location, you can change / append to the fragment without a refresh.
So you could make sure all links to that page end with a #, and/or onload add the # if it doesn't already exist (which will cause the page to double refresh once when it's loaded).