Thursday, January 22, 2009

Creating a splash screen effect with Dojo

Many professionally designed applications provide a splash screen while the main application loads in background, so that I thought I would learn how to do it using Dojo 1.2.

Starting from an external blog entry with a working example I had to spend a few extra minutes on the Dojo documentation to find the right fade-in call in Dojo 1.2, which turned out to be “dojo.anim”.

The final technique is summarized in this modified version of the original blog entry:

function show_main_gui() {
    dojo.byId(“splash”).style.display = “none”;
    dojo.anim(“real”, { opacity: 100 }, 100);
}
dojo.addOnLoad(show_main_gui);



<div id="splash" style="z-index: 100; width: 100%; position: absolute; top: 200px">
<div align="center">
<img src="images/throbber.gif" />
</div>
</div>



<div id="real" style="filter: progid:dximagetransform.microsoft.alpha(opacity=1); opacity: 0.01" dojotype="LayoutContainer">
...
</div>


The original entry also lists this nifty generator for the “loading” icon.

No comments:

Post a Comment