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

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

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

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.

Prevent # anchor in an iframe from scrolling the browser window

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.

Sencha Touch: Panel.hide()/show() works only after resize

Here's a demo app: demo Sencha Touch app. The button in the bottom-left corner should show/hide the menu panel on top of the "Location info goes here" bar, however, it works in a strange way.
Here's how (IMO) it should work:
I click a button
A panel appears
Here's how it works now:
I click a button
Nothing happens
I resize a window or press F11 (which is resizing too, anyway)
A panel appears
So, can somebody explain why is this happening and how can I solve my issue? Thx.
I've found a way to get around this. Here it is:
app.viewport.dockedItems.items[0].rendered = false;
app.viewport.doComponentLayout();
So, problem solved.
I don't know exactly what your code is doing but you need to do a doLayout or doComponentLayout call on the Panel to refresh the items when adding or removing components.
The resize event which happens when changing the browser window performs that call which is probably the reason why you are seeing that behavior.
I've posted an answer here that might be of use to fix this issue.
http://www.sencha.com/forum/showthread.php?141705-Show-Hide-Toolbar-docked-panel-briefly-renders-incorrectly&p=762261&viewfull=1#post762261

Disabling middle click scrolling with javascript

Background: I am creating a table reminiscent of whenisgood.net, in that it has click-n-drag toggling for table elements. I want to call different types of toggling code when the left, middle, and right mouse buttons activate a mousedown event.
By using JQuery, I'm off to a good start.
$(".togglable").bind("contextmenu", function() {return false;});
$(".togglable").bind("mousedown", function(e){
e.preventDefault();
toggle(this, e);
});
In the toggle() function I can use e.which to determine what button was clicked.
The punchline: I used e.preventDefault() hoping that it would stop the middle click default behavior of scrolling. It didn't. What can I do to stop the scroll action from activating?
See also "Triggering onclick event using middle click"
Middle-click can be disabled with Javascript, but only in IE, WebKit, and Konquerer. Firefox requires a config file edit. It's 2017 and firefox 50 supports this.
This is an old question...but if I'm understanding it properly, you want to disable scrolling via the middle mouse button click.
Nowadays, you can do this with a single line of vanilla JS:
document.body.onmousedown = function(e) { if (e.button === 1) return false; }
Currently, my solution is this: (more jquery!)
$(".togglable").wrap(
"<a href='javascript:void(0);'
onclick='return false;'></a>"
);
By wrapping it in a link (via jquery wrap), browsers think it's a link and don't scroll on middle click, even if you drag your mouse around. With this setup, and my situation, there are a couple (minor) gotchas.
Firefox will open a new tab when you middle click, but only if you don't drag. Opera will open a new tab when you middle click, drag or not. That's why I used href='javascript:void(0);' instead of just href='#'--so that the client's browser wouldn't load a whole page, just a blank page with a strange url.
But this solution works like a charm on Chrome and Safari. It works well with IE8, except that now when I left-click-n-drag, it changes the pointer to a "can't do that" symbol, since it thinks I want to drag the link somewhere. Untested on older versions of IE.
It is a bit old thread already, but I've tried hard to circumvent this in Firefox (I'm still using 3.6) and I'll share my findings, maybe someone will find it helpful.
Check that if you create an empty HTML file (or a small document with couple of paragraphs) and load it in Firefox, middle click scrollbar does not appear. This is because <body>'s width and height are smaller than window size. If you put a lot of <br>'s, this is not the case and scrollbar appears on middle click.
Google managed to prevent middle click scroller to appear in Google Maps in Firefox by making sure (through JS) that <body> size is always less than window size, plus additionally putting
<body style="overflow:hidden;">.
This is hardly achievable in general case, but sometimes might be useful.

Categories