A YUI Loading Panel Widget
Probably needless to say, but here it is. A web page which is processing a lengthy Ajax request and doesn't provide a loading indicator of any kind will mostly mislead the user to think that the page has stopped responding. So the solution? Use a loading indicator of course. Here's a very handy loading indicator widget for Ajax programmers who use YUI.
Files
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.4.1/build/assets/skins/sam/skin.css"> <script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/utilities/utilities.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/container/container-min.js"></script> <script type="text/javascript" src="[PATH_TO_JS]/loadingpanel.js"></script>
How to Use
First, create a new instance of loading panel. After that, you can call show or hide method on the loading panel object.
var loadingPanel = new yuiLoadingPanel();
//loadingPanel.show();
//loadingPanel.show("Processing...");
//loadingPanel.hide();
The user can close the loading box by clicking on the cancel link. If you want to handle this situation, you can subscribe to the cancelEvent:
loadingPanel.cancelEvent.subscribe(function(e, a, o){
alert('You clicked cancel!');
});
$D = YAHOO.util.Dom;
$E = YAHOO.util.Event;
var yuiLoadingPanel = function(conf){
conf = conf == undefined ? new Array() : conf;
conf.id = conf.id == undefined ? 'yuiLoadingPanel':confi.id;
conf.header = conf.header == undefined ? 'Loading, please wait...':conf.header;
conf.width = conf.width == undefined ? '240px':conf.width;
this.conf = conf;
this.cancelEvent = new YAHOO.util.CustomEvent("cancelEvent", this);
this.init();
};
yuiLoadingPanel.prototype = {
init:function(){
var loadingPanel = new YAHOO.widget.Panel(this.conf.id,{
width:this.conf.width,
fixedcenter:true,
close:false,
draggable:false,
modal:true,
visible:false
});
loadingPanel.setBody(this.conf.header +
'<img src="http://us.i1.yimg.com/us.yimg.com/i/us/per/gr/gp/rel_interstitial_loading.gif" />');
loadingPanel.render(document.body);
$D.addClass(loadingPanel.id, 'tcc_lightboxLoader');
var cancelLink = document.createElement('a');
$D.setStyle(cancelLink, 'cursor', 'pointer');
cancelLink.appendChild(document.createTextNode('Cancel'));
$E.on(cancelLink, 'click', function(e, o){
o.self.loadingPanel.hide();
o.self.cancelEvent.fire();
}, {self:this});
loadingPanel.appendToBody(document.createElement('br'));
loadingPanel.appendToBody(cancelLink);
$D.setStyle(loadingPanel.body, 'text-align', 'center');
$D.addClass(document.body, 'yui-skin-sam');
this.loadingPanel = loadingPanel;
},
show:function(text){
if(text != undefined){
this.loadingPanel.setHeader(text);
}else{
this.loadingPanel.setHeader(this.conf.header);
}
this.loadingPanel.show();
},
hide:function(){
this.loadingPanel.hide();
}
};
What's Next
More interesting posts ...
Comments
17 Comments so far
Leave a Comment
If you would like to make a comment, please fill out the form below.
Attention
If you want to post source code, please wrap it with <pre> and </pre>
If you want to post source code, please wrap it with <pre> and </pre>
Loading ...
I'd like to ask for some clarifications as I can't get it working and would appreciate some help.
2. var loadingPanel = new yuiLoadingPanel();
//loadingPanel.show();
//loadingPanel.show("Processing...");
//loadingPanel.hide();
1. Does this go into , section? I assume it needs to be enclosed into standard JavaScript tags <script., right?
2. I plugged all code into blank HTML page, into body and nothing happens when I click button. In Firefox, I get an errors:
YAHOO is not defined
$D = YAHOO.util.Dom;
and
loadingPanel is not defined
onclick(click clientX=0, clientY=0)
Do I need to install something else? Thanks.
@Steve,
You need to include YUI library files, which is described in the File section of this post.
Of course for merely a loading panel, the code above is quite heavy. If you use YUI as your Ajax framework, you will most likely have these files included already. The trade-off now then is just the size of the loadingpanel.js itself, and you can conveniently call
loadingPanel.show('bla bla')whenever you need it.I noticed that the animated gif sometimes fails to "animate" properly in IE6 after a post back. I found the following fix...
http://www.mredkj.com/vbnet/AnimatedGifOnPostback.html
any idea how to fix in your example?
got it...
change "show function" to this...
show:function(text){
if(text != undefined){
this.loadingPanel.setHeader(text);
}else{
this.loadingPanel.setHeader(this.conf.header);
setTimeout('document.images["Act"].src = "../Images/Activity.gif"', 200);
}
Lovely!
thanks for the code. I am playing with the panel, using it as a dialog (don't want to use the "Dialog" widget for some reasons in this case).
I realized that sometimes submit()'s or onClick()'s fire below the mask so I am disabling all buttons after calling the dlg.show().
However I did not know how to catch if someone cancels the dialog by clicking on "X" as I did not know how to hook onto the hideEvent(). Your code showed me how to subscribe to that event and it works like a charm.
Thx
F.
Hy!
Sorry for my English.
I'm absolutely beginner in ajax.
I'm using a Ajax loader script in my page.
I understand that if I use YUI for this script. I must use YUI to load my pages on the site? So my Ajax page loader script is unnecessary?
Thx
Faster
I am not sure which Ajax script you are referring to, but if you meant this one, then the answer is no. YUI has already encapsulated this functionality into its library, which is called the Connection Manager.
Can this loding indicator mask only certain div not the whole body, i think it will be better if this loading indicator will be shown over any element and mask it .. how that thing can be implemented .. ??
I am not sure but I think it's doable. A mask in YUI is simply a semi-transparent DIV which placed above all elements in a page. If you want this mask to cover only certain elements, you have to manually position this mask.
Go to this URL and take a look the code that has "sizeMask: function ()", you'll see how mask is implemented in YUI. Use style.width, height, left, and top to adjust the mask.
Untested, good luck.
Is there any way i could do this amazing effect without YUI? I mean, using a single js file with all the necessary functions and code to recreate the effect. Thanks.
[...] ????? ??????? ??????? ??????:
??????????? ???????? ??????AJAX ?????? ???????????? ???? ????????????? ? ???????- ?????? ??? ?????????? ?????? ? ???????- AJAX ?????? ??? ???????? ????? ????????- ???????? ????????? ????????? ??? ??????? ?? ?????? AJAX [...][...] ??? ????????. ??????, ??? ????? ????, ?? ? ??? ??? ????. ?? ??? ???? ?????? ?? ???????, - [...]
Hi, i am a noob at this and would like to use this preloader on my website but dont have a clue to integrate the script to my pages to get it to work, can someone please assist....
Many thanks
mp3 bollywood ringtones...
Get best card credit student apostar jugar portal...
When i develop my CMS i integrated 3 useful / for me:) / function.
Sorry my bad english, i' am from hungary.
There is the modified source code:
yuiLoadingPanel.prototype = { ... ... ... hide:function(){ this.loadingPanel.hide(); }, updateBody:function(BodyContent,DoNotShowCancelLink){ this.loadingPanel.setBody(BodyContent); if(!DoNotShowCancelLink){ var cancelLink = document.createElement('a'); $D.setStyle(cancelLink, 'cursor', 'pointer'); cancelLink.appendChild(document.createTextNode('Bezaras')); $E.on(cancelLink, 'click', function(e, o){ o.self.loadingPanel.hide(); o.self.cancelEvent.fire(); }, {self:this}); this.loadingPanel.appendToBody(document.createElement('br')); this.loadingPanel.appendToBody(cancelLink); } }, updateBodyWithTimedHide:function(BodyContent,Timer){ this.loadingPanel.setBody(BodyContent); setTimeout(function(){this.loadingPanel.hide();}.bind(this), Timer); }, updateBodyWithTimedFunctionCall:function(BodyContent,FunctionToCall,Timer){ this.loadingPanel.setBody(BodyContent); eval("setTimeout(function(){this.loadingPanel.hide();" FunctionToCall "}.bind(this), Timer)"); } };Sample usage:
... ... ... var loadingpanelconf2 = new Array(); loadingpanelconf2.header = "A hir torlese folyamatban ...<br/>"; loadingpanelconf2.width = "450px"; var loadingPanel2 = new yuiLoadingPanel(loadingpanelconf2); loadingPanel2.show(); loadingPanelObj = loadingPanel2; if(jsonValasz.AjaxEredmeny==0){ loadingPanelObj.updateBody('<b>SIKERTELEN torlesi keres!<br/> Az adminisztracios rendszer hibat jelzett a torlesi kerelem soran!<br/></b>'); loadingPanel2.cancelEvent.subscribe(function(e, a, o){ Ajax_ReloadhirLista('kozep'); }); } if(jsonValasz.AjaxEredmeny==1){ setTimeout("loadingPanelObj.updateBodyWithTimedFunctionCall('<b>A torles sikeresen vegrehajtva!<br/> Adatfrissites kerese ...</b><br/>',\"Ajax_ReloadhirLista('kozep');\",2000)", 2000); } ... ... ...Any have other samples? Just can't search in all Internet!
hi ! this nice worked . how to load Dynamic page in ( DIV ) with out refresh with this method ?