A simple javascript based dhtml effect to show the focus to the user that a AJAX operation is being performed.
Test the below code in a browser by typing some value in the text box to see the effect.
The code simply blur the background color upon onChange event.
<html>
<head>
<script language="javascript">
function showFocus(){
document.getElementById('mainbody').style.backgroundColor ="#CCCCCC";
document.getElementById('Table1').style.color ="#EEEEEE";
document.getElementById('inputform').style.backgroundColor ="#66CCFF";
document.getElementById('inputform').style.color ="#3300ff";
document.getElementById('message').innerHTML ="<i>Please wait....Checking username using AJAX.</i>";
}
</script>
</head>
<body>
<div id="mainbody" style="BACKGROUND-COLOR: #66ccff";>
<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="100%" border="1" style="COLOR: #3300ff">
<TR>
<TD style="HEIGHT: 16px" colSpan="2">
<P align="center">Header</P>
</TD>
</TR>
<TR>
<TD style="WIDTH: 174px">
<P>Left Menu1</P>
<P>Left Menu2</P>
</TD>
<TD>
<P>Body</P>
<div id="inputform">
<form><b>Sample Input form</b><br>
Check username: <INPUT id="Text1" type="text" name="Text1" onchange="showFocus();"><br>
<span id="message"></span>
</form>
</div>
</TD>
</TR>
</TABLE>
</div>
</body>
</html>
