If got a busy icon that displays whenever a button is clicked (the page dim's out and the icon displays. But I intended for this to happen whenever the page is busy and not just when a button is clicked. If tried to look at a few things for example the .ready function, but can't seem to get it working correctly... How do I set this in javascript/jquery to display whenever the page is busy and hide when the page is loaded fully? (I'm still a beginner in javascript).. Any help will be greatly appreciated..
This is how is it currently working (but only if I click on a button and not on anything else (like a checklist)
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var loading = $(".loading");
loading.show();
var overlay = $(".overlay");
overlay.show();
}, 200);
}
$('form').live("submit", function () {
ShowProgress();
});
$(window).load(function () {
$('.loading').hide();
$('.overlay').hide();
});
</script>
You can use the ASPX node UpdateProgress, in your MasterPage
<asp:UpdateProgress ID="UP" DisplayAfter="10" runat="server">
<ProgressTemplate>
<!-- Insert your nodes 'loading' and 'overlay' here -->
</ProgressTemplate>
</asp:UpdateProgress>
Then, when a Postback or a Callback is raised, your nodes will appear.
what you need is the request interceptors. you can check $.ajaxSetup
Related
I have an iframe inside my page.
<iframe id="iframe" src="myurltopage" name="iframe" title="..." overflow-y='scroll' overflow-x='hidden'></iframe>
<div id="spinner"><h3><i class="fa fa fa-spinner fa-spin"></i></h3></div>
I add a spinner on basic-HTML, and inside a function to hide it, if the iframe is the load.
$(document).ready(function(){
$('#iframe').on('load', function()
{
$('#spinner').fadeOut();
}
});
Sometimes, the spinner won't hide even though I see the page is correctly loaded and in the console, I cannot see any open loading processes. I have to reload the page one times, sometimes more, than all works fine.
Did anyone have an idea what it can cause and/or how I prevent this issue?
Thanks a lot.
If you want to hide spinner when all the content is ready on the page (means all the resources are downloaded like images, fonts, css, scripts, iFrames etc) then you can use following code. If you want hide spinner when only that iFrame is loaded please refer the link which I have also entered in the comment.
$(window).on('load', function() {
$('#spinner').fadeOut();
});
Based on the linked info in the comments of the question, from Rahul Raut, i decide to solve it in this way
var init=false;
$(function () {
var innerDoc = ($("#iframe")[0].contentDocument) ? $("#iframe")[0].contentDocument:$("#iframe")[0].contentWindow.document;
innerDoc.onreadystatechange = function () {
if(init==false){ alert("Go"); }
if ($('#spinner').is(":visible") == true){ $('#spinner').fadeOut(); }
return;
};
setTimeout(innerDoc.onreadystatechange, 3000);
});
I'm new to jQuery and been trying to figure this out.
I have a course assignment where I have to make an event handler for a page unload in JQuery that when fired will fadeout(3000) a div and then the text 'Thank you' will fadein(3000). I'm assuming what the instructor means is to have a button or link that leaves the window and goes to another page but first executes the fadeIn/FadeOut.
I'm not having any issues w/ the FadeIn/FadeOut option. I'm having the issue w/ the unload ... how do I get it to go to a new page but first execute a fadeOut(2000)/fadeIn(2000)?
I'm having a problem figuring this out. As far as I understand unload is compatable only w/ $(window), so the only that I can really do is have an alert?
This is what I have so far, but this is not an unload, I'm trying to figure out how to have this effect work once you are unloading. Is that even possible?
JQ
$(function () {
$(".btn1").click(function () {
$("#fadeout").fadeOut(3000);
$("#thankyou").fadeIn(3000);
});
});
CSS
btn1 {
display:none;}
HTML
<button id="btn1" class="btn1">CLICK</button>
Would I add a delay to close the window and link something else at the same time when you hit the button?
$(".btn1").click(function() {
$("#fadeout").fadeOut(3000, function() {
$("#thankyou").fadeIn(3000, function() {
location="url";
});
});
});
#thankyou {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='fadeout'>Hello World!</div>
<div id='thankyou'>Thank you!</div>
<button class='btn1'>Click</button>
This?
is there any way that loading GIF image while onclick and simultaneously, navigation should happen.
i tried this way..
$("#Videop").click(function ()
{
//till the time the post function below doesn't return the following image will be displayed
tactile.page.getComponent("loadingnext").show();
$.post("http://cloud.netbiscuits.net/1305494/SyngentaMobileStage/aspx/Video.aspx",
function (data)
{
//get the new HTML content
$("#root").html(data);
});
});
but how about the script files and background function calls associated with that page?
what I understood from your question is, to redirect when #Videop is clicked and show a loading GIF image
$("#Videop").click(function ()
{ //till the time the post function below doesn't return the following image will be displayed
tactile.page.getComponent("loadingnext").show();
window.location.href('http://cloud.netbiscuits.net/1305494/SyngentaMobileStage/aspx/Video.aspx');
});
The above code will show the GIF image, until your page is redirected. Now you will not have the head ache of bringing all the css and script files from that page to here.
EDIT:
in your new page Video.aspx add this, hope this will solve your problem
$(document).ready(function(){
//Display your GIF Image
//tactile.page.getComponent("loadingnext").show();
console.log("I'm loading");
});
jQuery(window).load(function () {
//Hide your GIF image
// tactile.page.getComponent("loadingnext").hide();
console.log('page is loaded');
});
I think what you need is a progress function, and show a waiting image before ajax starts, and hide after ajax ends.
Add a element hidden in the body tag, that could be a image or a loading div.
Define a function.
Call it before and after ajax.
Here is a small demo, hopes to help you out.
#loading{display:none;position:absolute;left:50%;top:50%;width:100px;border:1px solid #ccc;}
<div id="loading">loading...</div>
$.progress = function(stop){
if(stop){
$('#loading').hide();
} else {
$('#loading').show();
}
};
$.ajaxSetup({
beforeSend: function(){
$.progress();
}, complete: function(){
$.progress(true);
}
});
You can change the style by yourself.
jsfiddler was down, I can not write code, sorry about that. :D
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".shoutpanel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
<a class="trigger" href="#">Shoutbox</a>
<div class="shoutpanel">
<iframe id="shoutbox" name="shoutbox" width="350" height="480" src="tchat.php">
</iframe>
</div>
This script will toggle a sliding panel with a shoutbox in it.
If i put the shoutbox outside of the sliding panel then it will automatically scroll down as soon as it is loaded (to display the last shout)
But for some unknown reason when i put the shoutbox inside the sliding panel, it won't scroll down unless i manually refresh it.
So i am trying to find a workaround and i thought about setting the trigger script to automatically refresh the shoutbox iframe when it is executed. So when you click the trigger it would refresh the shoutbox after opening the sliding panel
i'm not a jquery pro so i have not been able to do it myself... Basically i just need something like this:
$(document).ready(function(){
$(".trigger").click(function(){
$(".shoutpanel").toggle("fast");
$(this).toggleClass("active");
return false;
document.getElementById(shoutbox).contentDocument.location.reload(true);
});
});
Couple of issues:
You have a return false in your click event (which is not required) and also it is before your reload statement. So it never executes.
document.getElementById(shoutbox) should have the id in quotes.
With this you are always reloading the iframe even during slideUp.
Try this:
$(document).ready(function () {
$(".trigger").click(function () {
$(".shoutpanel").toggle("fast", function () { //Use toggle's complete function
if ($(this).is(':visible')) { // check if this is in visible mode
document.getElementById("shoutbox")
.contentDocument.location.reload(true); //reload the iframe
}
});
$(this).toggleClass("active");
});
});
Fiddle
Hello and thanks for looking.
In my earlier project, I was using an UpdatePanel to show the loader gif when I was busy creating data to bind my Gridview with. I wanted to move this part of the code over to JQuery so I replace the UpdatePanel with an img tag linking to the gif after looking at this solution
(Page loading animation)
In my index.html page I had
<script>
$(document).ready(function () {
$('#loadingImage').hide();
});
function ShowLoaderImage() {
$('#loadingImage').show();
}
</script>
and I called ShowLoaderImage from the asp:Button I was using to populate the source of the Gridview.
<asp:Button ID="View_Data_Button" CssClass="dataButton" OnClick="View_Data_Button_Click" OnClientClick="ShowLoaderImage()" runat="server" Text="View Data" />
I expected the image to start spinning when I click the button to load the GridView, and disappear when done loading the GridView since document.ready is raised then as well. Instead, I see a frozen frame of the gif--no animations. How can I fix this?
I suggest to replace the html in the element
$('#data_loding_div').html('<img alt="loadingImage" src="/images/loadingImage.gif" />')
After getting data,
$('#data_loding_div').html(data);