I'm using a simple code to display php files in a container without loading the page using .load with a function to display and hide a loading animated image
<style>
.loadingbg{width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #84ffbf;
display: none;
}
.loadingbg img{width: 60px; height: 60px; position: absolute; left: 48%; top: 48%;}
</style>
<script>
$(document).on('click','a',function (e) {
$(".loadingbg").css('display','block');
e.preventDefault();
var url = $(this).attr('href');
$('#container').load(url+ '#content',function () {
$(".loadingbg").css('display','none');
});
});
</script>
<div class="loadingbg"><img src="images/page-loader.gif"></div>
contact
about
<div id="container">
<h1>index</h1>
</div>
so when i click on a link it displays the background and the small animated image to load the other page without changing the url but it fetches the text content fast and the loadingbg disappears and it starts loading the images in the new webpage. What i want is not to hide the loadingbg until the remote php file is totally loaded including images.
Demo
After you load the content, you have to make sure that all images are loaded.
In your load callback functions you can use imagesLoaded library (or any other library that validates image loading). Also on anchor click I hide the #container and when all the images are loaded - then show it again:
$(document).on('click','a',function (e) {
$(".loadingbg").css('display','block');
$("#container").hide();
e.preventDefault();
var url = $(this).attr('href');
$('#container').load(url+ '#content',function () {
$('#container').imagesLoaded( function() {
// images have loaded
$(".loadingbg").css('display','none');
$("#container").show();
});
});
});
I have to admit that I'm not 100% sure this will work...
But I would try this:
$(document).on('click','a',function (e) {
$(".loadingbg").css('display','block');
e.preventDefault();
var url = $(this).attr('href');
$('#container').load(url+ '#content',function () {
$('#container').on("load", function(){
$(".loadingbg").css('display','none');
});
});
});
Binding the "load" event to your #container in the .load() callback is supposed to "delay" the .loadingbg CSS change to the moment where all content has completely loaded.
Related
Im having this proplem with an iframe that from JavaScript uses .load every 20 sec, and its allways moving the site in a short sec like pops up and then down,
are there somehow i can get it to hold its position??
You can see what i mean by looking at the ads on this site - http://www.pixel.tv/
the code im using to refresh it is this one
var adforsidetop = setInterval(function () {
$('#forsidetop').fadeOut('slow', function() {
$(this).load('/adsrefresh/forsidetop.html', function() {
$(this).fadeIn('slow');
});
});
}, 20000); // milliseconds
So how can i get it to hold the frame ? without its popping the site
Problem with this is that when element is faded out element css display: is set to none, one way is to add code to set iFrame visibility: hidden or you can simply crate div that contains your iFrame
<div id="iframe-container">
<iframe></iframe>
</div>
and set css for div to be same as iframe
#iframe-container {
height: xxxpx;
width: xxxpx;
}
change your style in screen.css as under:
.fAdvertisement.fBanner {
max-width: 728px;
max-height: 90px;
height: 90px
margin: 30px auto 0;
}
I need to show the loading image until data fetched from the database and bind to the datagrid.I have a button in the parent page (A.aspx), when we clicked on that button it will display the data in the Overlay (B.aspx). We have used greybox to display page in the overlay. I have placed the loading image in the B.aspx
The fetching and display the data in the datagrid are handled in the Page_Load. Since it all the logics are handled in the page_load, the elements will not be available in the DOM.
I am not able to show/hide the loading image.
Note: I have tried to placed the same loading image in the parent page (A.aspx). But the loading image is displaying behind the overlay.
Please find the piece of code:
protected void Page_Load(object sender, EventArgs e)
{
try
{
throbberSplashOverlay.Visible = true;
}
}
#ctl00_CPSContentHolder_throbberSplashOverlay
{
background-color:White;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 500;
}
#throbberSplash
{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000;
background: url(../App_Themes/Blue/images/indicator.gif) no-repeat center center;
}
<div id="throbberSplashOverlay" runat="server" visible="false"><div id="throbberSplash"></div></div>
as per my understanding you are displaying data in b.aspx.so use javascript function in b.aspx.onbeforeunload is for IE.
EDIT:while page is loading for the first time you can not call javascript function until the page loads completely.so show a wait image inside a div.and hide your entire page until the page loads completely.second time you can use onunload or onbeforeunload events.
<html>
<head>
<script>
</script>
</head>
<body onunload="doHourglass();" onbeforeunload="doHourglass();" onload="show();">
<div id="divWait" style="display:inline" >
<h1>wait...</h1>
</div>
<div id="main" style="display:none">
<input type="button" onClick="call your method" />
//your rest of the html
<div/>
<script>
function doHourglass()
{
console.log("inside dohour glass");
var divwait=document.getElementById('divWait');
var divmainpage=document.getElementById('main');
divmainpage.style.zIndex="0";
divwait.style.zIndex="1";
divwait.style.display='inline';
divmainpage.style.display='none';
}
function show()
{
console.log("inside show");
var divwait=document.getElementById('divWait');
var divmainpage=document.getElementById('main');
divmainpage.style.zIndex="1";
divwait.style.zIndex="0";
divwait.style.display='none';
divmainpage.style.display='inline';
}
</script>
</body>
</html>
I've been trying - and I'm at the point where I just don't know what to try anymore.
I'm trying to make my website's chat fill the entire page with this script
<script>
$(document).ready(function() {
function setHeight() {
windowHeight = $(window).innerHeight();
$('ul').css('min-height', windowHeight);
};
setHeight();
$(window).resize(function() {
setHeight();
});
});
</script>
I'm using this script for my chat's ul tag, and it fits the height so the script works, but I'm trying to figure out how to make it fill about 95% of the page, so I still have room for the content below. (Send message, settings and emotes.)
I have a div tag around the entire chat, but setting that in the script doesn't affect the list of messages.
Any ideas to my struggle?
dont bother with js/jquery, use css, pure css like this :
div {
position: fixed!important;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div id="container">
...
</div>
<script>
var container=document.getElementById('container');
var h=document.documentElement.clientHeight;
container.style.height=h+'px';
</script>
I wanted to show a loading icon to users until the page elements are fully loaded. How can I do that with javascript and I want to do it with javascript, not jquery?
Here is a link how google does it
How can I do this?
triggering some function on onload event or something like this .. I know it will be done somewhat like this or any other ways to do it?
Or there is some event for it?
UPDATE
I did something using display property I hide the body element but and onload of body tag I change its property but where to put the loading icon and add more interactivity.
HTML
<body>
<div id="load"></div>
<div id="contents">
jlkjjlkjlkjlkjlklk
</div>
</body>
JS
document.onreadystatechange = function () {
var state = document.readyState
if (state == 'interactive') {
document.getElementById('contents').style.visibility="hidden";
} else if (state == 'complete') {
setTimeout(function(){
document.getElementById('interactive');
document.getElementById('load').style.visibility="hidden";
document.getElementById('contents').style.visibility="visible";
},1000);
}
}
CSS
#load{
width:100%;
height:100%;
position:fixed;
z-index:9999;
background:url("/loading.gif") no-repeat center center rgba(0,0,0,0.25)
}
Note:
you wont see any loading gif if your page is loaded fast, so use this code on a page with high loading time, and i also recommend to put your js on the bottom of the page.
DEMO
http://jsfiddle.net/6AcAr/ - with timeout(only for demo)
http://jsfiddle.net/47PkH/ - no timeout(use this for actual page)
update
http://jsfiddle.net/d9ngT/
The easiest way to put the loader in the website.
HTML:
<div id="loading"></div>
CSS:
#loading {
position: fixed;
width: 100%;
height: 100vh;
background: #fff url('images/loader.gif') no-repeat center center;
z-index: 9999;
}
JQUERY:
<script>
jQuery(document).ready(function() {
jQuery('#loading').fadeOut(3000);
});
</script>
add class="loading" in the body tag then use below script with follwing css code
body {
-webkit-transition: background-color 1s;
transition: background-color 1s;
}
html, body { min-height: 100%; }
body.loading {
background: #333 url('http://code.jquery.com/mobile/1.3.1/images/ajax-loader.gif') no-repeat 50% 50%;
-webkit-transition: background-color 0;
transition: background-color 0;
opacity: 0;
-webkit-transition: opacity 0;
transition: opacity 0;
}
Use this code
var body = document.getElementsByTagName('body')[0];
var removeLoading = function() {
setTimeout(function() {
body.className = body.className.replace(/loading/, '');
}, 3000);
};
removeLoading();
Demo: https://jsfiddle.net/0qpuaeph/
HTML, CSS, JS are all good as given in above answers. However they won't stop user from clicking the loader and visiting page. And if page time is large, it looks broken and defeats the purpose.
So in CSS consider adding
pointer-events: none;
cursor: default;
Also, instead of using gif files, if you are using fontawesome which everybody uses now a days, consider using in your html
<i class="fa fa-spinner fa-spin">
Element making ajax call can call loading(targetElementId) method as below to put loading/icon in target div and it'll get over written by ajax results when ready. This works great for me.
<div style='display:none;'><div id="loading" class="divLoading"><p>Loading... <img src="loading_image.gif" /></p></div></div>
<script type="text/javascript">
function loading(id) {
jQuery("#" + id).html(jQuery("#loading").html());
jQuery("#" + id).show();
}
HTML page
<div id="overlay">
<img src="<?php echo base_url()?>assest/website/images/loading1.gif" alt="Loading" />
Loading...
</div>
Script
$(window).load(function(){
//PAGE IS FULLY LOADED
//FADE OUT YOUR OVERLAYING DIV
$('#overlay').fadeOut();
});
firstly, in your main page use a loading icon
then, delete your </body> and </HTML> from your main page and replace it by
<?php include('footer.php');?>
in the footer.php file type :
<?php
$iconPath="myIcon.ico" // myIcon is the final icon
echo '<script>changeIcon($iconPath)</script>'; // where changeIcon is a javascript function whiwh change your icon.
echo '</body>';
echo '</HTML>';
?>
How do I display a loader when the page loads and hide it when it is loaded?
$(document).ready(function() {
$('.windowLoader').show().fadeOut(2000);
});
Displays the loader long after the page start loading and sometime the 2000 ms duration of the fadeOut event completed before the page has loaded.
Is there anyway to executed the display of the loader as soon as the DOM is ready and remain it visible until the page is loaded (not the images) and then hide the loader?
Why not put the loader directly in the document and then on ready remove it using jQuery? E.G.
<div id="loading"></div>
$(document).ready(function() {
$("#loading").fadeOut(function() {
$(this).remove(); // Optional if it's going to only be used once.
});
});
Else, if you're doing other things within your $(document).ready() then .fadeIn() (/show/create) your loading bar at the top of the method, do your extensive code, and then at the bottom call the .fadeOut()
As kindly suggested if you're worried about people without JavaScript viewing the loading bar then also add the following:
<noscript>
<style> #loading { display:none; } </style>
</noscript>
it should help
customize it according to your code
$(document).ready(function () {
// calculate height
var screen_ht = jQuery(window).height();
var preloader_ht = 5;
var padding = (screen_ht / 5) - preloader_ht;
jQuery("#preloader").css("padding-top", padding + "px");
// loading animation using script
function anim() {
jQuery("#preloader_image").animate({ left: '1px' }, 2000,
function () {
jQuery("#preloader_image"), animate({ left: '1px' }, 2000);
}
);
}
//anim();
});
function hide_preloader() {
// To apply Fade Out Effect to the Preloader
jQuery("#preloader").fadeOut(1000);
}
</script>
<style>
#preloader {background: #1c1c1c;position:fixed;left:0px; top:0px; width:100%; height:100%; text-align:center;color:#fff;z-index: 100000000;}
#preloader div {width:228px;height:240px;margin:auto;padding:10px 0;text-align:center;overflow:hidden;}
#preloader_image {width:228px;height:240px;position: relative;left:0px;top:-10px;}
</style>
</head>
<body id="home" onload="hide_preloader()">
<div id="preloader">
<div>
<div id="preloader_image">
<img src="loading.gif" style="position: absolute;bottom: 0;left: 35%;">
</div>
</div>
</div>
</body>