I have an iframe with external content that is scrolled from a parent div (the iframe has a large height, while the iframe container div has a smaller height).
As a result, when I scroll to the bottom, the scrollbar stays there when I load another page into the iframe.
Is there any way to send the container scrollbar to the top whenever the iframe loads another page?
Thank you.
I guess this was relatively simple, but it wasn't working for me when I had the javascript in an external file. So I put it into the HTML file:
<script language="javascript">
function gotop()
{
document.getElementById('iframeContainer').scrollTop = 0;
}
</script>
<iframe src="http://whatever.com" onload="gotop()"></iframe>
Related
Does anybody now a solution for the following or at least know, where to find the documentation of this restriction?
I have a html page (the parent) including an iframe (child) without an libraries, just pure javascript and html. It does not matter if both are on the same domain or not. When I add an iframe with a height of 400px to my parent page and the child page inside the iframe is higher, it shows a scrollbar for the iframe. Inside my child page I add a button, which scrolls to position top: 100, left: 0 onclick, which means, that the iframe content is scrolled to its stop. This is working.
When I add an iframe with the height of 2200px, which is higher that the child iframe content and thus there is no scrollbar, this click event is not scrolling anymore.
The practical part:
What I want to solve is, that I have a parent page with a seamless integrated iframe. the iframe has much content, including forms. On smaller displays you have to scroll a bit, fill out the forms, scroll further and confirm a terms button. This validates the form fields and if a form is invalid, I want the iframe content to scroll to its position of the first invalid input fiel, if it is not in the current viewport
I tested it with current Firefox 109.
This is not a same domain issue, the actual logic works when not inside the iframe.
example parent code:
<h2>IFrame Resizing Testpage parent</h2>
<iframe src="scrolling-page.html" width="100%" height="400px" style="border:2px solid green;"></iframe>
<hr>
<iframe src="scrolling-page.html" width="100%" height="2200px" id="iframe-scrolling" style="border:2px solid red;"></iframe>
Example code of the child page:
<h2>IFrame Resizing Testpage</h2>
<div style="height: 2000px"></div>
<h2>IFrame Resizing Testpage End</h2>
<button id="scroll" type="button">scroll</button>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.getElementById('scroll').addEventListener('click', (event) => {
console.log('test');
window.scrollTo(100, 0);
})
});
</script>
Trying to replicate the pre-loader page on load the SVG and a background image appears and as soon as the user scrolls the page scrolls to the content and the page-loader is not visible or can be reached again unless you refresh the page, not sure how to tackle this, any help to point me in the right direction would be great- I have tried diseminating the said page.
there are a few ways to accomplish this, a simple starting point could be something like this:
basic html outline:
<div id="loader">
LOADING Image/content
</div>
<div id="body">
website body
</div>
CSS
#body{display:none;}
jQuery
$(document).ready(function(){
$("#loader").hide();
$("#body").show();
});
noscript fallback
<noscript>
<style>#loader{display:none;}#body{display:block !important;}</style>
</noscript>
Basically, this code has two divs the loader and the body, the body is set as display none in the CSS. When the page is ready, jquery is triggered to hide the loader and show the body.
The noscript fall back will set body to visible when javascript is disabled.
There are multiple ways to accomplish, this is just one idea.
Out of one of a hundred different ways, my initial thoughts were along these lines:
Wrap your main content in a wrapper with position relative and give it an offset from the top by 100% of the window width
Make the page-loader 100% height and width and position fixed
Offset the wrapper before the page is fully loaded, and then just transition it to 0 offset once the page had loaded
See a working jsfiddle here
Create an element (Div) that covers the whole screen.
Behind it (smaller z-index) add a Div container that holds all the images.
Add in JavaScript a load event function to all images:
image.onload = function() {
//image was loaded
}
Hide the cover Div when all images was loaded.
How to know when all images were loaded? add a counter or use a Promise.
Add overflow: none to disable scrolling, and add click event or scroll event (using jQuery) and set overflow to auto.
There are a lot of ways to implement each of these sections.
I have a page with an iframe that displays an image and comments. I don't want anyone to be required to click in the iframe and scroll to see all the content. I've set the height of the iframe to 2500px in hopes that I would only have to scroll the parent frame to view all the content. This isn't working though, it just cuts off at the bottom of the window, forcing me to click inside the iframe and scroll to view everything.
in short, I want to view all content within iframe, without having to click inside the iframe to scroll inside it. any way to do this with css or js?
Is the iframe on the same domain?
It is not a good idea to give a pixel size to a variable size iframe.
This is a solution for a dynamic size:
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
</script>
and on you iframe in the html:
<iframe onload="resizeIframe(this)" ...
I have a website where I show information inside an iframe. And the information inside the iframe comes form Salesforce domain. The data that is being fetched comes in the form of a "training guide" with several pages in it.
I have added the javascript code on both the domains for fixing the changing height thus removing the Vertical scrollbar. Code in salesforce page:
function retrieveInfo(){
parent.postMessage(document.body.scrollHeight, '*');
}
function showLoading(){
$('#dvLoading').show();
}
Code written in my website page is :
function resizeCrossDomainIframe(id, other_domain) {
var iframe = document.getElementById(id);
window.addEventListener('message', function(event) {
var height = parseInt(event.data); // add some extra height to avoid scrollbar
iframe.height = height + "px";
}, false);
}
and my iframe in the page is :
<iframe id="my_iframe" src="https://cp.secure.force.com/mydomainhome" width="100%" onload="resizeCrossDomainIframe('my_iframe', 'https://cp.secure.force.com/');" scrolling="yes"></iframe>
The data inside the iframe has a left pane and a right pane. Left pane contains a list of collapsable menu that shows respective course contents. The left pane manu expands on clicking.The issue that I am getting is that the javascript code for removing V-scroll is getting called on page load but once the page loads and I click on the left pane to expand it the v-scroll reappears.
This is how the page renders on page load:
This is how the page renders after I expand the left pane menus with inner scrollbar:
Is there a way I can prevent the Vertical scrollbar appear even after expanding the left pane menu. I do not want to reload the page on clicking on each of the left pane menu links though.
Would triggering the retrieveInfo on each window.resize event solve the issue?
By expanding the left menu, you are basically resizing the window of the iframe. If you repost your message, your iframe in the parent window will re-adjust accordingly.
I once solved this issue with an external library such as Iframe resizer (https://github.com/davidjbradshaw/iframe-resizer)
That might help you for browsers not supporting "postMessage".
I am loading an IFrame containing a page with a long list of dynamic data into a site. It takes a few seconds to load depending on the broadband speed and needs to be iframed due to the setup.
I would like to show a loading GIF so the user knows something is happening, but I'm struggling to make it appear as a background image in either the parent page container or the div surrounding the content within the iframed page.
<head>
<script>
var foo = function(){
var a = document.getElementById('content');
var b = document.getElementById('loading_img');
a.style.top='';
a.style.left='';
a.style.position='';
b.style.display='none';
};
</script>
</head>
<body onload="foo();">
<img id="loading_img" style="display:block;margin:20px auto;" src="loading.gif" />
<div id="content" style="position:absolute;left:-8000px;top:-20000px;">
.. table .. and stuff
</div>
</body>
not tested, but should work :)
You could add the image as a background of the body element inside the iframe, with a position near at the top and centered. E.g. background-position: center 30px
When table rendering starts, the image will be overlapped, so it's not even necessary to remove it via javascript.