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
})
Related
I am trying to attach an event hanldler to beforeunload in javascript. Here is my code:
$(window).on("beforeunload", function() {
$("#popupin1").load("new.html");
})
I get the alert but the loading div is not happen. Is it possible to call a function on closing a page (popup page) in this way?
finally i got the answer .by done some change in this same code
$(window).on("beforeunload", function() {
window.opener.$("#popupin1").load("new.html");
})
also need
window.opener
I need this to have a default page on load of aboutme.php but still have all the same functionality
function
$(function(){
$(document).on('click', '.content-link, #profile-body a',function(e){
e.preventDefault();// prevent browser from opening url
$('#profile-body').load(this.href);
});
});
body
<div id="profile-body"></div>
So before any link is clicked to load into the div; the div has already loaded the aboutme.php page, hopefully this makes sense, and thankyou for any help in achieving this.
You have this for the links:
$(function(){
$(document).on('click', '.content-link, #profile-body a',function(e){
e.preventDefault();// prevent browser from opening url
$('#profile-body').load(this.href);
});
});
But you need: when the page loads,
$(document).ready(function() {
var defaultPage = "aboutme.php";
$('#profile-body').load(defaultPage);
});
And that's all. Just add this code after your code, don't replace your version.
You might want to use .ajax instead of .load (when aboutme takes some time to load)
This way you can abort the request when user clicks your content Link while aboutme is still loading:
Aborting jQuery().load()
If you're loading a small snippet, this is probably overkill and you should ignore this post.
If not... just sayin
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>
I need to turn off some jquery fade in and out on a single page because it causes it not to load properly.
The page is not public to view, but it has tabs created in css when I click the tabs it fades out as if I were changing the page and then nothing loads back up.
Is it possible to change the javascript, or disable it on a single page??
Thnx
Add the following after the default JS code is included, in order to override its behaviour.
<script type="text/javascript">
$(document).ready(function()
{
$("a").unbind("click");
$("a").click(function(event)
{
event.preventDefault();
});
});
</script>
This should remove the biding that the <a> element has with the fade effect.
Docs: http://api.jquery.com/unbind/
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.