View Full Version : "Loading ..." page
Is there a good example of implementing temporary "Loading ..." page that is displayed as long as JavaScript files are being loaded?
tpattison
3 May 2007, 8:40 AM
There are several, in fact take a look at the source for the API & Examples documentation section. That's how I implemented mine. Just a note though make sure you put your script includes for the JS files after the loading div. That little oversight made my life hell for a bit.
Here are some snippets for you to chew on.
CSS Additions - Add to your custom CSS file you include with the page you want the "loading..." msg displayed on.
.loading-indicator {
font-size:8pt;
background-image:url('../images/default/grid/loading.gif');
background-repeat: no-repeat;
background-position:top left;
padding-left:20px;
height:18px;
text-align:left;
}
#loading{
position:absolute;
left:45%;
top:40%;
border:1px solid #5C5C5C;
padding:2px;
background:#eeeeee;
width:250px;
text-align:center;
z-index:20001;
}
#loading .loading-indicator{
border:1px solid #aaaaaa;
background:white;
color:#000000;
font:bold 13px tahoma,arial,helvetica;
padding:10px;
margin:0;
}
HTML Additions - Add these DIVS right below the body tag and above the JS includes
<body scroll="no">
<div id="loading-mask" style="width:100%;height:100%;background:#999999;position:absolute;z-index:20000;left:0;top:0;"> </div>
<div id="loading">
<div class="loading-indicator"><img src="images/default/grid/loading.gif" style="width:16px;height:16px;" align="absmiddle"> Loading Service Dogs of GA...</div>
</div>
<script type="text/javascript" src="includes/yui-utilities.js"></script>
<script type="text/javascript" src="includes/ext-yui-adapter.js"></script>
<script type="text/javascript" src="includes/ext-all.js"></script>
<script type="text/javascript" src="includes/homepage.js"></script>
JS Additions - Add this code snippet to the JS file you will be using to load the EXT stuff for your page
var loading = Ext.get('loading');
var mask = Ext.get('loading-mask');
mask.setOpacity(.8);
mask.shift({
xy:loading.getXY(),
width:loading.getWidth(),
height:loading.getHeight(),
remove:true,
duration:1,
opacity:.3,
easing:'bounceOut',
callback : function(){
loading.fadeOut({duration:.2,remove:true});
}
});
Hope that helps. There are plenty of other examples on the forum you just have to use the search function.
Tim
Thanks for the tip!
I have implemented the code -- works like a charm.
tpattison
4 May 2007, 5:15 AM
No Problem
badgerd
27 May 2007, 8:58 PM
How could I make this work using an animated gif (that does not stop)?
danh2000
27 May 2007, 10:42 PM
How could I make this work using an animated gif (that does not stop)?
By replacing loading.gif with an animated version???
Edit: I've just looked - it already uses an animated gif.
badgerd
29 May 2007, 3:18 PM
By replacing loading.gif with an animated version???
Edit: I've just looked - it already uses an animated gif.
I already have an animated gif in place, but it does not want to "animate" - what would cause the animation to stop?
navidi
7 Jun 2007, 2:20 AM
IE 7 8-|
IE7 -> Tools -> Options Tab -> Advanced Tab -> Multi Media Section -> Play Animations in Webpages
jalal
12 Jun 2007, 11:26 AM
thanks tpattison
work like a charm
badgerd
18 Jun 2007, 7:37 PM
IE 7 8-|
IE7 -> Tools -> Options Tab -> Advanced Tab -> Multi Media Section -> Play Animations in Webpages
Even IE7 -> Tools -> Options Tab -> Advanced Tab -> Multi Media Section -> Play Animations in Webpages option is checked!
Still won't animate :(
Powered by vBulletin® Version 4.1.5 Copyright © 2012 vBulletin Solutions, Inc. All rights reserved.