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>
Related
I've got the following code that loads pages into an iframe on all the href clicks. However, some of the pages can take a few seconds to load so I want to show a loading icon with the iframe element greyed out until the content has loaded and then hide the loading element. I've used ajaxStart and ajaxStop functions in the past which work well, but seeing as the pages are not being called by Ajax I dont think that will work. Can anyone suggest how this can be done?
<iframe src="/dashboard" name="contentFrame" id="contentFrame"></iframe>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(e) {
e.preventDefault();
$("#contentFrame").attr("src", $(this).attr("href"));
})
});
Instead of ajaxStart you may show the show a loading icon before changing the iframe src attribute:
$("a").click(function(e) {
e.preventDefault();
// show your icon here
$("#contentFrame").attr("src", $(this).attr("href"));
})
And, instead of ajaxStop you can use the load event:
$("#contentFrame").on('load', function(e) {
// remove your icon here
})
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.
});
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.
Question
I want to play a loader when any page is loading and it work stop when complete page is loaded. Any idea?
i am new in jquery or javascript.
Just put a DIV on your page immediately with the loading graphic. Put this script anywhere on your page or at the top of an external script file:
$('BODY').append('<div id="loading"><img src="images/loading.gif" /></div>');
Obviously you'll need to style it to position it wherever you want. We do it this way rather than just hard-coding it into the page content so that anyone with JavaScript disabled won't see it.
Then attach to the load event to hide the loading DIV once the page is done. Put this script at the bottom of your page or inside a $(document).ready().
$(window).load(function() {
$('#loading').hide();
});
You need to listen the event onload
window.onload = function() {
// do something
}
or in jquery
$(window).load(function() {
// do something
});
but with jquery a think is better to use :
$(document).ready(function() {
// do something
});
You can use ajaxStart and ajaxStop methods.
Demo:
http://www.balam.in/personal/triponetDemo/pre-loader.html
Click on view source to see the CSS and javascript.
Have a div with id as loading and style the div to show the ajax spinner. Whenever an ajax method is triggered it will show the loading div and when the ajax request is completed, it hides the loading div.
Note that you need to have the loading div in all the pages where ever you want to show it.
Well in case you want to show the ajax spinner on refresh,
check the link below:
http://www.balam.in/personal/triponetDemo/pre-loader-refresh.html
View source to see the implementation
Everytime you refresh it will show the ajax spinner and when the DOM is ready it hides the ajax spinner.