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
Related
Consider this simple link:
Do Nothing
When this is in the main document in a window, clicking it does nothing, because the return false cancels the click.
But when this is in an iframe document (in Firefox and Chrome at least), it opens a new tab window.
This is very annoying because I want to be able to hook a click event (in actuality using jQuery's $(element).click(handler))), do some logic, cancel the navigation, and NOT have that extra tab.
What's going on here and how can I stop this behavior?
It turned out that I had an unrelated jQuery click event that was causing this behavior, so this was my user error. Dumb.
This might be a little interesting for people who know front-end in depth.
This doesn't make sense, try it yourself:
Open a link with href + target="_blank"
Close the opened tab and go back to the original
The link state is now :focus
That is fine. But what is wrong with this?
Open a link with window.open() on click event
Close the opened tab and go back to the original
The link state is now :hover, even though it's not really hovered. And you can't do anything about it unless you start moving cursor. trigger('mouseout') doesn't help and nothing really does.
Here's a JSFiddle – I've added a console.log() output for each event and made states different colors, so you can see better.
Browser keeps :hoverstatus until the mouse passes over other thing, if the mouse remained in the same position when you open the new window/tab, it will keep the :hover. When you return the focus to the page the :hover will remove as soon you pass the mouse over something else. That behavior could be buggy in some computers(not necessarily browser fault) and will stay until you click in another place.
I've got a browser plug-in I'm working on and I want it to behave a certain way when the user clicks things. Not limited to, but including, a behavior for links!
The problem is that the plug-in has to work for a wide variety of sites, and some of those sites use the dreaded pseudo-protocol such as:
Show Element
Currently my behavior is added to the anchor tag via
anchor.addEventListener('click', superAwesomeFunction);
Unfortunately this has a problem where the click listener only fires once. If I preventDefault() of course the click listener sticks around, but I've now broken the host site! Otherwise, clicking the link fires the click listener but only on the first click. I'm wondering why my superAwesomeFunction() doesn't fire again if the link is clicked a second time. Is href="javascript:things()" doing more than I know?
It is possible to add an event listener to a link that has a JavaScript function call set in the href attribute.
Here's a jsFiddle that shows it working. Both functions fire each time the link is clicked.
There must be something else going on with your code beyond what we can see in what you gave us.
If you must wait user some time and going on url then, you may add some code to your superAwesomeFunction's process end:
document.location.href = $(this).attr("href");
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.
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.