I'm just building a small game, so i loading the first page (Intro) and then, i need immediately start loading the Second page (The 1st level of the Game, but just load, without show it), and then wait for the user click to Show it..
Here is my code for now:
in my html page:
<body id="loadlevel">
in my JS page:
var level1 = "level1.html";
$("#loadlevel").load(level1).fadeIn("slow");
But it show the loaded page immediately!..
How can i load the next page and then wait for the user input to show the loaded page?..
I though to use the JQuery hide() and show(), but hide() will hide the entire page (Also the current page) ;)
Create some invisible field and load data.
<div id="temp" style="display:none;"></div>
Then in JS
var level1 = "level1.html";
$("#temp").load(level1);
and
$('#start').click(function(){
$('#main').html($('#temp').html());
});
Your best bet is to have a main div that's initially hidden with css or jquery, then load the content into there and fadein.
.load()-loads data from the server and place the returned HTML into the matched element.
Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event. Any and all handlers that have been registered with the .ajaxStart() method are executed at this time.
css:
.get-in{
background:white;
position:absolute; // or fixed
left:0;
top:0;
width:100%;
height:100%;
}
jQuery:
$('#loadlevel').ajaxStart(function() {
$('<div/>').appendTo('body').addClass('get-in');
});
$('.get-in').on('click', function(){
$(this).fadeOut("slow");
});
Related
I have a main page with a number of buttons. When a button is pressed the target page is loaded as an object within a div on this main page where target is the page to be displayed within the object.
<script>
.... check which button is pressed and assign path to target
var objectContent = "<object type=\"text/html\" data=\"" + target + "\" height=\"500px\" width=\"100%\" style=\"overflow:auto; min-height:400px;\"></object>";
document.getElementById('content').innerHTML = objectContent;
</script>
html
<div id='content'>
</div>
All works and the target page loads fine within the main page div.
Sometimes it can take a while to load the content and so I would make use of a loading gif. I have been using one on whole pages but I would like one just on the content within the div.
In a target page I have the following to display the loader:
<script>
$(".loader").fadeIn("fast");
</script>
and this to hide it once the page is loaded
<script>
$(document).ready(function(){
$(".loader").hide();
});
</script>
This is not working. The page loads fine but no loading gif. No errors.
If I debug in the browser I see the gif as I step through so it must be loading and hiding, but not when I load the page normally. I suspect it is loading too late or hiding too soon.
Does my javascript show the loader as soon as the page starts to load? I have placed it at the beginning of the body.
Or is something I am doing to hide it before the page is fully loaded? Either way, can anyone see what I am doing wrong?
UPDATE AND ANSWER
Add the onload to the object tag as follows:
var out = "<object ... onload=\"contentLoaded(this)\"></object>";
<script>
function contentLoaded() {
$(".loader").hide();
};
</script>
Then why not leave the .loader element empty and do something like this
$('.loader').fadeIn('fast').html('<img src="loading.gif" />');
And this
$('.loader').hide().html('');
Is the trigger for the loading gif showing only within the loaded-in page?
If so, by the time the browser receives the instruction to show the loader, it's already fetched the data.
I imagine the majority of the time is spent waiting for the content so try showing the loader just before this happens:
document.getElementById('content').innerHTML = objectContent;
You could always create a localised loader image, set within the innerHTML, as you said you had a global one already.
is there any way that loading GIF image while onclick and simultaneously, navigation should happen.
i tried using jquery but loader animations are not happening while page navigates in some mobile browser, is there a solution using ajax to overcome that problem?
The best way to do is is to use AJAX to load new content. What you can do is have a button which when clicked clears the html of the initial page and reloads content for the other html page.
Lets say you have the page's HTML contents in a div called #div and there's a button called #button which when clicked takes you to the new page. What you can do now is that whenever #button is clicked, you can clear the HTML contents of the current div, load the HTML of the new page (and while it loads you can display the GIF image) and then populate the div with the HTML of the new page.
$("#button").click(function() {
//till the time the post function below doesn't return the following image will be displayed
$("#div").html('<img src = "images/ajax-loader.gif" />');
$.post("get_html.php", function (data) {
//get the new HTML content
$("#div").html(data);
});
});
This is just an example, if you are more specific in what you need, maybe I could write code suited to your needs.
I want a part of another page with Ajax Loading. When you click on a button. I have a page. But, i want load only the .section div in the page. When i click on the button. Than only the .section page in the other page must be load.
But, how can i load with ajax / jquery. Only a div from a other page.
You can do this without ajax using jQuery's load method. With this, you can load the content returned into your #div_id or body. Here is an example to load your content into your page's body;
$("#your_button_id").click(function() {
var myUrl = "yourpage.html #div_id_having_data";
$("body").load(myUrl);
return false;
});
Take a look at the jQuery Ajax/load documentation
If i have understood your question properly, then this would be the solution,
On button click load the whole page (.section should be hidden). Then on click of the other button just toggle the .section div.
My need is very simple. When a user try to log in and submit the login form, i would to display an ajax loader icon (like ones generated at www.ajaxload.info) in foreground with the background transparent and unclickable (like in this site). when the server has finished, it can display the next page or redisplay the old one with the errors.
How can i do that?
Thank you very much in advance.
Using jQuery (which is a great javascript library and has hundreds of uses besides this one)
you can detect the submit event on the form and take some action, like this:
$(function(){
$('#yourFormId').on('submit', function(e){
//stop the form refreshing the page
e.preventDefault();
//serialize the form for submission to the server
var data = $(this).serialize();
//get the url for the form
var url = $(this).attr('action');
//make an ajax request to submit the form, showing the loader and unclickable div
$('#yourAjaxLoader,#unclickableDiv').fadeIn();
$.post(url, data, function(response){
//the request has completed, so fade out the loader and div
$('#yourAjaxLoader,#unclickableDiv').fadeOut();
});
});
});
To acheive the unclickable div, try some css like this:
/*css*/
#unclickableDiv
{
z-index:99999;
width: 100%;
height: 100%;
opacity: 0.5;
background-color: black;
display:none;
}
and put the div just inside the body tag. when it is faded in, it will be 'above' the rest of the page, making it unclickable. just put your ajax loading icon inside this div so it will show up, too.
You can get jQuery from http://jquery.com and I highly recommend using it anyway, even if not for this. Hope this helps
Update:
The new jQuery on() method has effectively replaced .submit and .click etc since version 1.7, so I've updated this example to reflect that. More info here: http://api.jquery.com/on/
You could use JQuery and take a look at Throbber plugin (http://plugins.jquery.com/plugin-tags/throbber):
Provides trivially easy way to notify users that a request is being loaded and processed in the background, so that they know their action was received and the page has not frozen. Just toggle the message (or image or any element) on or off with $.loading() or $('#foo').loading(). The plugin handles creation and positioning and "pulsing" of the message for you. It also provides a 'mask' option to block the UI (at the call level) while the loading message (or image or any element) is running.
I have a button to download an excel file. When the user clicks the button, the onClick function calls
window.location= url
and when the downloading is done, the save as dialog popups with the file.
Now, I want to show a spinner until the file dialog appears. How do I do this?
I tried to create a spinner before "window.location" and hide it after that, but the spinner goes away immediately because window.location does not block until the file downloads.
Any ideas?
Thanks.
This would be a solution which only works for Firefox browsers:
<script type="text/javascript">
//<![CDATA[
function download(url){
document.getElementById('spinner').style.display='';
frame = document.createElement("iframe");
frame.onload=function(){document.getElementById('spinner').style.display='none';}
frame.src=url;
document.body.appendChild(frame);
}
//]]>
</script>
In your HTML, have a spinner set up and ready to go:
<div id="spinner" style="background:url('/images/ico-loading.gif') #000 center no-repeat;opacity:.5;width:100%;height:100%;display:none;position:absolute" />
Then call it using this:
<button type="button" onclick="download('/spreadsheet.xls');">DOWNLOAD SPREADSHEET</button>
The button will call our javascript function with the URL we want to download. At this time we make the hidden spinner DIV visible and allow it take over the screen (note position absolute in style). An IFRAME is created to suck down the file. After the file downloads, it is given to the user and the .ONLOAD event is fired which hides the spinner DIV. All done with client side javascript!
You can't do that using just client script, because there is no event for when the download completes.
You would have to download the file through a proxy page on the server, with a unique identity in the URL so that each download could be identified. Then you could send AJAX requests from the script to the server to determine the status of the download.
This code works for jQuery, but with simple modification also for javascript. With this you won't need to change your requests-codes at all.
Create a div element which contains the animation (either another div element with css-animation or an animated gif in an img element) and give it the id = "loadingicondiv". For example like this
<div id="loadingicondiv">
<div id="loadingicon" style="background:url('imgs/logo.png') center no-repeat;opacity:1.0;display:none;position:absolute;z-index: 9999;"></div></div>
Set the style of that div in your css file as follows
#loadingicondiv{
width: 100vw;
height: 100vh;
background: rgba(0,0,0, 0.3);
position: fixed;
z-index: 9999;
}
In the embeded js file enter this
function showAnimation(){
$('#loadingicondiv').css({display : ''});
};
function hideAnimation(){
$('#loadingicondiv').css({display : 'none'});
};
$(document).ajaxStart(showAnimation).ajaxStop(hideAnimation);
This last line makes, that every request sent by your web application, executes the function "showAnimation" at the beginning and executes the function "hideAnimation", when the request is done.
If you don't use jQuery and need pure javascript, simply replace $('#loadingicondiv') with the following code
document.getElementById('loadingicondiv').style.display = 'none'
Note: In case you have some frequent updating on your website, which you don't want to show that animation for, just make the displaying of the animation dependent from a global variable, which you set to false before sending those special requests, which you don't want the animation to be shown for. And don't forget to set it to true, when the request is done by them.