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.
Related
On a webpage I have some charts that I'm creating with pChart and they take a while to generate.
In order to make the page finish loading in a reasonable amount of time, I've put instead of these charts some pictures (also generated with pChart) that just have a text that says 'Click here to load chart XYZ'.
My problem is that when the user clicks on the picture, the div shrinks to zero and that causes other divs to change position. So I'm thinking of displaying a loading (animated) gif in place of the charts while they are generated. This should also provide a visual indication after the click that the chart is being generated, as well as prevent the div from shrinking.
Here's the code that I'm using so far:
<head>
<script>
function myFunction(where){
var content = '<img style="some style" src="chart.php">';
document.getElementById(where).innerHTML = content;
}
</script>
</head>
<body>
<div id="id1" style="some style">
<img style="some style" src="click-to-load.php" onclick="myFunction('id1')">
</div>
</body>
The above works as I've described: the div shrinks and the user doesn't have any other visual indication that something is happening in the background and there will eventually be displayed something as a result of the click.
So, how do I change the onclick event to display a gif, request the php chart (which is just a jpeg image), and when it's ready dsplay it instead on the loading gif?
On one hand, to avoid the shrinking issue, you could set a width and a height on <div id="id1"></div in order to keep this room even if there is nothing inside. The rest of elements in the page will remain where they are.
On the other hand, when you click on the initial image, you want two things to happen: 1) to swap this image for a gif, 2) and to execute a php file that will load some content.
You only need to set var content with the gif you want to show up, which will happen inmediately, and execute the php file, that will take a while, and then replace the gif with its content.
By the way, the src attribute should have the path to the image.
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 to display a 3rd party link (cross-domain) on a webpage that is displayed on tablets and phones.
The 3rd party has decided to display a modal window, vertically centered on initial page load.
The problem I am running into is that the phones (iOS 5 mobile Safari, in particular) automatically resize iframe to fit the content, causing the modal window to be rendered off the bottom of the screen, due to it being many, many pixels tall.
I have tried everything I can think of to get the iframe to just display in a fixed size, but nothing works.
Adding height attribute or styles is ignored, even with !important
Wrapping the iframe in a div with -webkit-overflow-scrolling: touch; seems to work, but in this situation, still results in the iframe expanding and, thus, displaying the modal window off-screen.
Adding scrolling="no" allows the iframe to be displayed in a fixed size, but I can't get the iframe to scroll now.
I'm wondering if there are any alternatives to iframe or if there is anything I can do to get an iframe to properly display with a fixed size.
Oh, and I must mention, I cannot simply open the 3rd party link in a new window/tab, since this webpage is baked into an app, which I have no control over.
<!doctype html>
<html>
<head>
<title>Test</title>
<style>
iframe
{
height: 100px !important;
}
</style>
</head>
<body>
<iframe style="height:100px;" height="100" src="http://dump.mrslayer.com/test2.html"></iframe>
<script>
setTimeout( function( ) {
var iframe = document.getElementsByTagName( 'iframe' )[0];
iframe.style.height = "100px";
iframe.height = 100;
}, 1000 );
</script>
</body>
</html>
You could use PHP, but this prints the entire document contents inline with your document.
<?php
echo file_get_contents("http://dump.mrslayer.com/test2.html");
?>
If it's an issue, you can use regex or something like that to remove everything before the <body> tag and after the </body> tag after you have the file_get_contents().
You can include this function in a <div>, which should be easier to control with CSS. This is the easiest alternative to an iframe I can think of.
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>