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?
Related
I develope a chrome extension; with a content script I inject some code in the page. What I want is an event that triggers if the current tab is going to update.
I tried to catch the click event of an a-element and it does work in somehow 80% of all cases. I already check if it's an anchor, but there are still many links which don't reload the page or forward to another.
$('a', document).click(function (e) {
// ...
});
So, what I want is described in the following three steps:
Event: the page is going to reload
prevent it from reloading, execute some code
trigger reloading the page afterwards
Depending on your requirements, have you considered listening to beforeunload event? It's fired when the page is about to unload (also including refresh the current page).
I've been searching for couple of hours now trying to make a simple browser history manipulation.
I have a couple of menu links and I bind click handlers to them. Links' href's are just hashes: href="#Home" or href="#About".
I would like to display a subpage when user clicks on link, without page reload and change the browser url.
I've also tried this basic example with pushState() but it doesn't work:
http://jsbin.com/wecubizovu/1/edit?html,js,console
http://jsbin.com/wecubizovu
When I run this in Chrome, I expect that, if user clicks on the link, he'll have #asd appended to url and popstate won't change. Why is popstate being triggered? How can I make it so that when user clicks on a link, I append hash to browser url and when user clicks browser back button, I catch that event and display the piece of page that I want?
Thanks!
Your a element has a href of '' which is still executed if you do not prevent the default action and this somehow messes up what you want to do.
Changing your function to
$("#asd").click(function(e) {
e.preventDefault();
alert("jo");
window.history.pushState("", document.title, "#asd");
});
achieves what you are looking for.
EDIT: Links: http://jsbin.com/sosozeteti
http://jsbin.com/sosozeteti/1/edit?html,js
I've made a nice page with links that scroll the window to a specific section. I really like this feature, but it creates an annoyance if you click the links too many times - the back button is clogged with all of the hashtag changes. I was wondering if it's possible to scroll the page without creating a url for the browser 'back' button to hook on to.
Afaik if you just use $("#id").scrollTo(); it does not cause url changes.
Assuming you are using the scrollTo plugin....
Is it possible to capture the right click open in new window/tab or mouse wheel open in new window/tab event using jQuery?
UPDATE 1
Here is why I need it. I have codeigniter application which uses pagination class. I use this class to display a grid. The pagination links have been bind with a method that uses AJAX to load the next page in a container div. Now some one can right click and open the next page in new tab/window which I don't want. IMHO, the only way to handle this is to some how trap the (right click or mouse wheel button click) open in new window/tab event.
UPDATE 2
I just realised all my AJAX requests are being served by one CI controller which actually acts as a proxy to other classes/libs. In this controller I can look at the request and if it isn't an AJAX request I can redirect the user to another page.
A workaround solution is to replace all applicable <a> elements with buttons, where (obviously) the buttons would call JavaScript that does the appropriate navigation.
If you're really keen you can apply CSS to make the buttons look like <a> elements, though I don't recommend it because it confuses users who might try to treat them as standard links and right- or middle-click them.
(You could even get it to work for users that don't have JavaScript enabled by, e.g., making each button a submit button in its own little form.)
At the very least you can catch a right-click, using .mousedown() (or, presumably, mouseup()). See this StackOverflow answer about right clicks for more. And by catching it, you should be able to do a standard event.preventDefault() and then do as you like from there. That may be overkill, however, as it could prevent the user from doing other things you want to allow them to do.
I almost fixed a similar issue now for a page which I am working on. My fix was to do some changes in the page if that has been opened in a new window....
Assume that you open a page "B" from page "A" in a new window.
If you want to check the page "B" is opened in a new window from page "A", then follow the below steps..
If (document.referrer == "A" && window.history.length > 1) {
alert("I am page 'B' and opened from page 'A' in a new window");
}
If you don't want people to access link the usual way or fallback when the JS is disabled, then it shouldn't be a link. Just use any element you like (span, div, button, whatever you like) and style it like a link. Then bind the action using JS. Or you can use a link with href="#" or href="javascript: void(0)". That way if users right click it and choose to open in a new window, then they will end up in the same page they were before.
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.