The Loading Mask widget will hide all the page's content until the onLoad's event, which mean that the website will not be displayed until the current page be fully loaded. Also this widget can be used in conjunction with the YUI Connection Manager to block the actions over the page until the AJAX's request finish.
Facts:
- The loading mask will be displayed immediately at the beginning
- The loading mask can be reconfigured at any time
- The message's area (Loading, please wait...) is "fixed center" by default
- The loading mask will control the resize window's events
- The loading mask will hide the scroll bars until the onLoad event
- The loading mask can be hiding if you click on it.
- The loading mask can be displayed or hide at any momement after the onLoad event
- The loading mask was designed to work with the YUI connection manager (show the mask before beginning the transaction, and hide it in the callback functions)
Dependencies:
<!-- Dependency source files (put these on the head tag) -->
<script src="http://yui.yahooapis.com/2.3.1/build/yahoo/yahoo-min.js"> </script>
<script src="http://yui.yahooapis.com/2.3.1/build/dom/dom-min.js"> </script>
<script src="http://yui.yahooapis.com/2.3.1/build/event/event-min.js"> </script> <!-- this one is optional //--> <script src="http://yui.yahooapis.com/2.3.1/build/animation/animation-min.js"> </script>
<script src="/yui-cms/build/bubbling/bubbling.js"> </script>
Initialization:
<body>
<div id="yui-cms-loading">
<div id="yui-cms-float">
Loading, please wait...
</div>
</div>
<script src="../../../yui-cms/build/loading/loading-min.js"></script>
<!-- Put the rest of the scripts here... after the loading widget inclusion //--> <!-- Page's content here //--> </body>
Customization (optional):
<script type="text/javascript">
//configuring the loading mask
YAHOO.widget.Loading.config({
effect: true, // default: false
opacity: 0.9 // default: 1
autodismissdelay: 0, // default: 0 (none)
closeOnDOMReady: false,
closeOnLoad: true
});
</script>
Dressing:
<style type="text/css">
#yui-cms-loading {
background:#FFFFFF; // mask background color color: #333333;
display: none; // hidden by default
}
#yui-cms-loading #yui-cms-float {
text-align: center;
font-size: 80%;
background-image: url(../images/loading.gif);
background-repeat:no-repeat;
background-position: top;
padding-top: 20px;
}
</style>
See the API Docs at full screen in a new window:
http://www.bubbling-library.com/sandbox/api/index.hml