Refresh scroll location to current anchor name attribute - javascript

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.

Related

remove hash location from history and browsers back button

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

Can you make the browser detect Javascript links on elements other than <a>

On medium.com they have a clickable link on an h3 element, however the browser seems to know the URL that it will take you to and shows it in the bottom left side of the screen.
When I inspect element I see that this link is only an h3 element. It has a name attribute, an id and a class on it. There is no element and there is no href.
I assume that they listen to the click event of this element and then redirect the user to the correct page, but what I don't understand is how google chrome knows that this is a link and even shows the url it will take you to.
Is this something the browser now supports? Is there a specific way of forcing the browser to show it?
Yes, there is a <a> element, just further up the line:
This would have been visible in your screenshot too, in the selector bar at the bottom:
(Link to the page, if anyone is interested.)
Yep, it can be done through a simple listener, eg in jQuery:
<h3 id="link1">Link1</h3>
And the codebehind:
$("#link1").click(function () {
window.location.href = "http://www.google.com";
});
Should work in any modern browser, but I'd say they'd all interpret it differently. I'm not sure we really need to know why it works, just that it does - you could get in to asking how anything works in a browser. Presumably they quickly parse all of the code as it is loaded so they know all of the possible events. Something like this might help.
But if not Siguza finde <a href>. I think chrom count dependecis and show redirect page or function. Status bar you can just turn off or on. Or change by "wrong" redirect like can you show "Im the best" take
test
show : localhost34567/Im the Best! ---> ok not perfect :D but you can play with it and have better results.
https://superuser.com/questions/239202/turn-off-the-link-hover-statusbar-in-google-chrome

HTML anchor tag in an iframe

I have this weird issue in chrome (only in chrome).
I have a page with std layout (header,content,footer with left and right margin). Content section has an iframe containing many anchor tags of the form Text
When any of this anchor tag is clicked, header goes hidden. Any anchor tag of the same form but outside the iframe works fine.
I have verified that the DOM has the header elements intact. Display is not 'none' (Zooming in the page to 150%, header starts appearing slightly).
When I force the browser to redraw the page, like changing any css attribute(height) of the content section , header appears.
When I change the href from '#' to say '#nonexistent', the link works perfectly fine.
One quick fix is to change the href to, say javascript:void(null); (and this works too) or something equivalent. But I'm somehow constrained that I can't add any scriptlets.
This looks so weird. Can somebody help/point me to the right direction?
Try changing/adding a target attribute to the anchor tags in the iframe. I'm not certain whether the header is disappearing within the iframe or the parent page, but my guess is you want target="_parent".
Also, javascript:void(null) should be javascript:void. void is a type, not a function. Calling (null) is unnecessary.

iFrame move page up to parent div / top

I have an iFrame within a parent page the length of the content varies from page to page in the iFrame so I would like to have the page jump back up to the top in certain situations.
This works fine in IE where breadCrumb is the id of a div in the parent window.
<script>
window.parent.location = "#breadCrumb";
</script>
It jumps the page to the right spot and the url is the parentwindowurl.aspx#breadCrumb
However in Chrome and Firefox this does not work it changes the page to the url iFrameurl#breadCrumb which replaces the parent page and has no breadCrumb div.
Does anyone know how I can get this to work in Chrome and Firefox?
Or is there a better alternative I should be using?
Try this one
window.parent.location.href = "#breadCrumb";
Assuming you want it to the very top, it's easy
https://developer.mozilla.org/en-US/docs/DOM/element.scrollTop
window.parent.scrollTop(0);
sorry it might actually be
window.parent.document.body.scrollTop(0);
if not, please let me know the error
The location hash is normally used to scroll to an anchor tag with a matching name attribute, so you would need to have a tag like:
<a name="breadCrumb"></a>
in the parent frame in order to have the browser scroll to that content with a location hash.
I'm not familiar with this behavior on div tags; that might be an IE-specific feature.

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