remove hash location from history and browsers back button - javascript

i have a project in which i have to scroll to a particular image out of a list of them. those images are lazy loaded (since they are all high resolution).
my current approach is to have an internal link to each one of them:
<a name="photo1"><img ... /></a>
when i click on a thumbnail to see the original photo i get a click by doing:
location.hash = "#photo1"
the problem is when i click browser back and forward, the page does not go back to the prev page, instead goes back to whatever photo link has been clicked previously
how can i remove all hash from history?

Your best bet here, I think, is to manually scroll to a target element with JavaScript.
Use the native scrollIntoView to jump to your element:
document.getElementById('[id]').scrollIntoView(true);
You can actually execute this in the <a> href attribute.
<a href="javascript:document.getElementById('[id]').scrollIntoView(true);">
Then, if you desire, you can manually add in the hash without adding a new history entry.
window.location.replace("#[id]");
Sources:
Making browsers ignore the URL hash when the back button is clicked
Scroll with anchor without # in URL
How to call JavaScript function instead of href in HTML

Related

Refresh scroll location to current anchor name attribute

Heyo,
so I've got a main_menu with some sub_menu's. The main_menu li a[href]'s link to the different pages and the sub_menu li a[href]'s link to specific locations inside each page with the <a name="..."> attribute (f.e. from http://example.com/page to http://example.com/page#1). Now sinse this is a Website with a custom CMS, I can't change every single <a href="..."> attribute of all the li a's or else i will make the menu unable to eddit for people with less knowlage. So I redirect every of the sub_menu li a's to the correct anchor name attribute link.
Now once I clicked on one of the sub_menu li a's I will get redirected to the correct page and the correct anchor name attribute link. But I don't get exaktly to the point were the <a name="..."> is located. The Viewport is allways above or below the element.
For some reason this doesn't happen in Chrome thoe. In Firefox, Edge and Internet Explorer I get this weird bug.
So I tried to refresh (not reload) the page and after that it works. So I decided to create a little script with jQuery that makes the page refresh after every .load() and this is what I came up with:
$(window).load(function () {
$('html').load();
});
Now I'm not sure if this is the right approach to my Issue or if my Script is just not correct. But it doesn't work for me. What have I done wrong?
So you are causing li a with no href to change page with the anchor and having to reload to get the anchor positioning right? Have I understood that correctly?
Firstly I'd suggest that they should be href as they aren't the anchor, they're the link..?
With that aside, from what you've given (which probably should be more info generally), I'd guess that the position the viewport is at is where the element was before the page changed during loading and moved the element higher/lower. Chrome is probably timing the anchor positioning later than the other browsers (i.e. after more things are loaded/rendered).
I'd check this by temporarily disabling anything loading on the page that's causing DOM changes and moving the elements around during load. If that's the issue then you'll need to decide how best to handle that based on what is loading.
Hope this helps.

Hash states without "popstate"

I'm trying to load different content with JavaScript on a page, depending on its hash tag. However, it should also work in older browsers which do not support the popstate method.
The problem is, that when looking at window.location.hash after I click on a link (e.g. #newhashtag) on the current page (e.g. example.com/#currenthashtag), on document.ready it still shows me the old hash tag. Only after clicking on a second link, the previous hash tag from the first link shows up in window.location.hash.
So, what is the easiest way to handle different hash states of a website without using popstate?

url change without hash

I want to change url when i open big image in pop up window on a current page with preview images. I don't want use window.location.hash feature because i want to manipulate with new url through PHP next and i found this complex to made it with hash. So, I found that I can use HTML5 feature to make this.
window.history.pushState(“object or string”, “Title”, “/new-url”);
My problem is: I want to remove this new-url from page when i close big image. How can i make this, without using
window.history.back();
?
Thanks.
Closing the image is not analogous to pressing the back button in the browser. It is analogous to following another link back to the original page. So there's no need to go back. Just pushState again, back to the original URL.
On the other hand, if the person does click the back button in their browser, you want that to bring them back to the original page too. So you need to listen for the popstate event, and, when it's fired, run a function which will remove the popup image:
window.addEventListener("popstate", function(e) {
hideimage();
}
Read more about the HTML5 history API.

Refresh page and change ID of the URL

I'm trying to make an page with tabbed content. I'm using foundation tabs (http://foundation.zurb.com/docs/tabs.php).
I made an link offside the <dl></dl> element, and it doesn't work if I use only <a href="#simple5">. I tried an javascript to reload the page <a href="#simple5" onClick="window.location.reload( true );">, but doesn't work either.
How can I proceed?
When you call JS on click, it is run before the default action. You reload a page without hashtag.
Try to add the ID with JS : <a href="#" onClick="window.location = '#simple5'; window.location.reload(true);">
You can also use et function and get the id dynamically.
Sorry for my bad english. ^-^
You don't have to manually perform location.reload. Navigating to a new hash will update the URL without reloading the page. If an element in your DOM has the ID simple5, the browser will scroll to that element.
You may also manually look at the hash change event (or repeatedly check the URL for a change, for browsers that doesn't support that event), and perform an action such as switching to a certain tab.
This is if you want your switching between tabs to be reflected in the browser history. If you don't wish to leave markers in browser history, you would instead want to intercept the link click, extract the href to use just as an indicator of which tab to show, perform the tab change, and prevent the browser from following the link (so that no actual hash change will occur)

JavaScript page jump when updating element using ajax

I have a page which FITS vertically into the windo. When user clicks on the link, I get another page via ajax and plug it into the required element.
Everything works, But when user clicks on another link, page jumps up and it is annoying me.
I have tried using
<a href="#" onClick="showRoom('five');return false;" class="highlight">
//and
<a href="javascript:void(0);" onClick="showRoom('five');return false;" class="highlight">
and it did not work in both IE and Firefox - it continues to jump.
Is there any good working trick that could help?
I THINK that it has to do something with the renew. When I click the link - first, the LOADING ICON is showing. Only then, when reports table is available, it loads into the instead of icon. Therefore browser adds vscrolling bars when information is shown, but goes away in between reports switches and being replaced by small LOADING icon.
I think that I need to capture the scrollbar location when I click on the update link, then, after ajax updates the page, I need to call in another function that would scroll back to previous scrollbar location
This is how I "fixed" the problem, until real solution is discovered:
document.getElementById(showCoursesArea).innerHTML= '<center><img src=\"images/working.gif\"><h1><br><h1><br><h1><br><h1><br><h1><br><h1><br></center>';
pretty much it kepps my page LONG; therefore ajax updates are fitting right in.
'#' will take the user back to the top of the page, so I usually go with void(0). or if as you are saying second option is also not working than remove href and try out
or just try out
Link Text
or
<a onclick="javascript:myJsFunc()">Link Text</a>
or
Link Text
as id "0" will never be present on a page so that nothing happen.
When you click on a link with href="#" it is actually linking to the top of the document. You can actually just remove the href attribute completely.

Categories