Printable View
I wanted to make a loading page for a pop-up window on my site. Nothing actually needs to be loaded, just wanted a chance to advertise something. Simple really, I want it to display a message with a loading bar for a specified period of time, and then load the designated content.
Generally this is done by showing/hiding a div or two over the top of your content. You can get a fancy loading gif from Ajaxload - Ajax loading gif generator to get you started. Then you'll want to place a DIV on your page:
You'll want this hidden by default, so you'd need to add this CSS:PHP Code:<div id="loading">
<p><img src="loading.gif" /> Please Wait</p>
</div>
The file transparentbg.png would be a 25x25 black PNG set to about 80% opaque. Next you would need a way to show and hide this with jQuery:Code:#loading { display:none; }
Code:#loading { display:none; position:fixed; left:0; top:0; width:100%; height:100%;
background-image:url("transparentbg.png"); }
Now you can use this when you need to do something like querying an external page for data:PHP Code:function showLoading() {
$("#loading").show();
}
function hideLoading() {
$("#loading").hide();
}
PHP Code:showLoading();
$.post("data.php", {var:"foo"}, function(results){
$("content").append(results);
hideLoading();
});
Is there anyway I can do this with simple HTML/CSS/JS? I like to avoid PHP, not my strong suit.
If not, how can I edit the loading time of the loading page?
What I posted is jQuery , has nothing to do with PHP
Oh the PHP Code thing threw me off.
Is the jQuery placed in the <head> or in an external file? And again, can I edit the time the page loads the content.
jQuery is just a JS library that you load typically in head. Surely you can edit the time the page loads. Most likely you will want to do actions related to this in $(document).ready function which jQuery provides for you.
Alright here is a new one
Place that on your ad page , and make it redirect to the content page , the 5000 is 5 seconds in miliseconds. Also make sure the javascript stays in one line , otherwise it won't work.Code:Thank you! Please wait...you will be redirected within 5 seconds.
<script type="text/javascript">function delayedRedirect(){ window.location = "http://www.google.com" }; setTimeout('delayedRedirect()', 5000);</script>
Also all that goes between the <body></body> tag.
That's EXACTLY what I needed! Thanks so much man!Quote:
Originally Posted by kutsumo
@Negata: Thanks for the helping too!