Search

Wednesday, July 18, 2007

Gmail Style Ajax Status Message

Here is some css with a test bed to mimic Gmail's loading indicator. Hopefully it will be useful to somebody.
<html>
<head>
<style type="text/css">
div#statusContainer {
 position: absolute;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 10px;
}

div#statusMessageContainer {
 position: absolute;
 background-color: #000000;
 color: white;
 width: 80px;
 font-family: Arial, Helvetica, sans-serif;
 padding: 2px;
 left: 0px;
 font-weight: 700;
}
</style>
<script type="text/javascript">
function ToggleStatus() {
 var toggleButton = document.getElementById('toggleButton');

 if (document.getElementById('statusContainer').style.visibility == 'visible') {
  toggleButton.value = 'Show';
  document.getElementById('statusContainer').style.visibility = 'hidden';
 }
 else {
  toggleButton.value = 'Hide';
  document.getElementById('statusContainer').style.visibility = 'visible';
 }
}
</script>
</head>
<body>
<div id="statusContainer" style="visibility: hidden;">
 <div id="statusMessageContainer">Loading...</div>
</div>
<br />
<input type="button" id="toggleButton" name="toggleButton" onclick="ToggleStatus();" value="Show" />
</body>
</html>
// //]]>