So I have this button that when clicked on will send you to the next slide (void(0)). The next slide is an iframe which is loaded only when you click on the button.
Before the iframe is fully loaded, an animated GIF should show up and in turn hide after the content is fully loaded.
In my case, the GIF is never displayed. It's totally blank until the iframe is fully loaded. What is wrong?
Here is the script:
<script type="text/javascript">
function hideLoading() {
document.getElementById('loading').style.display = "none";
document.getElementById('edtwo').style.display = "block";
}
</script>
The button:
<span id="nextBtn1"><a href="javascript:void(0);"
onClick='document.getElementById("edtwo").src="ed2.html";'></a></span>
And the next slide which includes the GIF and the iframe:
<li><div id="loading"><img src="_img/loading.gif" alt="Loading"/></div>
<iframe id="edtwo" onload="hideLoading()";></iframe></li>
The problem is that your iframe is initially displayed (and moreover, added in the DOM tree). Inspite of its empty src attribute it will load empty page and execute onload event handler. So you will have your indicator hidden as a result of calling hideLoading.
As you can see in this exmaple, onload triggers without clicking on link.
You can remove frame from DOM tree and add it when user clicks "Next" button or change .style.display to empty string (to show it) of gif loader at this time.
Related
I have an iframe which is being loaded from a second url, and opening as a print window, in order to generate and print an invoice.
However the content will only appear the 2nd time I click the Invoice button, not the first. I've tried adding a timeout to the function but it has no effect.
<button type="button" onClick="$('#order_invoice').attr('src','/default.aspx/[url goes here');setTimeout(window.frames['order_invoice'].print(),500);" class="major" title="Tax Invoice">Tax Invoice</button>
<iframe id="order_invoice" name="order_invoice" class="order_invoice" src="" style="display:none;" scrolling="no"/>
When I click the button I get a blank page in the print preview, how can I delay the window opening until the content is loaded?
The best way to control such things is to put print functionality into function on the parent page, than to call this function from child iframe as parent.myFunction() from document.onLoad function of the child.
So, I've tried to googling for it, but seems like that it is not my strongest part.
Example: I have a div with embed a video inside, but to show that video I have to click first on div which opens and shows the video. The problem is that it loads on pageload. It makes browser lags while there is more than 4-5 of those div with videos. How can I make it to not load withing pageload, but only when a div is clicked and unload its content when it is clicked again.
$('.cont').hide();
$('h4').click(function () {
var $answer = $(this).next('.cont');
if ($answer.is(':hidden')) {
$answer.show();
} else {
$answer.hide();
}
});
This is what I have, but it is not as I described it
<div class="container">
<iframe new-src="http://linktoadditionalcode">Update your Browser!</iframe>
Load
Unload
</div>
<script>
function load(elem){
frame=elem.parentElement.getElementsByTagName("iframe")[0];
frame.src=frame.new-src;
}
function unload(elem){
frame=elem.parentElement.getElementsByTagName("iframe")[0];
frame.src="";
}
</script>
this loads/unloads the iframe. While your code just hides it, this completely loads/nloads it.
I am struggeling with the following problem:
I want to stop a div from loading at the page startup. I've got the content inside the div file in an extra folder which is secured with an htaccess+htusers file.
So atm the htaccess question starts immediately when the page is loaded, but it should only ask about this permission, when the button is clicked and the folder content should appear.
Is there a possibility to stop a div from loading and force the load with a button or something?
I assume that your popup contains an Iframe to the subdirectory. That being the case, you can delay the loading of that Iframe by omitting (leaving out) the src attribute, and assigning it only when the button to open the popup is clicked.
Start by declaring an empty iframe, like this:
<iframe id="popup1"></iframe>
Then, using jQuery, assign the src attribute to the iframe when a button is clicked:
$('button#openPopup').on('click', function (event) {
// Set the src location
$('iframe#popup1').prop('src', 'http://domain.com/frame-location');
// Now open the popup the way you normally would.
});
You can also store the location in a data HTML5 attribute and recall it from there when the button is clicked:
<iframe id="popup1" data-src="http://domain.com/frame-location"></iframe>
$('button#openPopup').on('click', function (event) {
$frame = $('iframe#popup1'); // Assign the frame
$frame.prop('src', $frame.data('src')); // Set the src location from data attribute
// Now open the popup the way you normally would.
});
My basic code looks like this:
<iframe id="iFrame1" style="display: none;"></iframe>
<iframe id="iFrame2" style="display: none;"></iframe>
$("#iFrame1").load(function () {
// display iFrame1, hide iFrame2
// set timeout to load next page
});
$("#iFrame2").load(function () {
// display iFrame2, hide iFrame1
// set timeout to load next page
});
I have a set list of pages (same domain, no problems with being displayed inside an iFrame) that are to be displayed in the iFrames (only 1 iFrame is visible at a time), looping through on an interval of 30 minutes (the pages are displaying sporting results).
Basically the way this works is that the src of iFrame 1 is set using $("#iFrame1").attr("src", "<new_url>");. Once the page has fully loaded, the load function triggers and displays iFrame1, hiding iFrame2. A timeout function is then set to load the next page into iFrame2, which will trigger the load function and display iFrame2, hiding iFrame1. It has been done this way so that the loading of the page isn't visible to the user, the iFrame is only made visible once the page has finished loading which gives a smooth transition between pages.
This all works fine! The problem is that one of the pages is set to reload itself (location.reload(true);) at a specific time of the day, and I have no control over that page. Problem here is that the reload of that page also triggers the load function of that iFrame, which causes that iFrame to be incorrectly hidden.
My question is, is there a way to differentiate between the actual src of an iFrame changing, compared to just the content of the iFrame being reloaded (and the src staying the same)? I have had a look at document.referrer, but that gives me nothing.
I ended up solving my issue by adding a check to the load function of each iFrame to check if the iFrame is already visible or not. Only do the swap if the iFrame isn't currently visible..
<iframe id="iFrame1" style="display: none;"></iframe>
<iframe id="iFrame2" style="display: none;"></iframe>
$("#iFrame1").load(function () {
// If iFrame 1 is hidden, show it
if($("#iFrame1").css("display") == "none")
{
// display iFrame1, hide iFrame2
// set timeout to load next page
}
});
$("#iFrame2").load(function () {
// If iFrame 2 is hidden, show it
if($("#iFrame2").css("display") == "none")
{
// display iFrame2, hide iFrame1
// set timeout to load next page
}
});
I press button after that appears div in which shows "loading" and loads iframe.
So, showing div I can do via jQuery, but how to load iframe after event?
Here is my working code as i want
Set the src attribute of the iframe the moment you want it to start loading (set it to "" by default):
$('#my-button').click(function() {
$('iframe#myIframe').attr('src', url);
});
You can also handle events for when the iframe finishes loading:
$('iframe#myIframe').load(function() {
// do stuff...
});
So I understood what I needed:
<iframe id="chgMe" src="Source1.htm">Frames are not supported on your browser.</iframe>
<button onclick="document.getElementById('chgMe').src='Source2.htm'">Next</button>