Prevent # anchor in an iframe from scrolling the browser window - javascript

When a page loads an iframe with a url ending in a #, the parent page scrolls so that the iframe's body is at the top of the browser window.
Demo: http://jsfiddle.net/dTQEE/1/
If the URL ends in #, e.g. http://foo.com#, the browser assumes you want to go to the top of the page.
How do you prevent the parent window from scrolling when an iframe with a hash fragment is loaded?
Problem happens in Chrome, not sure if it's an issue in other browsers.
Right now the best solution I have is to use el.addEventListener('scroll', ...) to reset the scrollTop to 0 if it's not already 0. This works, but the scroll down and the scroll up are both very noticeable.

Not sure this is possible, but you should try to tap into window.onhashchange event and prevent default. If not, you'll have to strip the hash if it's not followed by anything.

I know this is an old question, but I came across it in my search for the same problem. I just came up with a solution that works wonderfully for me in Chrome.
<a href="dummylink.html" onclick="someFunction(); return false;">
The href link is used for the status bar, but because of the return false; at the end, it doesn't actually go anywhere. Then, you just do your redirection (in my case it was a document.formName.submit();) inside your someFunction();. Come to think of it though, you could do everything inline, but that doesn't really seem good form unless you only have one thing to do.
Note: If your someFunction(); has return false; at the end, that will not be sufficient to prevent the jumping.

Related

Page shifts when jQueryUI dialog is opened

I sometimes observed the page shifting when opening a dialog.
<a class="myLink" href="javascript:void(0)">clickMe</a>
$("a.myLink").click(function(e) {$("#myDialog").dialog("open");});
A while back, I found that adding return false; in the click() callback fixed the behavior.
I just learned today that I should use e.preventDefault(); instead.
So, I am going back to get rid of all my return false;statements, and I am starting to question whether I needed them in the first place. Most times, I don't get the same behavior even without the return false;. I don't know if it relates to the browser type or version, the jQuery version, the jQueryUI version, or my JavaScript.
I am starting to now believe/hope it only happens when the target is an anchor link, and what I think is happening is that when the dialog is opened, the default behavior of the link triggers and goes to the top of the page. Is this correct, or is it causes by something else?
Thanks

Keeping anchor bookmark in the page without moving to the bookmark

Is there any way to use an anchor as a bookmark without actually moving the page. The bookmarking is handled through JavaScript.
What I want is to keep the '#bookmark-id' in the url but I don't want the page to automatically scroll to the object.
I've tried
e.preventDefault();
This works in stopping the page scroll but it does not preserve the the anchor in the url.
I've also tried
return false;
This works the same as preventDefault()
Is this behavior even possible?

anchor with #hash go to a wrong place in another page

I met a issue when use an anchor with hash to navigate to a Microsoft KB, this link goto leve2
go to a wrong place in IE but in other browser works fine. I guess this is because of page content changed after page loaded, dose anyone met this issue before?
May be this is a window.load and hash parse sequence problem. When other browsers execute onload event handler first and then set hash position while IE does in opposite way.
Note that if you enter in IE's address bar the again, it scrolls to correct position.

Handle IE window close event in javascript

I need to handle when Internet Explorer (6, 8 and 9) window is closed, in order to ask his confirmation on it. I tried the unbeforeunload, but, as you might know, it's triggered also when any link is clicked, o a form is submited. Some can say to use event mouse coordinates, but there are several ways to break such a validation (Alt+F4 for ex.). There's also a way to set some variable to true when clicking links and check if in the event, but that does not work neither, as I got lots of various links on my pages, and the event is triggered multiple times in some cases.
Also I tried to solve the problem using frames, like: make 2 frames, put my pages to one frame, and to the other (with zero size) put a page with onbeforeunload handler. That would work just fine, but we work with a set of environment js, that we can't prevent to download, and those scripts remove any frames on the page, putting the entire page in the main window - fail…
Can anybody, please, suggest anything else?
If you are going to use onbeforeunload (and it sounds right), you should have a flag that is set so that the event only bothers asking if there is a reason to stay on the page.
var hasChanges = false;
window.onbeforeunload = function() {
if (hasChanges) {
return "You have changes that will be lost if you continue leaving the page";
};
};
Then you just have to set the variable to true (hasChanges = true) if there is a reason to stay on the page...so if nothing has changed, clicking your other links will not trigger the dialog.

how to prevent scroll up on chrome for a href="#"

So basically I have
Link
And return false is there so that it wont' scroll up when you click on it. This works in IE and Firefox, but in chrome it still scrolls up nonetheless...
How do you prevent this from happening in Chrome?
Thanks in advance
There is no spoon
-The Matrix
Use: Link
Link
Don't have a link that points to the top of the page (which is what the URI # means), build on stuff that works.
That said, the return false should prevent the link from being followed, so long as JavaScript is active and error free. Since a link to the top of the page is undesired and a script that does nothing is pretty useless — I'd guess you have some other JS before the return statement that is erroring so the return is never reached.
you probably use href="#" to enable onclick functionality on <a> tag.
you can disable the href with href="void(0)" and you won't get the side effect of scroll to top on chrome

Categories