JohnT
20 Jan 2007, 11:27 AM
Showing a Pre-Load Message (DIV)
As I am learning, I will post to help others when I figure something out, if that is okay.
Today, I figured out (understand how to use) the preloader.
Original Discussion:
http://www.yui-ext.com/forum/viewtopic.php?t=414
The Code:
Here is a simple preloader:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pre Load Test</title>
<style type="text/css">
<!--
.loadBox {
border:3px solid #B2D0F7;
color:#003366;
font-family:verdana,tahoma,helvetica;
font-size:14px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
left:35%;
line-height:normal;
padding:10px;
position:absolute;
text-align:center;
top:40%;
width:220px; /* Size of my image */
}
-->
</style>
</head>
<body>
<div id="preload" style="background-color:white; width:100%;height:100%;z-index:50000;">
<div class="loadBox" id="loadBox" >
<span><h3>Loading...</h3></span>
images/ajax-loader.gif
</div>
</div>
<script type="text/javascript" src="yui_0.12.2/build/utilities/utilities.js"></script>
<script type="text/javascript" src="lib/yui-ext.js"></script>
<script type="text/javascript">
/*
* Once we get here, the above
* scripts are loaded. Now we
* have to remove the preloading DIV
*/
var loading = document.getElementById('preload');
loading.parentNode.removeChild(loading);
</script>
<div id="MainContent">
We are loaded. Please see the thread located at:
http://www.yui-ext.com/forum/viewtopic.php?t=414
for topic discussion.
</div>
</body>
</html>
In Action:
http://trope.bravehost.com/examples/preload.htm
Resources:
You may obtain your own preloading gif's here: http://www.napyfab.com/ajax-indicators/
As I am learning, I will post to help others when I figure something out, if that is okay.
Today, I figured out (understand how to use) the preloader.
Original Discussion:
http://www.yui-ext.com/forum/viewtopic.php?t=414
The Code:
Here is a simple preloader:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pre Load Test</title>
<style type="text/css">
<!--
.loadBox {
border:3px solid #B2D0F7;
color:#003366;
font-family:verdana,tahoma,helvetica;
font-size:14px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
left:35%;
line-height:normal;
padding:10px;
position:absolute;
text-align:center;
top:40%;
width:220px; /* Size of my image */
}
-->
</style>
</head>
<body>
<div id="preload" style="background-color:white; width:100%;height:100%;z-index:50000;">
<div class="loadBox" id="loadBox" >
<span><h3>Loading...</h3></span>
images/ajax-loader.gif
</div>
</div>
<script type="text/javascript" src="yui_0.12.2/build/utilities/utilities.js"></script>
<script type="text/javascript" src="lib/yui-ext.js"></script>
<script type="text/javascript">
/*
* Once we get here, the above
* scripts are loaded. Now we
* have to remove the preloading DIV
*/
var loading = document.getElementById('preload');
loading.parentNode.removeChild(loading);
</script>
<div id="MainContent">
We are loaded. Please see the thread located at:
http://www.yui-ext.com/forum/viewtopic.php?t=414
for topic discussion.
</div>
</body>
</html>
In Action:
http://trope.bravehost.com/examples/preload.htm
Resources:
You may obtain your own preloading gif's here: http://www.napyfab.com/ajax-indicators/