iFrame move page up to parent div / top - javascript

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.

Related

Scroll bar stays in same position from one website to another

I want to be able to click on a link in my HTML website and when I load onto the other website to be in the same position. Say you are in the middle of a website when you click the link I want to be in the middle of the website when I load onto that link. Is there anyway to do this? Sorry if this is confusing.
I'm sorry for the confusion, but I meant if you controlled both web pages. My bad.
There's no way unless you have control over the linked site.
Scrollbar is rendered by the browser based on overflow-x or overflow-y attributes, if you have no control over the linked site's code, you can't force it to present a scrollbar or scroll to a specific position(which requires javascript code to be executed)
If you have access to the linked site's code, you can send the ID of the element you want to scroll to through the url as a parameter like this:
https://example.net#mydiv
and then, at the linked site, just add this javascript code to scroll to the element:
$(window).load(() => {
const divID = window.location.hash;
document.getElementById(divID).scrollIntoView();
});

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.

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 scroll due to the links inside it

I have a page with a fixed header div like a tool bar and an Iframe which loads content form the same/different domains.
The problem is whenever a link inside the iframe is clicked, it scrolls the page to the top hiding the toolbar itself. This happens in desktop/mobile webkit browsers.
Note:- I found the reason for why the iframe scrolls the parent page when any link inside it is clicked, it turns out that if the anchor tags within the iframe have empty hash values i.e href="#" and if they are clicked then it causes the parent page to scroll to point from where the iframe starts. This happens in webkit browsers only for me. This is not reproducible in FF.
If you are dealing with the problem in Javascript simply use this code:
ifrm.setAttribute("onload","scroll(0,0);"); //(ifrm is the id of the iframe)
or
<script language="javascript">
function totop() {
scroll(0,0);
}
</script>
and in your html for iframe, add an onload attribute as below:
<iframe name="iframe" onload="totop()">
Got this 2nd solution from another forum, and changed to the 1st one to suit my requirement as I am creating the iframe element and setting its properties in javascript and not in html. It worked for chrome as well as IE. FF didn't have the problem in the first place.

Make the web browser scroll to the top?

What is the JavaScript to scroll to the top when a button/link/etc. is clicked?
Top
If you had an anchor link at the top of the page, you could do it with anchors too.
<a name="top"></a>
top
It'll work in browser's with Javascript disabled, but changes the url. :( It also lets you jump to anywhere the name anchor is set.
actually, this works by itself, no need to define it.
top
This is a "magic" hashname value that does not need to be defined in browsers.
Just like this will "reload" the page.
reload

Categories